由於臨時起意想用Unity5.6f2跑個WebGL小專案試試，適逢4/1祭典將至
於是利用四天時間開發，作為HIKOCOSLAY愚人節特別企劃的網頁小遊戲「HIKOLE 」就誕生了！
遊戲的設計概念很簡單：
1.製作一個抓娃娃機，可以從中抓取各式轉蛋
2.依照轉蛋類型可以獲得不同等級稀有度的卡片
3.最後再做一個卡片收集冊來表示收集完成度
1.製作抓娃娃機
抓娃娃機的主要運作透過一個核心程式GameCore來控管進行順序。首先運用樣板製作控制幽浮爪的簡易的按鈕，按鈕必須等候呼叫才會被啟用，啟用後通知GameCore並等待點擊觸發功能，並且在停止點擊時再度通知GameCore。由於只是單純的點擊行為，這邊就只須用到系統事件中的MOUSE DOWN/MOUSE UP/MOUSE EXIT即可。將樣板複製成「向右」和「向上」兩組按鈕後，與GameCore與幽浮爪的程式連接，就完成了基礎的操作功能。
幽浮爪的部分比較複雜，由於希望能重現真實抓娃娃機那種運用碰撞和推擠的方式完成的抓握行為，最後決定採用物理的方式製作，幽浮爪的實體部分由三根爪子和幽浮台(用ProBuilder繪製出外型)四個剛體構成，並利用Hinge Joint進行連接，設定好轉軸座標與可動範圍，再透過程式呼叫方式調整轉動的力道，就完成了基本的抓握與放開行為。
不過這裡很快地發現了一個問題， 由於剛體特定的關係，在靠近牆邊展開的爪子有可能會卡在牆上，導致幽浮爪會無法順利降下，考慮到操作的穩定性，直接將牆壁、幽浮爪、轉蛋分別設定到三個不同的Layer上，再透過物理設定視窗，讓爪子不與牆壁碰撞，而轉蛋能正確接受來自牆壁與爪子的碰撞。附帶一提在開發途中我習慣建立一個FreezedArea層次，設定為不可編輯並且將大多數部會動到的固定場景物件和地板等先放進去，這樣就可以避免在操作中選擇到不想碰到的物件，非常方便！
幽浮爪的主要功能流程如下圖，由於前面已經製作了GameCore和按鈕的功能，這邊就能很簡單的依照收到的事件通知來進行各步驟，另外可以看到在控制抓握的地方運用的是Send To Children的方式，直接廣播讓三隻爪子同時運作。(當初也是有考慮到兩爪和四爪的可能性，所以寫成通用的模式)
轉蛋一開始是用球形，但看起來太單調了然後又考慮到要有不同顏色造型的辨識力又不想增加貼圖，最後採用ProBuilder的Icosahedron雛形，再配合Vertex Colors上色的方式來製作，成品的效果相當不錯！
最後為了讓抓娃娃機在一開始能給予一定數量的轉蛋，並且能定時補充，於是寫了一個簡單的計數產生器，只要給予數字就會依照掉落率設定產生相應數量的轉蛋。這個功能會這樣寫也是考慮到除錯熱鍵的功能，我可以透過修改球數的方式隨時取得需要的轉蛋數量，事實上我現在也留了一個密技在這功能中，這邊就不多贅述了:P
2.從不同類型的轉蛋中取得卡片
現在可以將轉蛋給抓到洞口了，接著就要處理從轉蛋變成卡片的過程啦！這邊我將處理轉蛋和抽卡片分成兩個部件來處理，卡片的部分打算全程在UGUI上完成。由於我只依賴轉蛋物件名稱來辨識轉蛋，在[GextBox]偵測到轉蛋時，會去撈取物件名稱中需要的欄位，並將這資訊送到抽卡單元去。會這麼做也是擔心抽卡單元會有處理不及的問題，但至少要在這個步驟把轉蛋消滅以免造成系統的長期負擔。
抽卡區塊工作很多，首先要依照轉蛋種類來決定抽卡箱，決定要顯示的卡片，接著確認取得的卡片稀有度，給予對應的外框，之後還要處理卡片跳出與加入收集冊的演出，最後要檢查和更新收集率數字，所以整張流程圖就有點大~
這邊有點值得注意的是Rsource.load的部分，以發佈目標為WebGL遊戲的專案來說，因為要透過網頁下載執行，整個遊戲的大小不能太誇張，不過Unity在處理一般UGUI常用的Sprite圖像時，會將PNG或JPG圖點陣化再重新用它特有的格式壓縮，結果上來講一個被指定為Sprite的材質圖容量就會暴增！以這次做為卡面的照片檔來說，JPG狀態下每張只有350KB前後，但在被Unity打包進Resource時就變成2.6MB，到之前為止專案整體容量還只有20MB前後，一導入所有的照片資源就暴增到110MB，作為一個及時下載遊玩的WebGL遊戲這也重過頭了！這邊我選擇將照片作為一般材質來保有原本的容量，在讀入之後及時轉換成Sprite的方式來處理。
抽卡演出直接就用Animator，先錄製跳出卡片和收藏卡片的Animation Clip後，透過Trigger的方式來控制播放時機。當轉蛋掉落洞口，會從畫面下方彈出抽到的卡片，再次點擊滑鼠就會將卡片收納入收集冊中，於是簡單的抽卡演出功能就完成啦！
最初我在玩家點擊畫面後才會進行收集率的檢查和更新，結果導致若玩家在卡片顯示階段又有轉蛋進洞時，該轉蛋將不會進行抽卡，由於這個特性能抑制快速堆積刷抽卡的手法，一開始我覺得可以留下，不過後來考慮到開放山積手法對玩家體驗來說也不錯，就更換了收集率的檢查順序，並在卡片顯示階段遇到新轉蛋掉落時以自動推送的方式處理掉。
由於這是款收集型的遊戲，如果一旦重整網頁進度就歸零的話對玩家來說也太殘酷了，所以還是要讓遊戲的進度有辦法保存下來，這邊我使用的是EasySave2套件，它和playmaker有很好的結合性，並且支援WebGL上的進度儲存，我將所有需要紀錄的參數設定為Globals，再要求EasySave2在每次收集率更新後儲存所有的Globals，並在遊戲重新啟動時如果發現存檔就套用，完成了自動記錄的功能。
...不過我得說這手法仍然有很大的瑕疵，如果我在itch.io上傳了新版本，玩家重整後將會是另一個新的專案，記錄檔當然就不見了，然後itch.io說它們有提供一個命令列工具「Bulter」可以針對同個channel進行更新，而且僅更新有變動的部分，看起來似乎可以讓玩家在同個專案空間獲得更新版，但事實上我更新的結果記錄檔還是會消失，在此只能對遭遇我的更新導致紀錄遺失的玩家感到抱歉了XDD
3.卡片收集冊
終於到了最終階段了！收集冊是用來顯示目前取得的所有卡片，並且可以點開顯示大張圖片的地方，由於時間不多，我打算寫一個簡易的換頁式介面，首先建立了15個縮圖欄位，在確認目前的頁數後，運用Next Child的技法逐一掃瞄所有的欄位，檢查是否已取得卡片並顯示相應的縮圖。
本來我希望能在點擊縮圖時，能就縮圖的檔名直接取得對應的大圖名稱，然而由於我這邊顯示也運用到Texture轉Sprite的緣故，即時轉換出的圖像是沒有檔名資訊的，因此我換了個方式，乾脆在縮圖物件上增加一個卡片編號的參數，並且由前述階段建立縮圖的同時就將這個參數也一併更新到物件中，這樣在點擊縮圖時就不用做額外的處理，只要檢查圖號是否不為0(預設問號圖)，再將自己的圖號回傳就可以了。
就 這樣完成了簡易的收集冊圖鑑！看起來還滿有一回事的啊！:D
小記
這個小遊戲最後總算是在台灣時間4/1早上11:30發佈完成，驚險趕上了這次的愚人節祭典，然後徹夜趕工的我後來也整個廢人化了一整天，雖然後來經玩家回報才發現還有些小Bug，整個修正完成是當日26:30的事情(還好美國的愚人節還沒結束！)，但今年終於能餐與到這個祭典算是完成了我多年來的悲願！最後要感謝願意提供素材來讓我惡搞的HIKOCOSPLAY以及熱情的玩家們，說真的當初想說大家玩一玩笑一笑就會關掉了，沒想到有很多人玩得超努力，甚至花上數小時來完成收集！真是讓我不勝感激！希望這款特別企劃遊戲有娛樂到大家啊！明年若還有機會我會再努力想個主題來挑戰一下的！