電子工程系應 用 電 子 組電 腦 遊 戲 設 計 組

Unity遊戲程式設計(06) 製作2D骨骼動畫

吳錫修

Nov 28, 2016

shap

e th

e fu

ture

分鏡動畫

在美⼯軟體安排動作分鏡時每個肢體該出現的位置，再將⼀張張分解動作圖片快速撥放，透過視覺暫留效應來達到動畫效果

分鏡動畫 v.s.骨骼動畫 1/2

2 Wu, ShyiShiou Dept. of E.E., NKUT

shap

e th

e fu

ture

骨骼動畫 (Skeletal animation)

將動畫中需要移動的部位，拆解成零組件圖片

每⼀個零組件就是可控制活動的部份，零組件愈多可以呈現的動作就愈細膩

素材資源

https://www.assetstore.unity3d.com/en/#!/content/11228

分鏡動畫 v.s.骨骼動畫 2/2

3 Wu, ShyiShiou Dept. of E.E., NKUT

shap

e th

e fu

ture

使用Sprite Editor⼯具將骨骼動畫圖分割成零組件圖片

Sprite mode設定為Multiple

開啟Sprite Editor分割Sprite

分割動畫物件 1/3

4 Wu, ShyiShiou Dept. of E.E., NKUT

shap

e th

e fu

ture

Sprite Editor自動以「sprite名稱_編號」做為分割出的Sprite名稱，建議重新為每⼀個分割出的Sprite命名

beanman_body

beanman _lefthand

beanman _righthand

beanman _leftfoot

beanman _rightfoot

beanman _gun

beanman _moustache

beanman _lefteye

beanman _righteye

beanman _hat

分割動畫物件 2/3

5 Wu, ShyiShiou Dept. of E.E., NKUT

shap

e th

e fu

ture

分割動畫物件 3/3

6 Wu, ShyiShiou Dept. of E.E., NKUT

shap

e th

e fu

ture

選單命令Edit>Project Settings>Tags and Layers，增加3個Sorting Layers

char_back

char_middle

char_front

建立動畫組件圖層

7 Wu, ShyiShiou Dept. of E.E., NKUT

shap

e th

e fu

ture

選單命令Game Object>CreateEmpty

命名為Hero

將零組件Sprite加入Hero子元件

調整組件位置並設定Sorting Layers

char_back

beanman_gun、beanman_lefthand、beanman_leftfoot

char_middle

beanman_body

char_front

beanman_hat、beanman_lefteye、beanman_righteye、beanman _moustache、 beanman_righthand、 beanman_rightfoot

組合動畫角色 1/2

8 Wu, ShyiShiou Dept. of E.E., NKUT

shap

e th

e fu

ture

組合動畫角色 2/2

9 Wu, ShyiShiou Dept. of E.E., NKUT

shap

e th

e fu

ture

選取Hero物件

選單命令Window>Animation開啟動畫編輯器

點擊Create建立hero動畫檔

製作骨骼動畫 1/6

10 Wu, ShyiShiou Dept. of E.E., NKUT

shap

e th

e fu

ture

將製作動畫時需要控制的零組件屬性加入動畫屬性清單

點擊Add Property，展開beanman_hat，展開Transform，點擊Rotation後方+符號

製作骨骼動畫 2/6

11 Wu, ShyiShiou Dept. of E.E., NKUT

shap

e th

e fu

ture

預設會建立1秒動畫的開頭及結束Key frame

製作骨骼動畫 3/6

12 Wu, ShyiShiou Dept. of E.E., NKUT

shap

e th

e fu

ture

比照同樣方式，將其它需要控制的零組件屬性加入動畫屬性清單

製作骨骼動畫 4/6

13 Wu, ShyiShiou Dept. of E.E., NKUT

shap

e th

e fu

ture

將時間軸移到想要秒數上，依角色動作需求調整零組件位置/角度，動畫編輯器會自動建立對應的Key frame

製作骨骼動畫 5/6

14 Wu, ShyiShiou Dept. of E.E., NKUT

shap

e th

e fu

ture

預覽及調整Keyframe分鏡各個零組件屬性值，使動畫的動作順暢

起始Keyframe與結束Keyframe的各項屬性值必須⼀致，連續撥放時動畫才不會有跳動現象

製作骨骼動畫 6/6

15 Wu, ShyiShiou Dept. of E.E., NKUT

起始Keyframe 結束Keyframe

shap

e th

e fu

ture

實作練習 1/5

16 Wu, ShyiShiou Dept. of E.E., NKUT資料來源 http://galloman.github.io/ss2d/manual/images/spineboyBodyparts.png

shap

e th

e fu

ture

實作練習 2/5

17 Wu, ShyiShiou Dept. of E.E., NKUT資料來源 http://www.tookindstudio.com/wp-content/uploads/2015/08/Sprite_sheet_Ardour.jpg

shap

e th

e fu

ture

實作練習 3/5

18 Wu, ShyiShiou Dept. of E.E., NKUT

shap

e th

e fu

ture

實作練習 4/5

19 Wu, ShyiShiou Dept. of E.E., NKUT

資料來源 http://www.stagexl.org/show/spine/raptor/atlas2/raptor.png

shap

e th

e fu

ture

實作練習 5/5

20 Wu, ShyiShiou Dept. of E.E., NKUT