如何打造 2D 動態角色？《百萬智多星》團隊分享 Spine 與 Live2D 製作經驗

　　由資策會與 IGDA 台灣分會主辦的「台北遊戲開發者論壇（Taipei Game Developers Forum，簡稱 TGDF）」於今（23）日展開，國產遊戲團隊「麥成文創」以旗下開發中手機遊戲《百萬智多星》為例，帶來了遊戲的 2D 動態角色技術經驗分享。

 

 

　　本次的演講以「迷人的 2D 動態角色─《百萬智多星》Spine X Live2D 製作經驗談」為題，由麥成文創創意總監李長沛主講。過程著重於結合 Spine 與 Live2D 上的製作心得，分享為了創造 2D 動態角色，在 Unity UI 整合時所遭遇到之問題與解決的故事。

 

• 李長沛（剪刀）自嘲是掛著創意總監之名的阿宅工程師

　　演講者 李長沛（Scissors Lee，剪刀）是一名遊戲開發者、軟體工程師兼遊戲部落客，目前於麥成文創擔任創意總監。過去曾於鈊象電子任職，並出版了數本程式著作。先後使用過 Flash 開發網頁遊戲與 Cocos2d-x 進行手機遊戲開發，目前使用 Unity 開發《百萬智多星》。

 

 

　　麥成文創（Maxon Creative）由創辦人彭德新（Maxwell Peng）在 2014 年 5 月創立，至今成立 1 年又 3 個月，擁有 3 名程式設計師，2 名美術，是相當年輕的小團隊。過去曾開發益智問答小遊戲《織女星寵》以及導遊應用程式《加利利旅遊》，現正全力專注於新作《百萬智多星》的研發。

 

 

　　《百萬智多星》是一款融合了益智問答、角色培育等要素的手機 RPG，玩家可以藉由回答問題來對敵方發動攻擊，跨越遊戲中的關卡取得勝利。

 

 

　　遊戲中主要分為組成五人小隊戰鬥的「冒險」部分，以及透過與角色的互動，提升與角色間親密度的「客棧」部分。

 

 

　　由上方介紹影片可以看出，本作使用了大量的「動畫」來展現角色動作，而這些動畫皆是以 Unity 引擎為基礎，採用「Spine」與「Live2D」動畫技術來製作。目前遊戲中內建 24 名角色，每一名角色都設計了各自的 Spine 版動畫與 Live2D 版動畫，甚至還搭載紙娃娃換裝系統，可以看出本作針對「角色營造」的部份下了很大的功夫。

 

 

 

　　Spine 是一款針對遊戲的 2D 骨架動畫編輯工具，就如同其名（Spine 為脊椎骨之意），使用者只要繪製好角色身體各部位的零件，綁定到角色骨架上，之後對角色骨架加以編輯調整就能實現各種動作。

 

 

　　相對於傳統的逐格動畫，2D 骨架動畫擁有較小的體積、較高的流暢度，可透過程式直接控制角色呈現模樣。由於圖片是綁定在骨骼上來演出動畫，可視乎情況更換角色裝備，甚至改變角色的樣貌。

 

 

 

　　李長沛指出，《百萬智多星》內的 Q 版動畫小圖都是使用 Spine 來打造。除了在戰鬥時使用，製作團隊還希望在不影響效能的前提下，讓繪師繪製的角色充斥在遊戲各處。

 

 

　　之所以採用 Spine，就是由於 Spine 生成的檔案比較不吃效能，因此可以在主畫面的廣場上一口氣顯示大量的村民，甚至在「卡片一覽」的畫面直接採用 Spine 動畫。

 

• 直接把 Spine 鑲進卡片裡

　　另外一個採用 Spine 的優點，就是在紙娃娃系統上的切換也比較簡單，只要更換頭部、身體的模組（Skin）就能變換服裝，也可以輕鬆更換頭飾、武器等配件（Attachment）。

 

• Spine 動畫的製作流程，就是先由美術畫好圖檔元件，交給動畫師安排骨架動畫，最後由程式來整合

• Spine 操作介面，右方欄位會列出骨架的數量，下方則是開關，可選擇要顯示或是隱藏

• Spine 動畫基本上是以時間軸的方式來編排

