Loli's Creed: Global Game Jam 2013 x MIT Game Jam #2 參與過程心得整理

這天終於到來了，第一次的GGJ體驗！雖然第一次的Game Jam活動參與經驗是幾個月前Samuli邀請的GOL12 GameDev，不過那是地區性質的活動，而且不一定要在指定地點進行，和GGJ的體驗完全不同。 GGJ感覺比較正式一些，有精美的開場和主題動畫，台灣場這邊還會跟其他地區作連線視訊，互相Update，而且還有好吃的點心…

活動有3天，時間共48小時，我就以日期為區分來分享心得吧！個人文筆不是很好，如果感覺閱讀困難還請見諒 (ˍ ˍ)
另外，個人在打文章時，通常都是按照著當時腦內的時間串流… 所以「離題」這個函數會很常被調用，因此… 再次敬請見諒 Orz

*離題離很大的內文，我會用色塊框起來，沒有興趣的人可以直接跳過。

我們的遊戲

Mouse Beat

隊員介紹

Samuli

Jyong-Chu Gao

Arvid

Chris

Day 1 - 1/25
大約 PM 7:00
播完動畫後，我們得知這屆主題是「心跳（Heatbeat）」，之後宣布活動開始，然後參加者開始進行分隊。因為我們在活動前就已經先告知主辦單位已組好隊，所以我們就直接跑出去找吃的，打算邊吃邊討論細節。也沒有人特別說想吃什麼，就隨便挑一個方向，然後一直走下去，直到在巷子裡看到一家不錯的餐廳，我們就開始進行吃飯和討論企劃了。

麵很好吃，豬排也很讚，不過湯太燙了啊！！:s

餐廳地點：台北市大安區復興南路一段253巷博多拉麵

一開始，我們開始根據主題去聯想任何相關的元素作為題材，比如說：愛心（形狀）、心臟（器官）、心律、受到驚嚇、感到興奮、看到恐怖的東西、等等…。然後Samuli想到Slender，我則是想到Dungeonland，Slender的遊戲模式就是玩家要蒐集紙張，但是在過程中不能直視Slender，否則會掛掉；Dungeonland是我之前在TotalBiscuit的影片中關注到的獨立遊戲，玩家分為兩方，A方扮演魔王，要放一堆怪物去阻止B方扮演的探險者行進。於是我們把這兩款遊戲組合起來，於是成了我們遊戲的雛型概念，大家沒有異議，於是我們繼續淡定吃飯… （汗）

事實上我一開始還挺擔心的，因為討論的過程進行得太快太順利了，我甚至一度還Follow不到，要使盡聽力去其他人的對話內容。而且我們也沒有特別分配工作內容，大家彷彿早就知道自己要做什麼似的，依自己擅長的範圍，自告奮勇地去選擇負責工作，Arvid是在吃飯的過程中說自己負責美術，概念設定是首要項目；Samuli則是說他以前有實作過Unity的多人連線程式，於是他首要項目就是將其改為我們目前所需要的。美術和程式都被選走了，頓時之間我不曉得自己要負責什麼，一直到吃完飯我才詢問Samuli，有什麼範圍是我可以做的，他建議了心跳控制程式後，我才有了首要項目。

其實當下這種感覺挺糟的，要詢問別人說自己能做什麼。但事後我認為，每個人都必須要知道自己的任務，不需要別人提醒，最佳狀況就是自己早已知道什麼工作非你執行莫屬，馬上就有目標，主動要求去做自己最擅長的項目。雖然隊長有義務將隊員放在最適合的位置，但是隊員也有責任知道自己的任務，否則當隊長把你放到你不喜歡的位置上或者讓你做冷板凳時該怎麼辦呢？
所以還是主動一點比較好，畢竟國外自由意志比較深，華人太習慣被命令／被指使，所以有時候某人沒有被吩咐工作，那人就真的什麼事情都不做。
所以我在這裡是不良示範，請不要學習。你自己應該要知道自己該做什麼。

大約 PM 8:00
回到會場，大家開始執行自己的項目：Arvid開始用紙筆畫一些概念圖、Samuli把之前做的多人連線程式抓來改和建置測試用遊戲場景、我則是開始寫心跳、音效控制和GUI特效程式。
中途，Arvid突然問遊戲的名稱是什麼？因為沒有人特別去想過，Samuli就說「不如先暫定Heart of Mouse吧」，我則是隨口說了「MouseBeat」，其他人覺得不錯，於是就莫名地一直用下去了… Orz

Start Coding!

大約 PM 10:00
Arvid完成了部分概念圖，但因為沒有筆電，所以先回家。之後的項目Arvid都是採家中作業，再用Skype傳給我們。

