Download to read offline
Uploaded by吳錫修 (ShyiShiou Wu)
Unity遊戲程式設計 - 製作2D骨架動畫
本文件详细介绍了使用Anima2D制作2D骨架动画的过程，包括分镜动画与骨骼动画的区别、项目创建、素材分割、角色组合与动画制作的步骤。文中还提供了骨架设置、逆向运动学（IK）的使用以及其他资源链接，确保读者能有效掌握2D骨架动画的制作技巧。
Unity遊戲程式設計 - 製作2D骨架動畫
- 1. 製作2D骨架動畫 Revised on November1, 2019 分鏡動畫 vs.骨骼動畫 Anima2D套件 建立SpriteMesh 綁定骨骼 加入IK 製作骨骼動畫
- 2. 分鏡動畫 在美⼯軟體安排動作分鏡時每個肢體該出現的位置，再將⼀張張分解動作 圖片快速撥放，透過視覺暫留效應來達到動畫效果 除非修改分鏡圖片，動作無法再調整 分鏡動畫 vs.骨骼動畫 1/2 2
- 3. 骨骼動畫 (Skeletalanimation) 將動畫中需要移動的部位，拆解成零組件圖片 每個零組件就是可控制活動的部份，零組件愈多可以呈現的動作就愈細膩 素材資源 https://www.assetstore.unity3d.com/en/#!/content/11228 分鏡動畫 vs.骨骼動畫 2/2 3
- 4. 新増2D專案，專案名稱Skeletal animation 在Assets下建立資料夾 Animations Sprites Scripts 將beanman.png素材滙入到專案AssetsSprites資料夾 建立Skeletal animation專案 4 beanman.png
- 5. 使用Sprite Editor⼯具將beanman分割成零組件圖片 Sprite mode設定為Multiple 開啟Sprite Editor分割Sprite 分割動畫物件 1/3 5
- 6. Sprite Editor自動以「sprite名稱_編號」做為分割出的Sprite名稱， 重新為每⼀個分割出的Sprite命名 body leftHand rightHand leftFoot rightFoot Bazooka tache leftEye rightEye hat 分割動畫物件 2/3 6 body Bazooka tache rightFoot leftFoot rightHand leftHand rightEye leftEye hat
- 7. 分割前 分割後 分割動畫物件3/3 7
- 8. 選單命令Game Object>CreateEmpty 命名為Mr.Bean 重置Transform 將beanman零組件加入Mr.Bean子元件 全選Mr.Bean之子物件 重置Transform Scale(X, Y, Z) = (0.4, 0.4, 0.4) 調整組件位置 body Position (X, Y, Z) = (0, 0, 0) hat Position (X, Y, Z) = (-0.21, 0.55, 0) 註：場景物件前後層次：先看Sorting Layer，同⼀Sorting Layer之物件，Order in Layer數值較 大者在上層；若Order in Layer值也相同，則由Position Z值(與Main Camera遠近)決定 組合角色 1/2 8
- 9. Bazooka Position(X, Y, Z) = (0.07, 0.16, 1) leftFoot Position (X, Y, Z) = (0.30, -0.65, 1) leftHand Position (X, Y, Z) = (0.40, -0.01, 0.5) leftEye Position (X, Y, Z) = (0.13, 0.33, -1) rightEye Position (X, Y, Z) = (-0.09, 0.30, -1) rightFoot Position (X, Y, Z) = (-0.17, -0.72, -1) rightHand Position (X, Y, Z) = (-0.38, -0.12, -1) tache Position (X, Y, Z) = (0.02, 0.06, -1) 組合角色 2/2 9 Z=0 Z=1 Z=-1
- 10. 選取Mr.Bean物件 選單命令Window>Animation> Animation開啟動畫編輯器 點擊Create建立Mr.Bean動畫檔 製作角色動畫 1/5 10
- 11. 將製作動畫時需要控制的零組件屬性加入動畫屬性清單 Idle動畫 起始Keyframe與結束Keyframe的各項屬性值必須⼀致，連續撥放時動畫 才不會有跳動現象 製作角色動畫 2/5 11 起始Keyframe 結束Keyframe
- 12.
- 13.
- 14.
- 15.
- 16.
- 17. 教學影片 https://www.youtube.com/watch?v=xFfX48caSds 說明文件 https://anima2d.com/wp-content/uploads/2016/07/UserGuide.pdf Anima2D 1/2 17
- 18.
- 19. 使用Sprite Editor⼯具將TRex分割成零組件圖片 Sprite mode設定為Multiple 開啟Sprite Editor分割Sprite 分割TRex Sprite 1/2 19
- 20. 重新命名 分割TRex Sprite2/2 20 trex_leg trex_head trex_jaw_open trex_jaw_open_back trex_body
- 21. 選單命令Game Object>CreateEmpty 命名為TRex 重置Transform 在TRex下建立3個空物件，分別命名為SpriteMeshes、Bones、IKs 重置SpriteMeshes、Bones、IK之Transform屬性 組合TRex角色 1/3 21
- 22. 將TRex零組件加入TRexSpriteMeshes子元件，調整身體組件位置及 前後次序 註：場景物件前後層次：由Sorting Layer決定，同一SortingLayer之物件，Order in Layer數值 較大者在上層；若Order in Layer值也相同，則由Position Z值(與Main Camera遠近)決定 組合TRex角色 2/3 22
- 23. 組合TRex角色 3/3 23 Sprite PositionX Position Y Order in Layer body 0 0 1 jaw_open 3.87 0.57 3 jaw_open_back 3.84 0.28 2 leg L 1.05 -1.45 0 leg R 0.26 -1.53 2
- 24. Sprite物件快顯功能表> 2DObject> SpriteMesh，將Sprite圖片 轉成有網格的SpriteMesh 將Sprite轉換為SpriteMesh 1/2 24
- 25.
- 26. 編輯SpriteMesh，使SpriteMesh貼近圖形輪廓 選取SpriteMesh物件，點擊「EditSprite Mesh」按鈕開啟 SpriteMesh Editor 在網格中雙擊滑鼠左鍵可以新增⼀個節點，並會重新分佈附近的連線 Shift+Click可在邊線上增加調整點 Delete可刪除調整點 可用滑鼠拖曳調整點 編輯SpriteMesh 1/4 26
- 27. 自動分割網格 點擊Slice按鈕，設定參後點擊Apply Outline detail：數值愈大，愈能精準貼近輪廓，產生的控制點數量也愈多 Tesselation：數值愈大，內部鑲嵌愈多控制點 註：控制點多寡會影響綁定骨胳後，骨胳移動時牽引SpriteMesh程度，通常會在需要彎曲或伸展 的部位放置較多控制點 編輯SpriteMesh 2/4 27
- 28.
- 29.
- 30. 選單命令GameObject> 2DObject> Bone 依據所需的動畫移動狀況，在SpriteMesh上放置骨骼 建立骨架 1/2 30 thigh calf foot toe
- 31. 骨架基本結構 建立骨架 2/2 31 bone1:child= bone2 bone2:child = bone3 bone1:child = bone2 bone1 bone2 bone3 bone1:child = bone2 bone2:child = none 在bone1建立bone2， 在bone2建立bone3 在bone1建立bone2， 之後又在bone1建立bone3 在bone1建立bone2， 在bone2建立bone3， 之後解除bone2與bone3父子關係 bone1 bone2 bone3 bone2 bone3 bone1
- 32. 選單命令GameObject>2D Object>Bone 尾巴和腳的部分皆由最上層的hips開始重新發展，它會產生⼀個透明的關 聯性骨棒，表示這部分是連接的(只是發展方向不同) 建立TRex骨架 32
- 33. 骨架的布置結束後，為了預防不小心移動到位置，我們可以最上層的 父物件添加PoseManager元件 選取TRex物件 加入PoseManager元件 按下Create new pose按鈕，命名為 trex_default存檔 儲存Pose 33
- 34. 拖曳骨骼到Sprite MeshInstance(Sprite)之Set Bones欄 預設會將全部子骨骼⼀起加入，視動畫動作需求移除不相⼲的骨骼 綁定骨架 1/2 34
- 35. 選單命令Window> Anima2D>SpriteMesh Editor開啟SpriteMesh Editor 按下Bind按鈕，讓網點和骨骼產生關聯 勾選Overaly，點擊Apply 綁定骨架 2/2 35 註：SpriteMesh輪廓必須包覆所要綁定的骨架
- 36. 選取body物件 將hips骨架拖曳到SpriteMeshInstance (Sprite)之Set Bones欄 移除不需要的骨骼 thigh R calf R foot R toe R thigh L calf L foot L toe L 設定TRex骨架 1/5 36
- 37. 選取jaw_open物件 將head骨架拖曳到SpriteMeshInstance (Sprite)之Set Bones欄 設定TRex骨架 2/5 37
- 38. 選取jaw_open_back物件 將head骨架拖曳到SpriteMeshInstance (Sprite)之Set Bones欄 設定TRex骨架 3/5 38
- 39. 選取leg R物件 將thigh R骨架拖曳到SpriteMesh Instance (Sprite)之Set Bones欄 設定TRex骨架 4/5 39
- 40. 選取leg L物件 將thigh L骨架拖曳到SpriteMesh Instance (Sprite)之Set Bones欄 設定TRex骨架 5/5 40
- 41. 選取body物件 選單命令Window>Anima2D> SpriteMesh Editor 按下Bind按鈕，讓網點和骨骼產生關聯 勾選Overaly，點擊Apply 綁定TRex骨架 1/4 41
- 42. 選取jaw_open物件 選單命令Window>Anima2D> SpriteMesh Editor 按下Bind按鈕，讓網點和骨骼產生關聯 勾選Overaly，點擊Apply 綁定TRex骨架 2/4 42
- 43. 選取leg R物件 選單命令Window> Anima2D> SpriteMesh Editor 按下Bind按鈕，讓網點和骨骼產生關聯 勾選Overaly，點擊Apply 綁定TRex骨架 3/4 43
- 44. 選取jaw_open_back物件 選單命令Window>Anima2D> SpriteMesh Editor 按下Bind按鈕，讓網點和骨骼產生關聯 勾選Overaly，點擊Apply 綁定TRex骨架 4/4 44
- 45. Inverse Kinematics(IK)逆向關節運動 IK就是動畫的控制是逆向階層關係，也就是說是由子物件來帶動父物件的 動作，同樣的手臂運動，我們只需要移動手到達定位，小臂及上臂會依骨 骼的關聯性產生連動動作，在階層鏈結複雜及⻑的鏈結時使用較為直覺 IK的控制元件都要用在兩節以上的骨頭才會有作用，否則就沒有可以 反折的關節了 IK CCD：由Num Bones屬性設定連動的骨骼節數 IK Limb：固定控制兩節骨骼 使用IK 1/2 45
- 46. 選取toe骨骼 選單命令GameObject>2D Object> IK CCD 操作New Ik CCD，檢視骨骼牽引SpriteMesh之效果 使用IK 1/2 46
- 47. 選取Tail4骨骼物件 選單命令GameObject>2D Object> IK CCD 選取Head骨骼物件 選單命令GameObject> 2D Object> IK CCD 選取toe R骨骼物件 選單命令GameObject> 2D Object> IK CCD 選取toe L骨骼物件 選單命令GameObject> 2D Object> IK CCD 選取jaw 2骨骼物件 選單命令GameObject> 2D Object> IK CCD 設定TRex IK 1/2 47
- 48.
- 49. 選取TRex 選單命令Window>Animation> Animation開啟動畫編輯器 點擊Create按鈕建立TRex Idle動畫 進入錄製模式 移動IK CCD，建立1秒動畫 建立TRex動畫 49