Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

2,784 views

Published on

介紹如何以動畫零組件組合方式製作骨骼動畫

Published in: Software
  • Be the first to comment

  • Be the first to like this

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

  1. 1. 電子工程系應 用 電 子 組 電 腦 遊 戲 設 計 組 Unity遊戲程式設計(06) 製作2D骨骼動畫 吳錫修 Nov 28, 2016
  2. 2. shapethefuture  分鏡動畫  在美⼯軟體安排動作分鏡時每個肢體該出現的位置,再將⼀張張分解動 作圖片快速撥放,透過視覺暫留效應來達到動畫效果 分鏡動畫 v.s.骨骼動畫 1/2 2 Wu, ShyiShiou Dept. of E.E., NKUT
  3. 3. shapethefuture  骨骼動畫 (Skeletal animation)  將動畫中需要移動的部位,拆解成零組件圖片  每⼀個零組件就是可控制活動的部份,零組件愈多可以呈現的動作就愈 細膩  素材資源  https://www.assetstore.unity3d.com/en/#!/content/11228 分鏡動畫 v.s.骨骼動畫 2/2 3 Wu, ShyiShiou Dept. of E.E., NKUT
  4. 4. shapethefuture  使用Sprite Editor⼯具將骨骼動畫圖分割成零組件圖片  Sprite mode設定為Multiple  開啟Sprite Editor分割Sprite 分割動畫物件 1/3 4 Wu, ShyiShiou Dept. of E.E., NKUT
  5. 5. shapethefuture  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
  6. 6. shapethefuture 分割動畫物件 3/3 6 Wu, ShyiShiou Dept. of E.E., NKUT
  7. 7. shapethefuture  選單命令Edit>Project Settings>Tags and Layers,增加3個 Sorting Layers  char_back  char_middle  char_front 建立動畫組件圖層 7 Wu, ShyiShiou Dept. of E.E., NKUT
  8. 8. shapethefuture  選單命令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
  9. 9. shapethefuture 組合動畫角色 2/2 9 Wu, ShyiShiou Dept. of E.E., NKUT
  10. 10. shapethefuture  選取Hero物件  選單命令Window>Animation開啟動畫編輯器  點擊Create建立hero動畫檔 製作骨骼動畫 1/6 10 Wu, ShyiShiou Dept. of E.E., NKUT
  11. 11. shapethefuture  將製作動畫時需要控制的零組件屬性加入動畫屬性清單  點擊Add Property,展開beanman_hat,展開Transform,點擊 Rotation後方+符號 製作骨骼動畫 2/6 11 Wu, ShyiShiou Dept. of E.E., NKUT
  12. 12. shapethefuture  預設會建立1秒動畫的開頭及結束Key frame 製作骨骼動畫 3/6 12 Wu, ShyiShiou Dept. of E.E., NKUT
  13. 13. shapethefuture  比照同樣方式,將其它需要控制的零組件屬性加入動畫屬性清單 製作骨骼動畫 4/6 13 Wu, ShyiShiou Dept. of E.E., NKUT
  14. 14. shapethefuture  將時間軸移到想要秒數上,依角色動作需求調整零組件位置/角度,動畫 編輯器會自動建立對應的Key frame 製作骨骼動畫 5/6 14 Wu, ShyiShiou Dept. of E.E., NKUT
  15. 15. shapethefuture  預覽及調整Keyframe分鏡各個零組件屬性值,使動畫的動作順暢  起始Keyframe與結束Keyframe的各項屬性值必須⼀致,連續撥放 時動畫才不會有跳動現象 製作骨骼動畫 6/6 15 Wu, ShyiShiou Dept. of E.E., NKUT 起始Keyframe 結束Keyframe
  16. 16. shapethefuture 實作練習 1/5 16 Wu, ShyiShiou Dept. of E.E., NKUT 資料來源 http://galloman.github.io/ss2d/manual/images/spineboyBodyparts.png
  17. 17. shapethefuture 實作練習 2/5 17 Wu, ShyiShiou Dept. of E.E., NKUT 資料來源 http://www.tookindstudio.com/wp-content/uploads/2015/08/Sprite_sheet_Ardour.jpg
  18. 18. shapethefuture 實作練習 3/5 18 Wu, ShyiShiou Dept. of E.E., NKUT
  19. 19. shapethefuture 實作練習 4/5 19 Wu, ShyiShiou Dept. of E.E., NKUT 資料來源 http://www.stagexl.org/show/spine/raptor/atlas2/raptor.png
  20. 20. shapethefuture 實作練習 5/5 20 Wu, ShyiShiou Dept. of E.E., NKUT

×