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

by Wu, ShyiShiou

Slide 1

Slide 1 text

電子工程系應用電子組電腦遊戲設計組 Unity遊戲程式設計(03) 製作及應用2D動畫吳錫修 Nov 11, 2016

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

shape the future  Sprite可以是單張圖片，或由動作分鏡及相關圖片所組成 Sprite物件 1/2 Wu, ShyiShiou Dept. of E.E., NKUT 3 sprite 1 sprite 2

Slide 4

Slide 4 text

shape the future  Sprite Mode  Single單張矩形裁切  Multiple裁切成多張素材  Polygon單張多邊形裁切 Sprite物件 2/2 Wu, ShyiShiou Dept. of E.E., NKUT 4

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

shape the future  自動裁切後可依需求調整剪裁後的sprite素材屬性  剪裁後每幅sprite會自動設定個別的名稱剪裁Sprite 3/3 Wu, ShyiShiou Dept. of E.E., NKUT 7

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

shape the future  透過改變sprite位置、大小、角度等，達到動畫效果  砲塔發射炮彈，變化砲塔位置來產生後座力效果  攻擊怪物，變化怪物大小來產生被攻擊受傷效果  由動作分鏡之⼀連串sprite，連續播放達到動畫效果動畫原理 9 Wu, ShyiShiou Dept. of E.E., NKUT

Slide 10

Slide 10 text

shape the future  將turret.png滙入到專案Assets\Sprite資料夾  開啟Sprite Editor，將Pivot設定到砲座下方中央位置火炮動畫製作I 1/15 10 Wu, ShyiShiou Dept. of E.E., NKUT Pivot位置

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

shape the future  火砲發射砲彈時，火砲會因瞬間後座力而往後彈，再慢慢往前收  選取Turret元件  點選「Window/Animation」，開啟動畫編輯工具  可以將Animation Tab停靠到習慣的作業窗格上火炮動畫製作I 3/15 12 Wu, ShyiShiou Dept. of E.E., NKUT

Slide 13

Slide 13 text

shape the future  點擊Animation工具之「Create」按鈕建立動畫檔  動畫檔命名為TurretShoot，並儲存到專案中的Assets\Animation 資料夾底下火炮動畫製作I 4/15 13 Wu, ShyiShiou Dept. of E.E., NKUT

Slide 14

Slide 14 text

shape the future  Animation Tab初始狀態會是這樣  滑鼠滾輪可調整時間軸解析度火炮動畫製作I 5/15 14 Wu, ShyiShiou Dept. of E.E., NKUT 「錄製鈕」壓下去表示正在錄製Key Frame 紅線代表我們在第幾秒

Slide 15

Slide 15 text

shape the future  點選Turret，將X座標變更為6.35；會自動在第零秒第零Frame 處 (0:00) 建立keyframe紀錄火炮動畫製作I 6/15 15 Wu, ShyiShiou Dept. of E.E., NKUT

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

shape the future  滑鼠壓著紅線區域處，可以移動時間軸  將紅線移至0.1秒處火炮動畫製作I 8/15 17 Wu, ShyiShiou Dept. of E.E., NKUT

Slide 18

Slide 18 text

shape the future  將座標X設回6；會自動在0.1秒第零Frame 處(0:10)新增keyframe 紀錄火炮動畫製作I 9/15 18 Wu, ShyiShiou Dept. of E.E., NKUT

Slide 19

Slide 19 text

shape the future  點擊播放按鈕可以預覽動態效果  點擊左下角的Curve按鈕可以調整key frame與key frame間的轉換細節  關閉Curve再開啟，會自動調整顯示比例火炮動畫製作I 10/15 19 Wu, ShyiShiou Dept. of E.E., NKUT 播放

Slide 20

Slide 20 text

shape the future  由控制點快顯功能表點選「Free Smooth」，會出現⼀條灰色的斜率控制線火炮動畫製作I 11/15 20 Wu, ShyiShiou Dept. of E.E., NKUT

Slide 21

Slide 21 text

shape the future  拉動灰色點點可以調整斜率火炮動畫製作I 12/15 21 Wu, ShyiShiou Dept. of E.E., NKUT

Slide 22

Slide 22 text

shape the future  外⼀端點套用同樣的方法調整斜率  若要增加畫面張力，砲管向後時可以同時放大，再慢慢復原火炮動畫製作I 13/15 22 Wu, ShyiShiou Dept. of E.E., NKUT

Slide 23

Slide 23 text

shape the future  點擊Animation視窗左上角Clip下拉式選單，點選「Create New Clip…」建立另⼀動畫檔，檔名TurretIdle 火炮動畫製作I 14/15 23 Wu, ShyiShiou Dept. of E.E., NKUT

Slide 24

Slide 24 text

shape the future  TurretIdle動畫中只設定⼀個Frame，讓砲塔回到初始狀態  任意變更Position X值，再重置為6  完成動畫錄製後，點⼀下錄製按鈕，使它彈起停⽌錄製火炮動畫製作I 15/15 24 Wu, ShyiShiou Dept. of E.E., NKUT

Slide 25

Slide 25 text

shape the future  完成動作錄製後，要透過Animator編輯器設定動作狀態切換  開啟Animator編輯器  由Project窗格雙擊建立Turret動畫時自動產生的Controller；  或選取Turret物件，點選「Window/Animator」火炮狀態切換控制 1/9 25 Wu, ShyiShiou Dept. of E.E., NKUT

Slide 26

Slide 26 text

shape the future  第⼀個建立的動畫clip會被設定為default state  由TurretIdle快顯功能表，選擇Set as Layer Default State 火炮狀態切換控制 2/9 26 Wu, ShyiShiou Dept. of E.E., NKUT

Slide 27

Slide 27 text