　　李長沛坦承，團隊在一開始也曾碰到「LAG」的問題，後來發現是因為系統匯出的「.json」檔案太過龐大，所以他強烈奉勸開發者使用「Binary」格式，不但容量更小也更快。

 

 

　　他也提醒動畫師在安排角色動作時間軸的時候，不要忘記在「攻擊」等動作的瞬間建立關鍵影格，方便之後與程式判定進行整合。

 

 

　　由於 Spine 動畫是用時間軸的方式執行，團隊也在《百萬智多星》當中加入了一個有趣的小遊戲，就是先由示範角色擺出一個動作，玩家要試圖讓角色擺出相同的動作，而判定「精準度」的方式就是比較時間軸的位置。

 

 

• 互動是用 Live 2D 來呈現，可以與「活靈活現」的角色進行各種互動遊戲

　　Live2D 是由日本 Cybernoids 公司（現為 Live2D 公司）開發的遊戲專用繪圖渲染技術，透過在 2D 圖片上的網格建模，讓圖片產生一系列的變形，呈現出近似 3D 的效果，優點是能夠保持原畫的畫風，又讓角色活靈活現。

 

 

　　Live2D 的應用實例非常多，特別是在日本被廣泛採用，在強調與角色交流的遊戲如《戰鬥女子高校》（iOS／Android）、《純愛手札 Girl's Side Premium 3rd Story》（PSP）、《聖火降魔錄 if》（N3DS）等作品裡都可見其蹤影。

 

• 講者特別提到，PS Vita 的《犯罪少女 誘惑》也使用了 Live2D 技術

　　在國產自製遊戲方面，應用到 Live2D 技術的除了《百萬智多星》之外，還有《甜點王子》、《Chase》等作品。

 

《甜點王子》Live2D 系統展示影片

 

 

　　在《百萬智多星》的主畫面中，除了建築跟村民之外，左下還有以 Live2D 呈現的代表角色，玩家可以與之互動，角色會根據親密度的高低來回應不同的問候語。

 

 

　　李長沛透露，遊戲中若是與角色的親密度不夠高會「卡等」，所以客棧系統內準備了小遊戲可以用來提升親密度。

 

 

　　而在劇情部份，也為了讓故事描述起來更有張力而採用了 Live2D 立繪。在現場的實機展示中，對話時最多可以同時出現 4 名角色，依然不會有太多 LAG 的感覺。

 

 

　　不同於 Spine 的作法，Live2D 的建模與動畫必須分開進行。Spine 綁定骨架的步驟很快，時間主要花費在調整角色動作；Live2D 的建模則比較耗時，需要針對角色的臉部配置拉網格、設定部位變形幅度，但匯入原始檔後可套用範本。

 

 

　　在匯出的檔案部份，Spine 只有 3 個輸出檔，Live2D 則明顯多了許多檔案。Live2D 的元件也沒辦法合成一張圖，而要分成頭、臉、身體等不同素材，也沒有 Skin 跟 Attachment 這樣的設定，為展現不同角色的個性，往往要量身訂做一組動畫。

 

• Spine 圖片元件檔案

• Live2D 圖片元件檔案

　　李長沛表示，與 Spine 相比之下，Live2D 資料結構相對簡單，因為用法很單純，遇到的問題也不多。特別要注意的地方就是，角色的圖層順序在運作中有沒有亂掉，以及在數個動畫接連執行時，前一個動畫的效果要記得消除，否則變成冒著青筋大笑的狀況就很好笑了。

• 遊戲中更換模組的效果

 

　　由於 Live2D 時常會採用「角色的眼神往點擊的方向看去」的效果，《百萬智多星》以此為基礎加了一點小變化，讓角色的眼神跟著四處亂飛的蒼蠅移動，而玩家要做的事就是擊中蒼蠅。

 

• 如果打到角色的臉，角色還會怒罵：「說好不打臉的！」

　　在演講的尾聲，李長沛也針對 Spine、Live2D 兩套軟體進行了簡單的比較。Spine 主要是透過「活動骨架」的方式來製作出動畫，而 Live2D 則是透過「變形」跟「位移」的手法來處理，在軟體價格、檔案大小、製作人力、表現型態上都各有優缺點，有心想為自己的作品打造 2D 動態角色的開發者可根據自己的需要來參考選擇。