Unity遊戲程式設計(03) 製作及應用2D動畫

使用unity animation及animator工具製作2D動畫，並套用程式腳本

Transcript

1. 電子工程系應 用 電 子 組 電 腦 遊 戲 設 計 組 Unity遊戲程式設計(03) 製作及應用2D動畫 吳錫修 Nov 11, 2016
2. shape the future  素材Pixel Per Unit設定為100，表示Unity裡的1單位代表100 pixel  Camera Size建議值為視野半高  假設遊戲畫面為1024*768，Camera視野半高為7.68/2 = 3.84，則 Camera Size建議值為3.84 Camera size設定 2 Wu, ShyiShiou Dept. of E.E., NKUT
3. shape the future  Sprite可以是單張圖片，或由動作分鏡及相關圖片所組成 Sprite物件 1/2 Wu, ShyiShiou Dept. of E.E., NKUT 3 sprite 1 sprite 2
4. shape the future  Sprite Mode  Single單張矩形裁切  Multiple裁切成多張素材  Polygon單張多邊形裁切 Sprite物件 2/2 Wu, ShyiShiou Dept. of E.E., NKUT 4
5. shape the future  在Assets下新增Sprite目錄  Assets快顯功能表Create/Folder  將素材圖片拖曳到Assets/Sprite目錄  屬性編輯器 (inspector)  將貼圖類型 (Texture Type)設定為Sprite (2D and UI)  將圖片類型 (Sprite Mode)設定為Multiple  點擊「Sprite Editor」按鈕 剪裁Sprite 1/3 Wu, ShyiShiou Dept. of E.E., NKUT 5
6. shape the future  由Slice下拉選單設定剪裁方式 (Type)，之後點擊「Slice」按鈕  Automatic 自動剪裁  Grid By Cell Size 固定大小剪裁  Grid By Cell Count 指定行列個數方式剪裁 剪裁Sprite 2/3 Wu, ShyiShiou Dept. of E.E., NKUT 6
7. shape the future  自動裁切後可依需求調整剪裁後的sprite素材屬性  剪裁後每幅sprite會自動設定個別的名稱 剪裁Sprite 3/3 Wu, ShyiShiou Dept. of E.E., NKUT 7
8. shape the future  Filter Mode指的是素材顯示時，圖片在3D空間中被拉扯或扭曲時 pixel間的顏色如何顯示  2D遊戲中建議採用Point模式  選取原圖，將Generate Mip Maps取消  將Filter Mode選定為Point 素材Filter Mode 8 Wu, ShyiShiou Dept. of E.E., NKUT
9. shape the future  透過改變sprite位置、大小、角度等，達到動畫效果  砲塔發射炮彈，變化砲塔位置來產生後座力效果  攻擊怪物，變化怪物大小來產生被攻擊受傷效果  由動作分鏡之⼀連串sprite，連續播放達到動畫效果 動畫原理 9 Wu, ShyiShiou Dept. of E.E., NKUT
10. shape the future  將turret.png滙入到專案Assets\Sprite資料夾  開啟Sprite Editor，將Pivot設定到砲座下方中央位置 火炮動畫製作I 1/15 10 Wu, ShyiShiou Dept. of E.E., NKUT Pivot位置
11. shape the future  將turret素材拖曳到場景中，並命名為Turret  把Turret的Position座標初始值設定為(x,y,z)=(6, -2, 0)  把Turret的Rotation向左旋轉180度(x,y,z)=(0, 180, 0)  把Turret的Scale縮小0.8倍(x,y,z)=(0.8, 0.8, 1) 火炮動畫製作I 2/15 11 Wu, ShyiShiou Dept. of E.E., NKUT
12. shape the future  火砲發射砲彈時，火砲會因瞬間後座力而往後彈，再慢慢往前收  選取Turret元件  點選「Window/Animation」，開啟動畫編輯工具  可以將Animation Tab停靠到習慣的作業窗格上 火炮動畫製作I 3/15 12 Wu, ShyiShiou Dept. of E.E., NKUT
13. shape the future  點擊Animation工具之「Create」按鈕建立動畫檔  動畫檔命名為TurretShoot，並儲存到專案中的Assets\Animation 資料夾底下 火炮動畫製作I 4/15 13 Wu, ShyiShiou Dept. of E.E., NKUT
14. shape the future  Animation Tab初始狀態會是這樣  滑鼠滾輪可調整時間軸解析度 火炮動畫製作I 5/15 14 Wu, ShyiShiou Dept. of E.E., NKUT 「錄製鈕」壓下去表示正在錄製Key Frame 紅線代表我們在第幾秒
15. shape the future  點選Turret，將X座標變更為6.35；會自動在第零秒第零Frame 處 (0:00) 建立keyframe紀錄 火炮動畫製作I 6/15 15 Wu, ShyiShiou Dept. of E.E., NKUT
16. shape the future  點擊箭頭展開可以檢視細節設定  目前記錄在0:00 key frame，Position X為6.35，Position Y為2， Position Z為0 火炮動畫製作I 7/15 16 Wu, ShyiShiou Dept. of E.E., NKUT
17. shape the future  滑鼠壓著紅線區域處，可以移動時間軸  將紅線移至0.1秒處 火炮動畫製作I 8/15 17 Wu, ShyiShiou Dept. of E.E., NKUT
18. shape the future  將座標X設回6；會自動在0.1秒第零Frame 處(0:10)新增keyframe 紀錄 火炮動畫製作I 9/15 18 Wu, ShyiShiou Dept. of E.E., NKUT
19. shape the future  點擊播放按鈕可以預覽動態效果  點擊左下角的Curve按鈕可以調整key frame與key frame間的轉換 細節  關閉Curve再開啟，會自動調整顯示比例 火炮動畫製作I 10/15 19 Wu, ShyiShiou Dept. of E.E., NKUT 播放
20. shape the future  由控制點快顯功能表點選「Free Smooth」，會出現⼀條灰色的斜 率控制線 火炮動畫製作I 11/15 20 Wu, ShyiShiou Dept. of E.E., NKUT
21. shape the future  拉動灰色點點可以調整斜率 火炮動畫製作I 12/15 21 Wu, ShyiShiou Dept. of E.E., NKUT
22. shape the future  外⼀端點套用同樣的方法調整斜率  若要增加畫面張力，砲管向後時可以同時放大，再慢慢復原 火炮動畫製作I 13/15 22 Wu, ShyiShiou Dept. of E.E., NKUT
23. shape the future  點擊Animation視窗左上角Clip下拉式選單，點選「Create New Clip…」建立另⼀動畫檔，檔名TurretIdle 火炮動畫製作I 14/15 23 Wu, ShyiShiou Dept. of E.E., NKUT
24. shape the future  TurretIdle動畫中只設定⼀個Frame，讓砲塔回到初始狀態  任意變更Position X值，再重置為6  完成動畫錄製後，點⼀下錄製按鈕，使它彈起停⽌錄製 火炮動畫製作I 15/15 24 Wu, ShyiShiou Dept. of E.E., NKUT
25. shape the future  完成動作錄製後，要透過Animator編輯器設定動作狀態切換  開啟Animator編輯器  由Project窗格雙擊建立Turret動畫時自動產生的Controller；  或選取Turret物件，點選「Window/Animator」 火炮狀態切換控制 1/9 25 Wu, ShyiShiou Dept. of E.E., NKUT
26. shape the future  第⼀個建立的動畫clip會被設定為default state  由TurretIdle快顯功能表，選擇Set as Layer Default State 火炮狀態切換控制 2/9 26 Wu, ShyiShiou Dept. of E.E., NKUT
27. shape the future  由TurretIdle快顯功能表，選擇Make Transition  把Transition的箭頭拉到TurretShoot 火炮狀態切換控制 3/9 27 Wu, ShyiShiou Dept. of E.E., NKUT
28. shape the future  由TurretShoot快顯功能表，選擇Make Transition  把Transition的箭頭拉到TurretIdle 火炮狀態切換控制 4/9 28 Wu, ShyiShiou Dept. of E.E., NKUT
29. shape the future  建立動作狀態切換控制變數  點擊左上角的Parameters  點擊+號，新增⼀個狀態機變數  選擇Trigger，並取名為Shoot 火炮狀態切換控制 5/9 29 Wu, ShyiShiou Dept. of E.E., NKUT
30. shape the future  設定TurretIdleTurretShoot動作狀態切換條件  點選TurretIdleTurretShoot轉換線  取消Has Exit Time  Settings/Transtion Duration設為0  在Consitions中新增Shoot 火炮狀態切換控制 6/9 30 Wu, ShyiShiou Dept. of E.E., NKUT
31. shape the future  設定TurretShootTurretIdle動作狀態切換條件  點選TurretShootTurretIdle轉換線  勾選Has Exit Time  Settings/Exit Time設定為1  Settings/Transtion Duration設為0 火炮狀態切換控制 7/9 31 Wu, ShyiShiou Dept. of E.E., NKUT
32. shape the future  從Project Tab中選取TurretShot，關閉Loop Time (不重複播放)  從Project Tab中選取TurretIdle，關閉Loop Time (不重複播放) 火炮狀態切換控制 8/9 32 Wu, ShyiShiou Dept. of E.E., NKUT
33. shape the future  測試動畫狀態切換  點擊執行遊戲按鈕  每點擊Animator編輯器中的Shoot，應該會觸發⼀次TurretShoot 火炮狀態切換控制 9/9 33 Wu, ShyiShiou Dept. of E.E., NKUT
34. shape the future  剛才製作的火炮動畫是以移動火炮位置達到動畫效果，但火炮位置 已寫死在動畫中，就算將火炮移到場景其它位罝，執行時火炮還是 會回到動畫中所設定的位置  除非在你的遊戲中，動畫道具是要放固定位置 (且沒有複本)，否則 在設計時要避免使用絕對位置方式 隱藏在火炮動畫的問題 34 Wu, ShyiShiou Dept. of E.E., NKUT
35. shape the future  將turret.png滙入到專案Assets\Sprite資料夾，命名為turret2a。開 啟Sprite Editor，將Pivot設定到砲座底部中央位置  將turret_2.png滙入到專案Assets\Sprite資料夾，命名為turret2b。 開啟Sprite Editor，將Pivot設定到砲座底部中央位置  將turret.png滙入到專案Assets\Sprite資料夾，命名為turret2c。開 啟Sprite Editor，將Pivot設定到砲座底部前側位置 火炮動畫製作II 1/9 35 Wu, ShyiShiou Dept. of E.E., NKUT turret2a turret2c turret2b
36. shape the future  將turret2a素材拖曳到場景中，並命名為Turret2  把Turret2的Position座標初始值設定為(x,y,z)=(-6, -2, 0)  把Turret2的Rotation向左旋轉180度(x,y,z)=(0, 0, 0)  把Turret2的Scale縮小0.8倍(x,y,z)=(0.8, 0.8, 1) 火炮動畫製作II 2/9 36 Wu, ShyiShiou Dept. of E.E., NKUT
37. shape the future  點選「Window/Animation」，開啟動畫編輯工具  點擊Animation工具之「Create」按鈕建立動畫檔  動畫檔命名為Turret2Shoot，並儲存到專案中的Assets\Animation 資料夾底下  依序將turret2a、 turret2b、 turret2c、 turret2a拖曳到 Animation影格中，適度調整key frame時間點 火炮動畫製作II 3/9 37 Wu, ShyiShiou Dept. of E.E., NKUT
38. shape the future  點擊Animation視窗左上角Clip下拉式選單，點選「Create New Clip…」建立另⼀動畫檔，檔名Turret2Idle 火炮動畫製作II 4/9 38 Wu, ShyiShiou Dept. of E.E., NKUT
39. shape the future  拖曳turret2a到Turret2Idle動畫，讓砲塔回到初始狀態  完成動畫錄製後，點⼀下錄製按鈕，使它彈起停⽌錄製 火炮動畫製作II 5/9 39 Wu, ShyiShiou Dept. of E.E., NKUT
40. shape the future  雙擊Assets/Animation資料夾中的Turret2動畫狀態控制器，開啟 Animator編輯器 火炮動畫製作II 6/9 40 Wu, ShyiShiou Dept. of E.E., NKUT
41. shape the future  Turret2Idle設定為Default State  建立Turret2Idle到Turret2Shoot轉換線  建立Turret2Shoot到Turret2Idle轉換線  建立⼀個名為Shoot的Trigger參數 火炮動畫製作II 7/9 41 Wu, ShyiShiou Dept. of E.E., NKUT
42. shape the future  設定Turret2IdleTurret2Shoot動作狀態切換條件  點選Turret2IdleTurret2Shoot轉換線  取消Has Exit Time  Settings/Transtion Duration設為0  在Consitions中新增Shoot  設定Turret2ShootTurret2Idle動作狀態切換條件  點選Turret2ShootTurret2Idle轉換線  勾選Has Exit Time  Settings/Exit Time設定為1  Settings/Transtion Duration設為0 火炮動畫製作II 8/9 42 Wu, ShyiShiou Dept. of E.E., NKUT
43. shape the future  從Project Tab中選取Turret2Shot，關閉Loop Time (不重複播放)  從Project Tab中選取Turret2Idle，關閉Loop Time (不重複播放)  測試動畫狀態切換  點擊執行遊戲按鈕  每點擊Animator編輯器中的Shoot，應該會觸發⼀次Turret2Shoot 火炮動畫製作II 9/9 43 Wu, ShyiShiou Dept. of E.E., NKUT
44. shape the future  在Assets/Script資料夾中新增⼀個名為TurretScript之C# Script檔  編輯TurretScript程式如下： public class TurretScript : MonoBehaviour { private Animator _animator; void Start () { _animator = this.GetComponent<Animator> (); } private void PlayShootAnimation(){ _animator.SetTrigger ("Shoot"); } void Update () { if (Input.GetKeyDown (KeyCode.Space)) { PlayShootAnimation (); } } } 撰寫動畫控制程式腳本 44 Wu, ShyiShiou Dept. of E.E., NKUT
45. shape the future  由Project面板將TurretScript腳本曳到Hierarchy面板中的Turret及 Turret2元件上 套用動畫控制程式腳本 45 Wu, ShyiShiou Dept. of E.E., NKUT
46. shape the future  執行遊戲專案  按空白鍵發射火炮 測試動畫控制程式腳本 46 Wu, ShyiShiou Dept. of E.E., NKUT
47. shape the future 角色動畫製作 1/5 47 Wu, ShyiShiou Dept. of E.E., NKUT  匯入角色動畫素材到Assets/Sprite資料夾
48. shape the future  拖曳idle_000到場景中，命名為Ninja，並適度調整大小  由Unity選單「Window/Animation」，開啟動畫編輯工具  點擊Animation工具右下方「Create」按鈕建立動畫檔  動畫檔名Ninja_Idle，並儲存到專案中的Assets\Animation資料夾 角色動畫製作 2/5 48 Wu, ShyiShiou Dept. of E.E., NKUT
49. shape the future  將所有的Idle分鏡動畫素材依序拖曳到Animation影格中，適度調整 撥放時間 角色動畫製作 3/5 49 Wu, ShyiShiou Dept. of E.E., NKUT
50. shape the future  點擊Animation視窗左上角Clip下拉式選單，點選「Create New Clip…」建立動畫檔，檔名Ninja_Attack 角色動畫製作 4/5 50 Wu, ShyiShiou Dept. of E.E., NKUT
51. shape the future  比照Idle動畫製作方式，將attack分鏡動畫素材逐⼀拖曳到 Animation影格中，並適度調整撥放時間  以同樣方式建立Ninja_Run及Ninja_Jump動畫檔 角色動畫製作 5/5 51 Wu, ShyiShiou Dept. of E.E., NKUT
52. shape the future  雙擊Ninja動畫控制器，開啟Animator編輯器，編輯動作狀態切換 控制 角色動畫控制 1/6 52 Wu, ShyiShiou Dept. of E.E., NKUT
53. shape the future  將Ninja_Idle設設定為Default State  建立Ninja_Idle與Ninja_Run轉換線  建立Ninja_Idle與Ninja_Jump轉換線  建立Ninja_Idle與Ninja_Attack轉換線  建立⼀個名為Action的Int參數 角色動畫控制 2/6 53 Wu, ShyiShiou Dept. of E.E., NKUT
54. shape the future  設定NinjaIdleNinjaAttack動作狀態切換條件  取消Has Exit Time  Settings/Transtion Duration設為0  在Consitions中新增Action Equals 1  設定NinjaIdleNinjaJump動作狀態切換條件  取消Has Exit Time  Settings/Transtion Duration設為0  在Consitions中新增Action Equals 2 角色動畫控制 3/6 54 Wu, ShyiShiou Dept. of E.E., NKUT
55. shape the future  設定NinjaIdleNinjaRun動作狀態切換條件  取消Has Exit Time  Settings/Transtion Duration設為0  在Consitions中新增Action Equals 2  設定其它狀態NinjaIdle動作狀態切換條件  勾選Has Exit Time  Settings/Exit Time設定為1  Settings/Transtion Duration設為0 角色動畫控制 4/6 55 Wu, ShyiShiou Dept. of E.E., NKUT
56. shape the future  在Assets/Script資料夾中新增⼀個名為NinjaControl之C# Script檔  編輯NinjaControl程式如下： public class TurretScript : MonoBehaviour { private Animator _animator; void Start () { _animator = this.GetComponent<Animator> (); } private void PlayAnimation(int action){ _animator.SetInteger ("Action", action); } 角色動畫控制 5/6 56 Wu, ShyiShiou Dept. of E.E., NKUT
57. shape the future void Update () { if (Input.GetKeyDown (KeyCode.Z)) { PlayAnimation (1); } else if (Input.GetKeyDown (KeyCode.X)) { PlayAnimation (2); } else if (Input.GetKeyDown (KeyCode.C)) { PlayAnimation (3); } else PlayAnimation (0); } } 角色動畫控制 6/6 57 Wu, ShyiShiou Dept. of E.E., NKUT
58. shape the future  新建2D專案，並以學號-2做為專案名稱  下載ninjaadventurenew.zip，使用以下5種分鏡動畫素材製作 動畫  http://gameart.eu.org/files/ninjaadventurenew.zip 實作練習 1/2 58 Wu, ShyiShiou Dept. of E.E., NKUT Idle Attack Jump Run Throw
59. shape the future  設計動作狀態控制  使用Has Exit Time回到Ninja_Idle 實作練習 2/2 59 Wu, ShyiShiou Dept. of E.E., NKUT 按鍵 觸發 目前狀態 下一狀態 → Run Ninja_Idle Ninja_Run ↑ Jump Ninja_Idle Ninja_Jump Space Attack Ninja_Idle Ninja_Attack Z Throw Ninja_Idle Ninja_Throw