shape the future  由TurretIdle快顯功能表，選擇Make Transition  把Transition的箭頭拉到TurretShoot 火炮狀態切換控制 3/9 27 Wu, ShyiShiou Dept. of E.E., NKUT

Slide 28

Slide 28 text

shape the future  由TurretShoot快顯功能表，選擇Make Transition  把Transition的箭頭拉到TurretIdle 火炮狀態切換控制 4/9 28 Wu, ShyiShiou Dept. of E.E., NKUT

Slide 29

Slide 29 text

shape the future  建立動作狀態切換控制變數  點擊左上角的Parameters  點擊+號，新增⼀個狀態機變數  選擇Trigger，並取名為Shoot 火炮狀態切換控制 5/9 29 Wu, ShyiShiou Dept. of E.E., NKUT

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

shape the future  從Project Tab中選取TurretShot，關閉Loop Time (不重複播放)  從Project Tab中選取TurretIdle，關閉Loop Time (不重複播放) 火炮狀態切換控制 8/9 32 Wu, ShyiShiou Dept. of E.E., NKUT

Slide 33

Slide 33 text

shape the future  測試動畫狀態切換  點擊執行遊戲按鈕  每點擊Animator編輯器中的Shoot，應該會觸發⼀次TurretShoot 火炮狀態切換控制 9/9 33 Wu, ShyiShiou Dept. of E.E., NKUT

Slide 34

Slide 34 text

shape the future  剛才製作的火炮動畫是以移動火炮位置達到動畫效果，但火炮位置已寫死在動畫中，就算將火炮移到場景其它位罝，執行時火炮還是會回到動畫中所設定的位置  除非在你的遊戲中，動畫道具是要放固定位置 (且沒有複本)，否則在設計時要避免使用絕對位置方式隱藏在火炮動畫的問題 34 Wu, ShyiShiou Dept. of E.E., NKUT

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

shape the future  點擊Animation視窗左上角Clip下拉式選單，點選「Create New Clip…」建立另⼀動畫檔，檔名Turret2Idle 火炮動畫製作II 4/9 38 Wu, ShyiShiou Dept. of E.E., NKUT

Slide 39

Slide 39 text

shape the future  拖曳turret2a到Turret2Idle動畫，讓砲塔回到初始狀態  完成動畫錄製後，點⼀下錄製按鈕，使它彈起停⽌錄製火炮動畫製作II 5/9 39 Wu, ShyiShiou Dept. of E.E., NKUT

Slide 40

Slide 40 text

shape the future  雙擊Assets/Animation資料夾中的Turret2動畫狀態控制器，開啟 Animator編輯器火炮動畫製作II 6/9 40 Wu, ShyiShiou Dept. of E.E., NKUT

Slide 41

Slide 41 text

shape the future  Turret2Idle設定為Default State  建立Turret2Idle到Turret2Shoot轉換線  建立Turret2Shoot到Turret2Idle轉換線  建立⼀個名為Shoot的Trigger參數火炮動畫製作II 7/9 41 Wu, ShyiShiou Dept. of E.E., NKUT

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

shape the future  在Assets/Script資料夾中新增⼀個名為TurretScript之C# Script檔  編輯TurretScript程式如下： public class TurretScript : MonoBehaviour { private Animator _animator; void Start () { _animator = this.GetComponent (); } private void PlayShootAnimation(){ _animator.SetTrigger ("Shoot"); } void Update () { if (Input.GetKeyDown (KeyCode.Space)) { PlayShootAnimation (); } } } 撰寫動畫控制程式腳本 44 Wu, ShyiShiou Dept. of E.E., NKUT

Slide 45

Slide 45 text

shape the future  由Project面板將TurretScript腳本曳到Hierarchy面板中的Turret及 Turret2元件上套用動畫控制程式腳本 45 Wu, ShyiShiou Dept. of E.E., NKUT

Slide 46

Slide 46 text

shape the future  執行遊戲專案  按空白鍵發射火炮測試動畫控制程式腳本 46 Wu, ShyiShiou Dept. of E.E., NKUT

Slide 47

Slide 47 text

shape the future 角色動畫製作 1/5 47 Wu, ShyiShiou Dept. of E.E., NKUT  匯入角色動畫素材到Assets/Sprite資料夾

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

shape the future  將所有的Idle分鏡動畫素材依序拖曳到Animation影格中，適度調整撥放時間角色動畫製作 3/5 49 Wu, ShyiShiou Dept. of E.E., NKUT

Slide 50

Slide 50 text

shape the future  點擊Animation視窗左上角Clip下拉式選單，點選「Create New Clip…」建立動畫檔，檔名Ninja_Attack 角色動畫製作 4/5 50 Wu, ShyiShiou Dept. of E.E., NKUT

Slide 51

Slide 51 text

shape the future  比照Idle動畫製作方式，將attack分鏡動畫素材逐⼀拖曳到 Animation影格中，並適度調整撥放時間  以同樣方式建立Ninja_Run及Ninja_Jump動畫檔角色動畫製作 5/5 51 Wu, ShyiShiou Dept. of E.E., NKUT

Slide 52

Slide 52 text

shape the future  雙擊Ninja動畫控制器，開啟Animator編輯器，編輯動作狀態切換控制角色動畫控制 1/6 52 Wu, ShyiShiou Dept. of E.E., NKUT

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

shape the future  在Assets/Script資料夾中新增⼀個名為NinjaControl之C# Script檔  編輯NinjaControl程式如下： public class TurretScript : MonoBehaviour { private Animator _animator; void Start () { _animator = this.GetComponent (); } private void PlayAnimation(int action){ _animator.SetInteger ("Action", action); } 角色動畫控制 5/6 56 Wu, ShyiShiou Dept. of E.E., NKUT

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

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