Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Avatar for Wu, ShyiShiou Wu, ShyiShiou
November 11, 2016

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

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

Avatar for Wu, ShyiShiou

Wu, ShyiShiou

November 11, 2016
Tweet

More Decks by Wu, ShyiShiou

Other Decks in Programming

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 Mode  Single單張矩形裁切  Multiple裁切成多張素材

     Polygon單張多邊形裁切 Sprite物件 2/2 Wu, ShyiShiou Dept. of E.E., NKUT 4
  4. 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
  5. 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
  6. 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
  7. 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
  8. shape the future  Animation Tab初始狀態會是這樣  滑鼠滾輪可調整時間軸解析度 火炮動畫製作I 5/15

    14 Wu, ShyiShiou Dept. of E.E., NKUT 「錄製鈕」壓下去表示正在錄製Key Frame 紅線代表我們在第幾秒
  9. 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
  10. shape the future  點擊播放按鈕可以預覽動態效果  點擊左下角的Curve按鈕可以調整key frame與key frame間的轉換 細節

     關閉Curve再開啟,會自動調整顯示比例 火炮動畫製作I 10/15 19 Wu, ShyiShiou Dept. of E.E., NKUT 播放
  11. shape the future  建立動作狀態切換控制變數  點擊左上角的Parameters  點擊+號,新增⼀個狀態機變數 

    選擇Trigger,並取名為Shoot 火炮狀態切換控制 5/9 29 Wu, ShyiShiou Dept. of E.E., NKUT
  12. 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
  13. 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
  14. shape the future  從Project Tab中選取TurretShot,關閉Loop Time (不重複播放)  從Project

    Tab中選取TurretIdle,關閉Loop Time (不重複播放) 火炮狀態切換控制 8/9 32 Wu, ShyiShiou Dept. of E.E., NKUT
  15. 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
  16. 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
  17. 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
  18. shape the future  Turret2Idle設定為Default State  建立Turret2Idle到Turret2Shoot轉換線  建立Turret2Shoot到Turret2Idle轉換線

     建立⼀個名為Shoot的Trigger參數 火炮動畫製作II 7/9 41 Wu, ShyiShiou Dept. of E.E., NKUT
  19. 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
  20. 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
  21. 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
  22. shape the future 角色動畫製作 1/5 47 Wu, ShyiShiou Dept. of

    E.E., NKUT  匯入角色動畫素材到Assets/Sprite資料夾
  23. 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
  24. 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
  25. 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
  26. 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
  27. 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
  28. 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