Squarelive 轉蛋遊戲製作心得

前言

在2023年的6月，我製作了一款可以把觀眾的 SuperChat、綠界贊助轉換成實況主抽卡的石頭的小遊戲，作為 SquareLive 旗下的 VTuber 祈菈‧貝希毛絲 的生日節目的一環

企劃

企劃前期有討論要做完整的遊戲體驗，例如串 SuperChat、綠界的贊助作為武器攻擊力，然後關卡會出現 Squarelive 家 Staff 作為關卡 Boss 的遊戲，不過考量到規模太大，所以最後決定做成抽卡遊戲

一個遊戲只要有轉蛋就完整了。
20230512 - 柴闆

企劃雛型定型後，抓個一天去找柴闆進行了細部討論一些細節

• 遊戲流程圖
• 圖鑑 (要能夠顯示音檔/圖片)
• 抽卡機制 (抽卡特效、抽卡音效)

最後定案後分工為如下：

插曲

在確定製作的時候，春魚的阿爾姿就已經確定要畢業，而且離畢業的時間點也很近了，原本以為可能沒機會拿到她的生日祝福，沒想到最後她那邊還是願意交檔

謝謝妳，阿爾姿！

也在這邊爆個料，在下面的阿爾姿畢業歡送派對直播中祈菈出場的片段 6:17:24，阿爾姿提到柴闆在她直播的時候發她好友邀請，在祈菈的面前講，在看直播的我心臟差點停止

柴闆那時是要找她討論生日企劃的事

開始製作

最後定版的流程圖長這樣

謝謝花椰菜畫的流程圖，真的很好懂！

不過實際上最後的版本我還有自己加了一些東西

影片播放功能

其實原始規格沒有這項功能，不過阿爾姿交錯檔案，為了讓焦阿巴(阿爾姿的粉絲)也能看到她最後的身影，所以就加了這個功能

系統通知/營運送石功能

生日前一天才加上去的功能

原本企劃上只是要有手段能改機率或者送石頭

不過感覺還是要弄成系統公告會比較有感覺，所以就在倒數一天臨時補上了

不過想不到最後起司團(祈菈的粉絲)斗內比想像中還要多，所以最後就沒真的需要用到送石的功能了

SSR 差分

原本 SSR 的背景是跟 R 卡一樣的，不過這樣抽出來的效果實在跟 R 卡差不多，所以自己去調了一下素材

程式面

開發使用的是 Unity 2021.3.22.f1

為了加速製作用了以下套件

• NewtonSoft.Json (Json 處理套件， Unity 原生的太難用了！)
• DoTween (動畫處理套件)
• UniRx (ReactiveX for Unity)
• UniTask (Async/Await for Unity)
• Unity Web Request (Http Request for Unity，Unity 原生的不好用)
• Odin Inspector (Unity Inspector 的擴充套件，可以客製化 Unity 編輯器)

由於功能上有需要能夠拉到觀眾的即時贊助資料(SuperChat / 綠界)轉換成抽卡的鑽石，幸好 Squarelive 有對應的 WEB API ，只要帶一些認證資料就可以取得對應的資料，我可以專注在遊戲流程的開發上

然後，為了實現後台操作機率，我們還要有一個伺服器來負責計算抽卡結果並回傳資料，而且系統的即時通知也需要透過伺服器來傳遞過來

為了架設這些東西我需要架設伺服器，並且寫一個後端程式來達成上述的功能…嗎？

並不用！

為了實現客家精神，我決定 0 成本達成以上功能

整體架構如下

• 前端(Unity)自行計算抽卡結果
• 前端(Unity)定時去向 Squarelive API 取得贊助資料，並且根據異動的資料更新鑽石數量
• 前端(Unity)定時去拉取 雲端上的設定檔 根據異動來更新抽卡機率、系統通知、鑽石數量

至於雲端上的設定檔，實現的機制是透過 Github 上面的靜態網站託管服務 Github Pages 來實現

設定檔放在 Repo 底下透過 Github Action 來自動更新 Github Pages

這些都架好後，只要在直播當天更新設定檔，並且 push 到 Repo 上，祈菈那邊的機率也能夠即時的更新，不過整體大約會有一分鐘左右的延遲

製作組迷因集錦

柴闆在祈菈看的到頻道發了徵集素材的貼文

村人醜一

柴闆以為的 UI 動畫 vs 實際上的 UI 動畫

柴闆以為抽卡特效，轉場的 UI 都可以給 UI 自己處理，殊不知最後執行的是工程師

柴闆以為

實際上

結語

有很多想做的功能最後礙於時間沒有做上去

• 抽卡跳過功能
• 使用碎片升星已經抽過的角色
• 增強 SSR 演出，例如 SSR 抽出來前先跑一段角色專屬小文字，EX: 不要叫我傲魔魔！
• 活動專屬斗內頁面，希望做的像手遊課金的畫面

作為一名網頁前端工程師，遊戲開發的技能基本停留在大學畢業的程度就幾乎沒有再增長，還好這次的遊戲內容還在我能夠應付的程度，整個直播的過程我也玩得很開心，希望明年也會有更多有趣的企劃能夠參與！