Day 2 - 1/26
大約 AM 4:00
先是正式完成了心跳特效控制程式，不久後Arvid傳了幾張精美的開頭動畫圖片過來，因此加作了開頭動畫播放程式。

HeartbeatController

心跳特效控制程式：
依據老鼠與嚇人物件的距離，心跳音效的音調會提高或降低；血絲貼圖會跟著音調放大縮小及淡入淡出，以及隨機地晃動。效果都是函數化的，因為Samuli習慣使用C#，我則是JavaScript，因此我必須這麼做，Samuli那邊才會比較方便使用。

CutsceneAnimation

開頭動畫播放程式：
逐圖播放的開頭動畫；跳過動畫的按鈕。非常簡單的程式，但是為了避免之後的圖片會有所增減，因此用陣列宣告貼圖，然後用for迴圈播放。

大約 AM 5:00
程式確定運行順暢後，我開始著手準備背景音樂。起先我嘗試著用Otomata和Circuli製作，可惜沒有適合我們遊戲的音色，再翻翻以前蒐集的音效庫，也沒有適合的素材。最後決定上網找現成的音樂，為了避免版權問題，我從一開始就鎖定Free DRM和Free License的音樂下去尋找。不難找，連Youtube都有很多提供無數位版權音樂的頻道，但是音樂的質量稱差不齊… 很難找到適合我們的音樂，因此搞了一段時間。

大部分的音樂來自我之前買的Build a Greenlight Bundle內容，和其他無數位版權音樂下載網站的內容（在文後我會補充網站連結）

最後總共找了19首音樂，只使用了其中2首。

不久後，遠在貝里斯的Chris也傳了一些音效過來 :D

大約 AM 5:30
早餐時間，我們依然隨興地往昨天吃晚餐的方向繼續走下去，可是走了很久都沒看到半個早餐店，於是就乾脆在離我們最近的全家便利商店買了早餐，Samuli買了麵包和飲料，我則是買了關東煮和戰備用的士力架六條。（事實證明，我說「戰備用」都是騙人的…… 那六條士力架沒能存活到中午後）

在會場茶水間附近吃早餐發生的小插曲：早上的打掃阿姨似乎不知道（或者忘了）資策會徹夜辦活動的消息，對於資策會大門未鎖感到緊張，於是對著附近正在吃早餐的我，大聲地質問我到底是怎麼進來的，我跟她說因為有辦活動，所以門一直是開著的，要求她自己去問負責人（雖然我不知道是誰），結果她又吼了我一遍。幸虧不久後有工作人員出來應付，不然我覺得我會發飆。請別對著徹夜沒睡的人大吼大叫好嗎？好歹也好聲好氣的詢問嘛，把我當成小偷在那吼（我還不曉得有哪國的小偷會淡定地坐在犯罪現場吃早餐）。
吃早餐錯了嗎？

大約 AM 6:30
我們有了第一個可以玩的超‧Alpha版本！心跳效果程式實際在遊戲中的感覺還不錯呢！真的有緊張的感覺！我和Samuli連線測試時還引起了一點騷動（Samuli太嗨了XD）

在測試完之後，Samuli說想要小睡一會，我則是打算更新一下心跳特效的程式和貼圖。

Heart Beat FX Texture

