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

(GNN 記者 犬拓 報導) 2015-07-24 00:43:24

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

 

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

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

 

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

 

百萬智多星》是什麼樣的遊戲?

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

 

  遊戲中主要分為組成五人小隊戰鬥的「冒險」部分,以及透過與角色的互動,提升與角色間親密度的「客棧」部分。
 
 
  由上方介紹影片可以看出,本作使用了大量的「動畫」來展現角色動作,而這些動畫皆是以 Unity 引擎為基礎,採用「Spine」與「Live2D」動畫技術來製作。目前遊戲中內建 24 名角色,每一名角色都設計了各自的 Spine 版動畫與 Live2D 版動畫,甚至還搭載紙娃娃換裝系統,可以看出本作針對「角色營造」的部份下了很大的功夫。
 
  • image
  • image
  •  

簡單來說,遊戲中的動態立繪(左)是使用 Live2D 製作,戰鬥動畫小圖(右)則是使用 Spine 製作

 

什麼是 Spine?

 
  Spine 是一款針對遊戲的 2D 骨架動畫編輯工具,就如同其名(Spine 為脊椎骨之意),使用者只要繪製好角色身體各部位的零件,綁定到角色骨架上,之後對角色骨架加以編輯調整就能實現各種動作。
 
 
  相對於傳統的逐格動畫,2D 骨架動畫擁有較小的體積、較高的流暢度,可透過程式直接控制角色呈現模樣。由於圖片是綁定在骨骼上來演出動畫,可視乎情況更換角色裝備,甚至改變角色的樣貌。
 
  • image

Angry Birds Fight!》、《女神聯盟》手機版都使用了 Spine 技術

 

Spine 於《百萬智多星》當中的應用實例

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

 

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

    直接把 Spine 鑲進卡片裡

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

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

  • image

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

  • image

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

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

 

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

趣味應用-「複製人」小遊戲

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

 

什麼是 Live2D?

  • image

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

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

 

  Live2D 的應用實例非常多,特別是在日本被廣泛採用,在強調與角色交流的遊戲如《戰鬥女子高校》(iOS/Android)、《純愛手札 Girl's Side Premium 3rd Story》(PSP)、《聖火降魔錄 if》(N3DS)等作品裡都可見其蹤影。
 
  在國產自製遊戲方面,應用到 Live2D 技術的除了《百萬智多星》之外,還有《甜點王子》、《Chase》等作品。
 

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

Chase》赤羽綾紗 Live2D 角色演示

 

Live2D 於《百萬智多星》當中的應用實例

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

 

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

 

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

 

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

 

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

    Spine 圖片元件檔案

  • image

    Live2D 圖片元件檔案

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

    遊戲中更換模組的效果

趣味應用-「打蒼蠅」小遊戲

 
  由於 Live2D 時常會採用「角色的眼神往點擊的方向看去」的效果,《百萬智多星》以此為基礎加了一點小變化,讓角色的眼神跟著四處亂飛的蒼蠅移動,而玩家要做的事就是擊中蒼蠅。
 
  • image
  • image
  • 如果打到角色的臉,角色還會怒罵:「說好不打臉的!」

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

 

 

新聞評語

載入中...

延伸報導

問答益智遊戲《百萬智多星》釋出 Live2D 角色主題曲宣傳影片
手機 | 百萬智多星
3
台灣團隊研發 Live 2D 互動益智遊戲《百萬智多星》釋出系統介紹
手機 | 百萬智多星
34
益智問題題材手機新作《百萬智多星》首度釋出遊戲宣傳影片
手機 | 百萬智多星
5
《怪物的孩子》配音演員大泉洋首度與細田守合作演出智多星角色
動漫 | 怪物的孩子
0
主打流暢 Live 2D 動畫 金亨泰領軍製作手機 RPG《Destiny Child》釋出實機影片
手機 | 命運之子 DESTINY CHILD
172
主打金亨泰插畫與 Live2D 特效《Destiny Child》日版展開事前登錄
手機 | 命運之子 DESTINY CHILD
125
金亨泰領軍製作 Live2D 手機 RPG《Destiny Child》正式於韓國上架
手機 | 命運之子 DESTINY CHILD
65
投稿【試玩】《Destiny Child 命運之子》主打 Live2D 魅魔角色的手機 RPG
手機 | 命運之子 DESTINY CHILD
46
日版《命運之子 DESTINY CHILD》宣布將與電視動畫《動物朋友 2》展開合作
手機 | 命運之子 DESTINY CHILD
62
《命運之子 Destiny Child》2 月下旬將在日本推出 PC 版 風格將較日本手機版更性感
多平台 | 命運之子 DESTINY CHILD
35
《命運之子 Destiny Child》動畫製作消息曝光 同步釋出製作團隊名單
多平台 | 命運之子 DESTINY CHILD
73
投稿《Destiny Child》舉辦第一屆創作設計大賽 總獎金 1 億韓元的亂鬥
手機 | 命運之子 DESTINY CHILD
8
《命運之子 Destiny Child》日韓及國際版宣布結束營運 將推出線上音樂會及紀念更新保存回憶
手機 | 命運之子 DESTINY CHILD
270
【TpGS 18】《命運之子 Destiny Child》確認在台推出 將邀「金亨泰」參與電玩展
活動 | 命運之子 DESTINY CHILD
112
集結《命運之子 DESTINY CHILD》經驗之作《妮姬 勝利女神》釋出實機遊玩影片
手機 | 勝利女神:妮姬 / 尼姬 勝利女神 / 妮姬 勝利女神(프로젝트 니케 NIKKE The Goddess of Victory)
231
投稿夏日炸彈!《Destiny Child》夏日改版活動介紹
手機 | 命運之子 DESTINY CHILD
64
《命運之子 Destiny Child》日版開放遊玩 與眾多魅魔展開親密互動
手機 | 命運之子 DESTINY CHILD
71
金亨泰操刀的手機新作《Destiny Child》曝光最新遊玩影片
手機 | 命運之子 DESTINY CHILD
38
《命運之子 Destiny Child》繁中版上架 化身魔王候補生與眾多美麗使魔們協力作戰
手機 | 命運之子 DESTINY CHILD
147
《命運之子 DESTINY CHILD》繁中版宣布啟動事前登錄 確認將於 12 月推出
手機 | 命運之子 DESTINY CHILD
104

沒都敵不過我!!

看更多

face基於日前微軟官方表示 Internet Explorer 不再支援新的網路標準,可能無法使用新的應用程式來呈現網站內容,在瀏覽器支援度及網站安全性的雙重考量下,為了讓巴友們有更好的使用體驗,巴哈姆特即將於 2019年9月2日 停止支援 Internet Explorer 瀏覽器的頁面呈現和功能。
屆時建議您使用下述瀏覽器來瀏覽巴哈姆特:
。Google Chrome(推薦)
。Mozilla Firefox
。Microsoft Edge(Windows10以上的作業系統版本才可使用)

face我們了解您不想看到廣告的心情⋯ 若您願意支持巴哈姆特永續經營,請將 gamer.com.tw 加入廣告阻擋工具的白名單中,謝謝 !【教學】