頭髮、衣服的「搖曳」動態的表現方法

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






教學作者:KAZUYA (URL: http://design-illust.blog.jp)

影像設計師
在「Live2D Creative Award 2014」為參加決賽的參賽者





這裡將說明當風吹過來時,頭髮與衣服的搖動

這是設想使用在重複的狀況之中,所以在風一直吹過來的鏡頭
或是應用設定的方法來製作在海中的鏡頭時,應該能夠派上用場

 
-目次
Step1:準備要設定搖動的素材
Step2:設定在變形路徑上的搖動【頭髮、圍巾】
Step3:以曲面變形工具設定搖動【衣服、裙子】
Step4:以Animator調整重複的搖動


在這次的教學中製作完成的檔案範本,只要按下下方的按鈕即可下載。下載檔案時
即表示下載的使用者已經同意下方的【使用本資料之條件】

www.cynos.jp/tutorials/kazuya/Live2D_KamiYure01.cmox


www.cynos.jp/tutorials/kazuya/Anime_KamiYure01.canx


使用本資料之條件
商業用途:NG。不可
再次散佈:NG。不可
更改:僅限個人使用與測試

Article & data, Copyright © 2015 KAZUYA





    Step1. 準備要設定搖動的素材

【1】畫圖並分割部位

將決定風吹來之方向的圖畫出來
雖然也跟風的強度有關係,但這裡就先決定風向,並會依照風向來畫圖
這次的範本是設定為風從左邊往右邊吹



TIPS
頭髮的曲線

頭髮的曲線不要畫得太複雜
在接下來的步驟中就比較好控制
如果曲線太複雜,在頭髮搖動時
就不容易替頭髮設定自然的動作

分割部位與補足

把圖畫好之後,接下來就分割部位
並想像頭髮搖動時,會看到的部份後,將這些部分補足上去
這個步驟有時候會設定動作後,事後再進行補足
想像前方的藍色頭髮會動而將後面的頭髮與衣服畫上去
   


裙子與角的重疊順序

裙子等部位以腳為界線,
畫分為前面的部份與後面的部份
這是因為裙子搖動時
前面的部位與後面的部位所看到的範圍會不同的關係因此必須分開製作
   

畫好的圖分割部位之後,就會變成這樣
會動的部份就是「頭髮」「圍巾」與「眨眼睛」




    Step2. 設定在變形路徑上的搖動【頭髮、圍巾】

接下來就使用在製作完成的素材上,讓頭髮與圍巾等部位的搖動能夠表現出來的「變形路徑」
來製作頭髮的重複搖動

【1】設定路徑

首先設定作為讓頭髮設定動作之中心的路徑
選擇想要設定動作的物件,點擊變形路徑的圖示後
再依照頭髮的流動,設定變形路徑。路徑要配合頭髮的曲線起點來設定點


變形路徑的基本操作方式,可參考下列的教學網頁



【2】給頭髮設定動作

接下來依照設定完成的變形路徑,開始對頭髮設定動作
在選擇變形路徑與物件的狀態下,點擊想動的部份的參數處進行設定
雖然參數的點數量並沒有決定,但這裡就設定5個點
只要點擊量表,即可設定點




參數設定完成後,接下來就依照參數的點,來設定頭髮的動作
要設定重複的動作時,第一張圖與最後一張圖必須是相同的,因此點的兩端不動
這次就使用中間的3個點,來讓頭髮搖動。(右圖紅框框起的點就是不動的點。
    


【3】移動路徑的方式

移動路徑的方式為
將游標指到參數中,「頭髮搖動 後方」等想要移動的點後,點擊滑鼠右鍵
接下來在按住滑鼠右鍵的狀態下,移動路徑上的點,即可設定動作
依序選擇紅框中的3個點,來設定頭髮的動作


用上述的方式,設定完成的3個點的頭髮動作,以GIF動畫確認後,就可以看到這個樣子
http://www.cynos.jp/tutorials/kazuya/02-5_GIF01.gif

因為肉眼看不到風,所以加上藍色圓圈,來讓大家能夠看得比較清楚
只要想像當實際存在的物體通過時,頭髮就會跟著動起來,應該就會比較容易設定動作




以相同的原理,來設定瀏海與圍巾的動作
因為原理相同,所以這裡就不多做說明
但只要想像根基的部位長了頭髮
建議從髮根往頭髮尖端的方向,陸續設定路徑
   

TIPS:頭髮與圍巾的根部不動
基本上,頭髮與圍巾的根部都是被固定住的,所以不設定動作

TIPS:表現風的訣竅

雖然肉眼看不見風,但建議可以想像有物體從風吹過來的方向通過,來設定頭髮的動作




    Step3. 以曲面變形工具設定搖動【衣服、裙子】

這裡將說明使用能夠讓衣服等設定搖動的
曲面變形工具,來設定重複搖動的步驟

 【1】生成曲面變形工具
 
選擇想設定動作的物件,點擊「生成變形工具」按鈕



①任意命名。
選擇曲面,雖然沒有決定分割的數量,但這裡就設定為5×5




變形工具生成後,按住Ctrl鍵移動紅框,將變形工具的外型配合裙子的角度與大小
配合角度與大小,應該就能夠設定出活用衣服形狀的動作




 【2】設定曲面變形工具之參數

接下來設定已經生成的曲面變形工具之參數
要加上樣板中所沒有裙子等新參數時,
點擊參數表上的「設定參數」按鈕
並點擊「新數值」來設定新的參數



將新的參數設定完成後
就與設定路徑時相同,在不移動參數數值條兩端點的狀態下,注意風從左往右吹這一點,
來移動曲面變形工具。在設定動作時,建議記得相對於路徑是以線的方式來設定動作,曲面變形工具 是以面的方式來設定動作



將設定完成的裙子之動作,以GIF動畫確認後,就可以看到這個樣子
http://www.cynos.jp/tutorials/kazuya/03-7_GIF01.gif


TIPS:裙子搖動的設定方式
設定裙子的搖動時,除了跟設定頭髮搖動時一樣,注意風的流動之外,如果能夠再加上裙子被風吹起的感覺會更好
 
曲面變形工具的使用方法,也可參考下列頁面

設定搖動的說明到此為止,除此之外,可以依照需要,來設定眨眼等等的動作



    Step4. 以Animator調整重複的搖動

最後使用Animator,將搖動盡量調整得較為自然
在製作重複動作時,有時候動作的節奏會變得怪怪的,在這個步驟做調整,就能夠減輕這種狀況

 【1】使用Animator
以Animator讀取以Modeler製作的檔案
在時間軸的「Live2D參數」中,在製作完成的
頭髮與圍巾等物件上,輸入-1~1的數值來設定動作
 
這裡的例子,是使用0~29影格來製作1秒的動作
但因為在後來的步驟中,前後會刪除合計8個影格,因此就使用0~29影格+8個影格
共0~37影格(1秒7個影格)來設定頭髮的重複動作
 
開始搖動在第0個影格處設定為-1,搖動結束在1秒7個影格處設定為1


本範本的圍巾搖動數值為相反的
這是因為所有的動作都設定成相同的,看起來反而很不自然,因此刻意設定為相反的動作

Animator的使用方法,也可參考下列頁面
http://sites.cybernoids.jp/cubism2/beginner-tutorial/06
 

下圖中,頭髮、圍巾與裙子的搖動都已經設定完成



雖然動畫基本上到這個步驟就已經完成了,但只設定這些參數就重複播放,動作會變得不流暢,因此就刪除前後的幾個影格,讓動作變得自然
這個步驟刪除了前後各4個影格(合計8個影格)
但動作的流暢度會根據刪除的影格數量而改變,因此建議各位自行調整


 【2】調整搖動

縮小工作區來確認重複播放的區域,藉此來調整刪除的影格數量,或是調整重複播放處的影格數量

 
在工作區內確認了重複播放的區域後,便將時間軸的顯示寬度,設定為實際所使用的寬度
在這裡刪除前後各4個影格

 
刪除顯示範圍的方法為拖曳顯示範圍的兩端移動,即可調整長度
另外,移動箭頭也能夠改變位置


調整完成後,就會變得像是如下圖。(動畫的開始處為第0個影格,結束處為第29個影格)
這樣子重複1秒的動畫就完成了


將製作完成的重複區域複製3次
將其中1個區域加上眨眼的設定,來製作出頭髮與圍巾搖動3次的過程中
會眨眼1次的重複動畫

 
這是因為如果設定成頭髮搖動1次就眨眼1次,眨眼的次數就會太多
使得動畫會變得不自然
 
動作設定完成後,就與背景進行合成,再加上濾鏡之後就大功告成
範本最後是使用Adobe的AfterEffects進行合成加工
但使用的軟體不限
 
這樣子這個教學所設定的動作就全部完成了


Aricle copyright © 2015 KAZUYA


<< 上一頁
下一頁 >>