用Live2D讓怪獸動起來

對應版本:Cubism 2.0以上
本單元使用Cubism Editor 2.0進行解說,因此跟外觀與操作可能會跟最新版的軟體有所不同。)






教學作者:Noshipu (URL: http://noshipu.hateblo.jp/)

居住於日本關西的程式設計師
手機遊戲【唱歌吧!鐘角蛙】製作人





說到Live2D,大多數人都會讓為這是一種讓美少女動起來的工具,其實這個軟體能夠讓任何東西動起來

不論是怪物、特效還是背景,都能夠讓2D的圖片有3D的效果
這次我嘗試的製作了一隻龍

接下來就是教學內容



    Step1. 事前準備

【1】製作草稿並思考動作的想像圖

首先畫角色的草稿



TIPS:思考動作的想像圖
如果在這個階段,就先想好要動的部位,接下來再進行圖層拆解,以及加上動作時,就會比較輕鬆





【2】拆解圖層

如果是畫單張的圖片,可以在畫完單張圖片後,再將進行各個部位的圖層拆解
如果要使用匯入PSD功能來匯入檔案時,PSD檔案的一個圖層 = Live2D的一個物件,
因此就記住這一點,來區分要動的部位

龍的圖層分為這樣(沒有資料夾也沒關係。)

TIPS:趁現在補足缺少的部份
先想好可動的範圍,再將關節部位或是眼睛的內側等讓角色動起來時,必要的地方補足上去
到後來再修正,會需要比較多的功夫

TIPS:透過讓影子或光源動起來,來製作更細緻的表現
這次將龍腹部的影子與脖子的影子,分為不同的物件
透過分別控制這些物件,就能夠製作出更逼真的動作
關於影子的圖層
這次的龍是使用色彩增值圖層來替影子上色的,
但因為色彩增值圖層在Live2D中,是還無法穩定運作的功能(2014/2/16),
因此這次透過指定圖片透明度的手法來對應


準備完成!




    Step2. 用Cubism Modeler加上動作

【1】讀取PSD

啟動Live2D Cubism Modeler,選擇[檔案]->[匯入PSD檔案]


匯入完成後,設定影子的不透明度



【2】分割部位

為了能夠更容易管理物件,接下來就在Cubism Modeler中分割部位
如果做的是人物以外的角色,物件的設定大多都會跟原始的設定不同,因此要自行設定物件
從[模型]->[設定物件]即可變更

龍的部位就分割成這個樣子


TIPS:更改物件的名稱
因為PSD的圖層名稱就變成了物件的名稱,如果想修正就在這裡進行修正



【3】設定變形工具

設定成能夠將準備好的部位,簡單的動起來

動作的種類分成三種
 旋轉變形工具  曲面變形工具  直接指定多邊形
 使用在要間接做出動作,或是不變形而只移動的部位上
 使用在所有要變形的部位上
Live2D獨特的表現,大多都是靠這個工具來表現
 使用在想要加上細部動作時,或是使用在較細小的部位上
使用在眼睛等部分
 
 
 

TIPS:父子階層
在剛開始學習使用Live2D時,父子階層這個項目,容易讓大家受到挫折,但只要把這個當做是一起動的部位即可
「要動脖子的時候,頭部與眼睛等部位也要一起動才行,所以這些就算是脖子的孩子。」以這種感覺來設定父子階層吧

TIPS:鎖定功能
有時候會不小心移動到部位,所以就使用鎖定功能,再將要修正的部位解除鎖定,就會比較容易作業



【4】設定參數

將參數所決定的動作,設定在變形工具與不透明度等項目中

(例)
 臉・往左  臉・往正面
           
 
 

TIPS:以分割多邊形進行微調
如果以讀取PSD檔案進行匯入時,多邊形會被自動設定,但有時候會發生在做出動作時,線條變粗糙的狀況
如果想做出更細緻的動作時,就可以透過編輯材質圖來增加多邊形數量的方式來對應

TIPS:直接調整多邊形
雖然只要調整變形工具,就能夠達到大多數的目的,但如果想要微調特定地方時
只要將繪畫物件的多邊形進行參數設定,就能設定較細緻的動作

TIPS:建議不要設定太多參數點
基本上建議不要設定超過3點以上的點。雖然設定3點以上的點,就能夠表現出想要的動作
但會造成中間的動作不順暢,或是將來進行調整或管理時,變得非常麻煩的問題



    Step3. Cubism Animator設定動作

雖然在製作模型的階段,就能夠從SDK控制參數
但如果要製作較順暢的動作時,還是建議以Cubism Animator來設定動作

【1】讀取cmoc檔案

將於Step2製作的模型儲存後,就會被匯出成comc檔案
將這個檔案拖曳至Live2D Cubism Animator,就能夠在Animator中進行設定


【2】設定動作

欲製作動畫時,要使用在時間軸中,加上於Modeler設定的參數關鍵來製作

TIPS:使用曲線
動畫曲線是非常方便的功能,因此可以使用


TIPS:重點教學
因為這時候想要在噴火的動作中加上火焰,所以這次就準備了png圖檔,並在Animator中控制
如果想要讓效果變得更好,建議可以用Cubism Modeler製作火焰



【3】匯出動畫

將動畫匯出後,就能夠在Live2D SDK上使用,這樣就可以在各種平台上表現出這個動畫



以上就是教學內容

希望能夠讓各位了解到Live2D也能夠讓怪物或背景等圖片做出細緻的表現

謝謝大家

Aricle copyright © 2015 noshipu


<< 上一頁
下一頁 >>