【Qoo TGDF2015】迷人的 2D 動態角色:《百萬智多星》Spine X Live2D 製作經驗談
Mr. Qoo

S_00

以下為TGDF官方新聞稿

《百萬智多星》是由台灣團隊麥成文創開發中的手機遊戲,是一款融合了益智問答、角色培育等要素的手機 RPG,玩家透過回答問題來對敵方發動攻擊,通過遊戲中的關卡取得勝利。遊戲中交互運用了 Spine 與 LIVE 2D 兩種動畫軟體,打造生動的角色效果。而麥成文創創意總監李長沛也親臨現場,分享運用 Unity 遊戲開發引擎結合兩種軟體的角色製作心得。

遊戲中的角色塑造

透過介紹影片可以發現《百萬智多星》中的每個角色都有豐富的動作,目前遊戲共有 24 名角色,每一位都有專屬的 Spine 與 LIVE 2D 動畫。其中 Spine主要負責戰鬥表現、卡牌特效、村民配角、Q版人像等部分,而 LIVE 2D 技術則多運用在角色互動對話、互動小遊戲等需要最廣泛使用於說故事的畫面上面。


▲透過LIVE 2D 製作的動態人像
▲透過SPINE 製作的Q版人像

Spiner簡介

Spine 是一款專門繪製 2D 骨骼動畫的編輯工具,簡單來說,使用者只要將骨架做好,就能將頭、手、腳、裝備等部件套用上去,且骨骼動作也可以重複套用在不同的角色身上。相較於傳統逐格動畫,Spine 除了能夠呈現更優質的動態效果,檔案也較小。製作團隊採用 Spine 的原因就在於能夠一口氣放上多名角色,讓畫面變地更生動流暢。目前同樣使用 Spine 技術,較著名的遊戲則有刀塔傳奇、Angry Bird等等。

▲在場景中同時呈現多名角色

▲在卡牌頁面運用Spine技術

LIVE 2D 簡介

LIVE 2D 是由日本 Cybernoids 公司開發的遊戲專用圖片渲染技術,透過在圖片上建立網格模組,產生形變與位移,產生彷 3D 動作的效果。優點是可以保留繪師的畫風,又能達到互動效果,因此在日本被廣泛採用。尤其盛行於戀愛模擬、文字冒險等領域,甚至部分 R16、R18 遊戲都有採用。在《百萬智多星》中,也將 LIVE 2D 大量用於劇情,以及需要與角色互動的場合。

▲與角色互動,提高親密度的小遊戲

兩種軟體的比較

製作流程

●Spine:
1. 由美術人員繪製好角色部件
2 .再交給動畫師製作骨架(小公司可能還是美術人員來做)
3. 最後將檔案輸入遊戲引擎
4. 時間成本:繪圖>動畫>建模
5. 輸出檔案約 400KB

●Live 2D:
1. 由美術人員繪製好角色部件
2. 分成「MODEL 建模」、「ANIMATOR 編動作」
3. 將檔案輸入遊戲引擎
4. 時間成本:繪圖>建模>動畫
5. 輸出檔案約 3MB

輸出檔案比較

●Spine
– PNG 完整貼圖
– JASON 骨架與動作資料
– Atlas 骨架的初始資料
值得一提的是,無論縮圖再怎麼小,只要動作一多,JASON 檔就會很大,甚至可能造成 LAG。因此李長沛建議將檔案存成「Binary」格式,檔案小,跑起來也快。

●Live 2D
– PNG 多張貼圖
– EXP 表情檔,可以多角色共用
– MTN 動作擋


▲LIVE 2D 有的貼圖有許多張,如果有需要更換服裝就得分開輸出。

軟體間的比較

Spine在紙娃娃系統上的切換相對較簡單,只要更換頭部、身體的模組(Skin)就能變換服裝,也可以快速更換武器等配件(Attachment)。而 LIVE 2D 必須輸出多張貼圖,也沒有類似功能,需要為角色量身打造專屬的動畫。不過 Live2D 資料結構較簡單,不會出甚麼大問題,唯一要注意的就是圖層順序有沒有亂掉(比如角色做反應的時候手跑到後面),以及動畫要對好時間。(比如生氣的表情,不能在角色換成高興的動作時留著)。

除了軟體特性外,Live 2D 的價格比 Spine 高上許多,如何選擇就看開發團隊的需求,雖然 Spine 也可以做到 Live 2D的訪 3D 效果,不過李長沛還是認為各個軟體還是有其最擅長的部分。

在QooApp開啟