可是畫了6種版本後… 感覺還是第一個版本最好，所以這段期間內畫的心跳貼圖最後都沒有用上 :(

大約 AM 9:00
音樂搞定後，我打算再花一點時間更新程式，然後突然一個想法從我腦中蹦出來……

沒錯！就是神祕的邪惡手指啊哈哈哈哈哈！！
左邊的邪惡手指來自於龍族（DragonRaja），右邊是地城守護者2（Dungeon Keeper 2），都是我小時候最愛玩的遊戲！邪惡手指是讓我印象很深刻的點子之一，能把它放到參與製作的遊戲內，也是我其中一個小夢想～於是我就馬上開始著手製作我們的邪惡手指ヽ(´ー｀)ノ

簡單地製作邪惡手指（雖然一點都不邪惡），因為不想和Arvid設定的風格脫離太遠，所以模型和貼圖就走卡通風格。

最後的成品 :D

在遊戲中的樣子。

AM 11:10
開始企劃發表！

可是我們沒有任何簡報或者任何文件可以報告，事實上在發表時間前，我問了兩次Samili：「我們沒有準備任何Paper沒問題嗎？」，Samuli的回答相同：「沒關係的！我在國外參加其他Game Jam時，也沒有人在準備簡報，大家就只是埋頭地製作，時間到了，就秀給大家看，就這樣。所以不用擔心啦！」。
因此輪到我們時，我們也就真的上台直接秀遊戲給大家看。不過其他組似乎專心於衝刺的樣子，沒什麼人在仔細看。

大約 PM 1:00
午餐時間，這次我們換了方向，我帶Samuli去吃捷運站旁的鬍鬚張。結果Samuli得到了「外國人特典」屬性的超大滷肉飯…

自己修的惡搞圖，順帶一提這是暗黑破壞神2的倉庫。

還被隔壁桌的阿公說：「怎麼會這麼大碗（台語）」，真是尷尬…Orz

大約 PM 2:00
午餐回來後我開始感到疲倦，開始有些打瞌睡，Samuli注意到後建議我直接休息，於是我就直接趴睡了，這是我GGJ開始的第一次休息。

PM 4:30
台灣會場和日本會場連線時，Samili找到了失散已久的兄弟XDD（開玩笑的）

PM 8:00
Alpha的發表時間，這段我沒什麼記憶… 也沒有紀錄到（檔案的修改日期也沒有活動跡象），Sorry。我八成還在修程式吧，只記得Samuli淡定地上台再次展示了進度後，我們就繼續做事情了。

發表完不久後Arvid傳了新的圖片過來，可愛的遊戲應用程式圖示和設定畫面Banner圖片～

exe Icon by Arvid

Banner Texture by Arvid

大約PM 9:00
再次和其他會場連線。日本會場的作品好有趣！有人製作了電子裝置可以感測心跳（或者是呼吸，我有點忘了），並將其數據轉換成波狀圖呢！

台灣其他會場製作的，掃描QR Code就可以直接玩的遊戲，日本會場透過Webcam掃描Code也可以直接玩呢！超嗨的！

我有印象，大約這時間大家都很一致地跑出去找吃的，除了Staff和我們這組以外都沒有人在場內，這我倒是印象深刻。

不久後我們也出去找吃的了，依然隨便挑一個方向一直走下去後，我們看到了類似夜市的地方，我們就往那方向走了。我心理正想著說「天啊！是夜市耶！有好吃的了！」，結果就走完了…… 恩，大概不到100公尺就結束的小夜市。然後我們看到了必勝客，Samuli提議買披薩吃，因為披薩可以放很～久（結果這披薩真的吃到了隔天，Samuli那份幾乎活到了GGJ結束呢。），於是我們買了兩份大披薩，當Samuli正在說國外的披薩是多便宜的食物時，我一把鼻涕一把眼淚邊捶心肝地拿出了小朋友買單。
回到了會場又造成了一點騷動… 如果有其他參加者看到這篇，我得聲明：我原本不打算吃披薩，我原本想吃鹹水雞的！

Adam這句經典台詞完全說到我心坎裡，圖片來源：linksaveszelda《BEST GAMING MEMES!》

Day 3 - 1/27
AM 2:00
之後我開始進行一些UI物件的更新與製作：
首先我到1001 Free Fonts下載了Baveuse字型來當作遊戲內GUI Skin的主要字型。

Baveuse Font

看起來很像在比中指的滑鼠指標圖示，還好最後沒用上… 不然會被笑吧XD

Cursor Icon

起司圖示，會顯示在老鼠方的畫面上，提示目標的位置。

Mouse Target Icon

但後來覺得要有一點「指示」的感覺，就像Google Map的指標那樣，所以有了第二版：

Mouse Target Icon Version2

是啊，Google Map！

能量條貼圖，會顯示在魔王方的HUD上，提示玩家目前的能量值。

Energy Bar Texture

但是Samuli覺得太複雜了，於是有了第二版：

Energy Bar Texture Version2

恩… 有時候越簡單越好，對吧？

看到嚇人物件的圖示，會顯示在老鼠方的HUD中，顯示當前畫面中的嚇人物件數量。

Eye for Enemy Icon

Samuli覺得辨識度不高，於是第二版：

Eye for Enemy Icon Version2

有時候簡單真的是最佳的解決方案…

煙霧彈物件圖示，魔王方的煙霧彈技能圖案。

Smoke Icon

然後煙霧彈的粒子效果。

Smoke Particle Effect

這段期間製作了敵人圖示排列程式，主要功能就是告知老鼠方玩家當前畫面中有多少敵人（嚇人物件）。

TextureArranger

敵人圖示排列程式：

根據畫面中敵人的數量增加／減少圖示，程式麻煩的地方在於，要知道畫面上有幾隻很容易，可是UI要永遠維持在畫面正中央（無論有幾隻怪），比較困難。我的方法是：用GUI.Window包住我的圖示貼圖，之後每增加一個圖示，外圍的Window會往左退一格圖示的寬度，然後當前圖示往右一個圖示的空間再生出一個新圖示… 恩… 有興趣的請自行去看原始碼吧XD

大約AM 9:00

Arvid傳了新的老鼠模型和敵人模型過來，Samuli也更新了場景，新增了一些物件，比如閃光彈。

如果玩老鼠方的人有注意到的話，場景外有一個魔王樣子的物件喔！