動畫編輯器、製作補間動畫、製作定格動畫、編輯動畫控制器、在動畫中使用時間事件、實作角色動畫製作與控制

1. Unity 2D動畫製作及應用
Revised on September 12, 2019
 動畫編輯器
 製作補間動畫
 製作定格動畫
 編輯動畫控制器
 在動畫中使用時間事件
 實作角色動畫製作與控制

2.  Sprite可以是單張圖片、相關圖片或由⼀組相關圖片 (分解動作圖片)
Sprite素材
2
sprite 1
sprite 2
sprite 3

3.  由Assets快顯功能表Create> Folder，新增Sprites資料夾
 將圖片素材拖曳到AssetsSprites資料夾
 將圖片素材的貼圖類型(Texture Type)設定為Sprite(2D and UI)
匯入Sprite素材
3

4.  Filter Mode是指圖片在3D空間中被拉扯或扭曲時pixel間的顏色如
何填補顯示
Sprite Filter Mode
4
 Point 單點插值，近看時邊緣有明顯鋸齒狀
 Bilinear 雙線性插值，近看時邊緣顯得模糊化
 Trilinear 三線性插值，類似Bilinear，並且在
mipmap級別間進行混合
 配合Max Size及Compression設定，在品質與
執行效能間取得最佳效果

5.  素材Pixel Per Unit設定為100，表示Unity裡的1單位大小代表100
pixel
 在2D遊戲中，攝影機投影方式(Projection)大都設定為正交投影模
式(Orthographic)，此時Camera Size建議值為視野半高
 假設遊戲畫面為1024*768，視野半高為7.68/2 = 3.84，則Camera
Size建議值為3.84
Camera size設定
5

6.  透過Sprite位移、縮放、旋轉，達到動畫效果
 砲塔發射炮彈，變化砲塔位置來產生後座力效果
 攻擊怪物，變化怪物大小來產生被攻擊受傷效果
 由動作分鏡之⼀連串畫面，連續播放達到動畫效果
2D動畫原理
6

7.  動畫編輯器可簡單快速地在物件上添加動畫效果，只要設定關鍵影格，
系統會自動加上補間動畫
 點選物件，選單命令Window> Animation> Animation(Ctrl+6)，即可
開啟動畫編輯器
 點擊「Create」按鈕即可為物件建立新的動畫效果，系統會詢問要儲存的
動畫名稱
動畫編輯器 (Animation) 1/5
7
時間軸
預設每秒60 frames
建立新動畫

8. 動畫編輯器 (Animation) 2/5
8
按下「錄製鈕」進行動畫錄製
點擊「Add Property」，選取
動畫屬性 (取決於動畫物件上
附加多少元件而定)
白線代表目前作業點，可拖曳黃色圓圏處或
以滑鼠點擊時間軸區域來變更作業點
目前作業的frame編號
滑鼠滾輪可調整時闁軸顯示比例

9. 動畫編輯器 (Animation) 3/5
9
系統自動建立1秒動畫的頭尾key frame
移動到想要的時間點
點擊新增key frame

10. 動畫編輯器 (Animation) 4/5
10
調整動畫物件屬性
切換為曲線模式
拖曳滑桿四個端點，可調整顯示比例

11. 動畫編輯器 (Animation) 5/5
11
測試動畫

12.  建立2D專案
 將turret.png滙入到專案AssetsSprites資料夾
 將圖片素材的貼圖類型(Texture Type)設定為Sprite(2D and UI)
 開啟Sprite Editor，將Pivot設定到砲座下方中央位置
Lab 位移動畫製作 1/9
12 Pivot位置

13.  將turret素材拖曳到場景中，並命名為Turret
 Position(X,Y,Z) = (6, -2, 0)
 Rotation(X,Y,Z) = (0, 180, 0)
 Scale(X,Y,Z) = (0.8, 0.8, 1)
Lab 位移動畫製作 2/9
13

14.  製作火砲發射動畫
 發射砲彈時，火砲會因瞬間後座力而往後彈，再慢慢往前收
 選取Turret物件，選單命令Window> Animation> Animation
(Ctrl+6)，開啟動畫編輯工具
 點擊「Create」按鈕建立動畫檔，命名為turret_shoot，並儲存到專案
中的AssetsAnimations資料夾底下
Lab 位移動畫製作 3/9
14

15.  按下「錄製鈕」開始錄製動畫
 點選Turret，將X座標變更為6.35；在時間軸0:00處會自動建立key
frame紀錄
Lab 位移動畫製作 4/9
15

16.  將作業時間點移到0:10處
Lab 位移動畫製作 5/9
16

17.  將Turret座標X設回6；在時間軸0:10處會再自動新增key frame紀錄
 點擊播放按鈕預覽動態效果
Lab 位移動畫製作 6/9
17

18.  點擊Curve按鈕切換到曲線模式
 點選曲線端點，會出現⼀條灰色的斜率控制線
 調整端點斜率，讓火砲回返有速度差的效果
Lab 位移動畫製作 7/9
18

19.  點擊Animation視窗左上角Clip下拉式選單，點選「Create New
Clip…」建立另⼀動畫檔，檔名turret_Idle
Lab 位移動畫製作 8/9
19

20.  TurretIdle動畫中只設定⼀個Frame，讓砲塔回到初始狀態
 任意變更Position X值，再重置為6
 再次點擊錄製按鈕，使它彈起結束錄製
Lab 位移動畫製作 9/9
20

21.  在遊戲中，⼀個角色通常具備多種動畫，例如⾛路、跑步、跳躍、翻
滾、攻擊。動畫控制編輯器提供繪製狀態圖方式，方便設定動畫的關
係及觸發條件
動畫控制編輯器 1/2
21
預設動畫
動畫轉換

22.  ⾸次為物件建立動畫時，系統會⼀併建立動畫控制器
 也可由選單命令Assets> Create> Animator Controller新增動畫
控制器，再指定到Controller欄
動畫控制編輯器 2/2
22
預設動畫
動畫轉換

23.  完成動作錄製後，要透過Animator編輯器設定動畫切換控制方式
 開啟Animator編輯器
 由Project窗格雙擊建立Turret動畫時自動產生的Controller；
 或選取Turret物件，執行選單命令Window> Animation> Animator
Lab 動畫切換控制 1/9
23

24.  第⼀個建立的動畫clip會被設定為default state
 設定為turret_idle為預設狀態
 由turret_idle快顯功能表，選擇「Set as Layer Default State」
Lab 動畫切換控制 2/9
24

25.  建立turret_idle到turret_shoot之狀態轉換
 由turret_idle快顯功能表，選擇Make Transition，把Transition的
箭頭拉到turret_shoot
Lab 動畫切換控制 3/9
25

26.  建立turret_shoot到turret_idle之狀態轉換
 由turret_shoot快顯功能表，選擇Make Transition，把Transition的
箭頭拉到turret_idle
Lab 動畫切換控制 4/9
26

27.  建立動作狀態切換控制變數
 點擊左上角的Parameters，切換到參數作業面板
 點擊+號，新增⼀個狀態控制參數
 選擇Trigger，並取名為Shoot
Lab 動畫切換控制 5/9
27

28.  設定turret_idleturret_shoot動作狀態切換條件
 點選turret_idleturret_shoot轉換線
 取消Has Exit Time
 Settings/Transtion Duration設為0
 在Consitions中新增Shoot
Lab 動畫切換控制 6/9
28

29.  設定turret_shootturret_idle動作狀態切換條件
 點選trret_shootturret_idle轉換線
 勾選Has Exit Time
 Settings/Exit Time設定為1
 Settings/Transtion Duration設為0
Lab 動畫切換控制 7/9
29

30.  選取AssetsAnimationturret_shoot，取消Loop Time(不重複播放)
 選取AssetsAnimationturret_idle，取消Loop Time(不重複播放)
Lab 動畫切換控制 8/9
30

31.  測試動畫狀態切換
 點擊執行遊戲按鈕
 每點擊Animator編輯器中的Shoot控制參數，應該會觸發⼀次
turret_shoot
Lab 動畫切換控制 9/9
31

32.  由於火炮位置已寫死在動畫中，就算將火炮移到場景其它位罝，執行
時火炮還是會回到動畫中所設定的位置
 解決方式，選單命令GameObject>Create Empty先建立⼀個空遊戲
物件，將turret做為子物件，再依照先前程序製作turret動畫
隱藏在位移動畫的問題
32

33.  定格動畫，又名逐幀動畫，其原理即將每幀不同的圖像連續播放，從
而產生動畫效果
定格動畫
33

34.  將turret.png滙入到專案AssetsSprites資料夾，命名為
turret2a
 開啟Sprite Editor，將Pivot設定到砲座底部中央位置
 將turret_fire.png滙入到專案AssetsSprites資料夾，命名為
turret2b
 開啟Sprite Editor，將Pivot設定到砲座底部前側位置
 將turret.png滙入到專案AssetsSprites資料夾，命名為
turret2c
 開啟Sprite Editor，將Pivot設定到砲座底部前側位置
Lab 定格動畫製作 1/8
34 turret2a turret2cturret2b

35.  將turret2a素材拖曳到場景中，並命名為Turret_fire
 Position(X,Y,Z) = (-6, -2, 0)
 Rotation(X,Y,Z) = (0, 0, 0)
 Scale(X,Y,Z) = (0.8, 0.8, 1)
Lab 定格動畫製作 2/8
35

36.  選單命令Window> Animation> Animation，開啟動畫編輯器
 點擊Animation工具之「Create」按鈕建立動畫檔
 動畫檔命名為turret2_shoot，並儲存到專案中的AssetsAnimation資
料夾底下
 依序將turret2a、 turret2b、 turret2c、 turret2a拖曳到
Animation影格中，適度調整key frame時間點
Lab 定格動畫製作 3/8
36

37.  點擊Animation視窗左上角Clip下拉式選單，點選「Create New
Clip…」建立另⼀動畫檔，檔名turret2_idle
 拖曳turret2a到turret2_idle動畫，讓砲塔回到初始狀態
Lab 定格動畫製作 4/8
37

38.  雙擊AssetsAnimations資料夾中的Turret_fire動畫控制器，開啟
Animator編輯器
Lab 定格動畫製作 5/8
38

39.  將turret2_idle設定為Default State
 建立turret2_idle到turret2_shoot轉換線
 建立turret2_shoot到turret2_idle轉換線
 建立⼀個名為Shoot的Trigger參數
Lab 定格動畫製作 6/8
39

40.  設定turret2_idleturret2_shoot動作狀態切換條件
 點選turret2_idleturret2_shoot轉換線
 取消Has Exit Time
 Settings/Transtion Duration設為0
 在Conditions中新增Shoot
 設定turret2_shootturret2_idle動作狀態切換條件
 點選turret2_shootturret2_idle轉換線
 勾選Has Exit Time
 Settings/Exit Time設定為1
 Settings/Transtion Duration設為0
Lab 定格動畫製作 7/8
40

41.  選取AssetsAnimationsTurret2Shot，關閉Loop Time(不重複播放)
 選取AssetsAnimationsTurret2Idle，關閉Loop Time(不重複播放)
 測試動畫狀態切換
 點擊執行遊戲按鈕
 每點擊Animator編輯器中的Shoot，應該會觸發⼀次turret2_shoot
Lab 定格動畫製作 8/8
41

42.  在Assets/Scripts資料夾中新增⼀個名為TurretController之C#
Script檔
 編輯TurretController程式如下：
public class TurretController : MonoBehaviour{
private Animator animator;
void Start (){
animator=this.GetComponent<Animator>();
}
private void PlayShootAnimation(){
animator.SetTrigger("Shoot");
}
void Update (){
if (Input.GetKeyDown(KeyCode.Space)){
PlayShootAnimation();
}
}
}
使用程式腳本控制動畫 1/3
42

43.  由Project面板將TurretController程式腳本拖曳到Hierarchy面
板中的Turret及Turret_fire元件上
使用程式腳本控制動畫 2/3
43

44.  執行遊戲專案
 按空白鍵發射火炮
使用程式腳本控制動畫 3/3
44

45.  在TurretController腳本中我們是透過檢查
按鍵碼來判斷使用者是否按下空白鍵
if (Input.GetKeyDown(KeyCode.Space)) {
PlayShootAnimation();
}
 另⼀種方式是透過Input Manager來管理輸入
作業
 選單命令Edit> Project Settings> Input，
開啟InputManager設定面板
 在Input Manager中可自行定義虛擬按鍵名稱
(Name)及其對應的輸入控制
 例如Left Ctrl鍵或滑鼠左鍵代表Fire1
使用InputManager輸入控制 1/2
45

46.  在腳本程式碼可透過以下指令判斷使用者
 GetButtonDown("Name") 按下虛擬按鍵瞬間
 GetButton("Name") 按著虛擬按鍵
 GetButtonUp("Name") 放開虛擬按鍵瞬間
 例如TurretController腳本可改寫如下
if (Input.GetButtonDown("Fire1")) {
PlayShootAnimation();
}
使用InputManager輸入控制 2/2
46

47.  預製物件是⼀個可重複使用的遊戲物件，把常用的物件包裝起來以便
重複利用
 例如創造了⼀個怪物角色，怪物⾝上已配置好程式腳本、聲⾳、貼圖、與
動作檔，完成測試後，只要把怪物做成預製物件就可以在場景上複製許多
具有相同行為模式的怪物
 預製物件的製作方式很簡單，只要把Hierarchy面板上的物件拖曳到
Project面板的Assets資料夾內即可
 更新預製物件時，只要將更新後的物件重新拖曳到Project面板的
Assets資料夾內即可
預製物件 1/2
47

48.  建立AssetsPrefabs資料夾
 由Hierarchy面板將Turret_fire物件拖曳到Prefabs資料夾，做成
預製物件
 Hierarchy面板的Turret_fire名稱會變為藍色
 由Prefabs資料夾重複拖曳Turret_fire到場景
 執行遊戲專案，按空白鍵測試Turret_fire預製物件
預製物件 2/2
48

49.  編輯物件動畫時，時間軸除了可加入關鍵影格外，也可在特定時間點
觸發事件程序
使用動畫時間事件程序
49

50.  將num0.png~num5.png滙入到專案AssetsSprites資料夾
 將num5素材拖曳到場景中，並命名為Countdown
 重置Transform屬性
Lab 製作倒數動畫 1/5
50

51.  Countdown物件加入CountdownController腳本程式
 編輯CountdownController程式如下：
public class CountdownControl : MonoBehaviour{
void Start () {
}
void Update () {
}
public void DestroyMyself(){
Destroy (gameObject);
}
}
Lab 製作倒數動畫 2/5
51

52.  選取Countdown物件
 選單命令「Window> Animation> Animation」，開啟動畫編輯器
 點擊Animation工具之「Create」按鈕建立動畫檔；動畫檔命名為
countdown，並儲存到AssetsAnimations資料夾
 依序將num5、num4、num3、num2及num1拖曳到Animation影格中，
key frame間隔1秒
Lab 製作倒數動畫 3/5
52

53.  在時間軸5秒下方點擊滑鼠右鍵，執行Add Animation Event，時間
軸下方會建立⼀事件標記
Lab 製作倒數動畫 4/5
53

54.  點選事件標記，在Inspector面板設定DestroyMyself()為事件函式
 執行測試，倒數5秒後動畫會自動消失
Lab 製作倒數動畫 5/5
54

55.  新增場景，檔名ninja
 下載忍者動作分鏡圖
 https://gameart.eu.org/files/ninjaadventurenew.zip
 建立Assets/Sprite/Ninja資料夾
 將角色動作分鏡圖匯入到Assets/Sprite/Ninja資料夾
角色動畫製作 1/7
55
 Attack
 Climb
 Dead
 Glide
 Idle
 Jump
 Jump_Attack
 Jump_Throw
 Run
 Slide
 Throw

56.  透過Sprite Editor將全部的忍者動作分鏡Sprite圖片的座標基準點
(Pivot)調整到角色雙腳底部重心位置
角色動畫製作 2/7
56

57.  拖曳idle_000到場景中，命名為Ninja，並適度調整大小
 Position(X,Y,Z) = (0, 0, 0)
 Rotation(X,Y,Z) = (0, 0, 0)
 Scale(X,Y,Z) = (0.5, 0.5, 1)
角色動畫製作 3/7
57

58.  選單命令Window> Animation> Animation，開啟動畫編輯器
 點擊「Create」按鈕建立動畫檔，動畫檔名ninja_idle，並儲存到
專案中的AssetsAnimations資料夾
角色動畫製作 4/7
58

59.  將Idle分鏡動畫素材依序拖曳到Animation影格中，完成1秒動畫
角色動畫製作 5/7
59

60.  點擊Animation視窗左上角Clip下拉式選單，點選「Create New
Clip…」建立動畫檔，檔名ninja_attack
角色動畫製作 6/7
60

61.  比照ninja_idle動畫製作方式，將Attack分鏡動畫素材逐⼀拖曳到
Animation影格中，完成1秒動畫
 參照以上方式建立ninja_jump、ninja_run及ninja_throw動畫檔，
除了ninja_run為0.5秒，其餘均為1秒動畫
角色動畫製作 7/7
61

62.  拖曳Kunai到場景中，命名為Dart
 Position(X,Y,Z) = (0, 0, 0)
 Rotation(X,Y,Z) = (0, 0, -90)
 Scale(X,Y,Z) = (0.4, 0.4, 1)
 選單命令Component> Physics 2D> Rigirbody 2D，在Dart物件加
上Rigidbody 2D元件
 Gravity Scale = 0
 在Dart物件加上Mover程式腳本
建立飛鏢預製物件 1/3
62

63.  Dart物件加上Dart程式腳本
public class Dart : MonoBehaviour{
//Use this for initialization
[SerializeField]
private float speed;
void Start(){
GetComponent<Rigidbody2D>().velocity = new Vector2(speed, 0.0f);
}
//Update is called once per frame
void Update(){
}
private void OnBecameInvisible(){
Destroy(this.gameObject);
}
}
建立飛鏢預製物件 2/3
63

64.  將Dart之Speed欄位設為4
 執行測試，飛標會向右射出，超出場景時會
自動消失
 測試無誤後，由Hierarchy面板將Dart物件
拖曳到Prefabs資料夾，做成預製物件
 刪除場景上Dart物件
建立飛鏢預製物件 3/3
64

65.  選單命令GameObject> Create Empty，更名為Dart Spawn
 Position(X,Y,Z) = (0, 0, 0)
 Rotation(X,Y,Z) = (0, 0, -90)
 Scale(X,Y,Z) = (1, 1, 1)
 拖曳Dart Spawn成為Ninja子物件
 調整Dart Spawn位置到Ninja之前端，Position(X,Y,Z)=(2.1, 2.15, 0)
建立飛鏢發射控制器 1/3
65

66.  在Ninja物件加上DartSpawner程式腳本
public class DartSpawner : MonoBehaviour{
[SerializeField]
private GameObject dart;
[SerializeField]
private Transform dartSpawn;
// Use this for initialization
void Start(){
}
// Update is called once per frame
void Update(){
}
public void ThrowDart(){
Instantiate(dart, dartSpawn.position, dartSpawn.rotation);
}
}
建立飛鏢發射控制器 2/3
66

67.  拖曳Dart預製物件到Dart Spawner之Dart欄
 拖曳Dart Spawn物件到Dart Spawner之Dart Spawn欄
建立飛鏢發射控制器 3/3
67

68.  雙擊Ninja動畫控制器，開啟Animator編輯器，編輯動作狀態控制器
Lab 角色動畫控制 1/10
68

69.  將ninja_idle設定為Default State
 建立ninja_idle與ninja_run、ninja_jump、ninja_attack及
ninja_throw間的轉換線
 建立⼀個名為action的Int參數
Lab 角色動畫控制 2/10
69

70.  設計動作狀態控制
 放開按鍵回到Ninja_Idle
Lab 角色動畫控制 3/10
70
按鍵 action 目前狀態 下一狀態
0 Any State ninja_idle
Z 1 ninja_idle ninja_attack
Space 2 ninja_idle ninja_jump
→ 3 ninja_idle ninja_run
X 4 ninja_idle ninja_throw

71.  設定ninja_idleninja_attack動作狀態切換條件
 取消勾選Has Exit Time
 Settings/Transtion Duration設為0
 在Consitions中新增action Equals 1
 設定ninja_idleninja_jump動作狀態切換條件
 取消勾選Has Exit Time
 Settings/Transtion Duration設為0
 在Consitions中新增action Equals 2
Lab 角色動畫控制 4/10
71

72.  設定ninja_idleninja_run動作狀態切換條件
 取消勾選Has Exit Time
 Settings/Transtion Duration設為0
 在Consitions中新增action Equals 3
 設定ninja_idleninja_throw動作狀態切換條件
 取消勾選Has Exit Time
 Settings/Transtion Duration設為0
 在Consitions中新增Action Equals 4
Lab 角色動畫控制 5/10
72

73.  設定ninja_attackninja_idle動作狀態切換條件
 勾選Has Exit Time
 Settings/Exit Time = 1
 Settings/Transtion Duration設為0
 在Consitions中新增action Equals 0
 設定ninja_jumpninja_idle動作狀態切換條件
 勾選Has Exit Time
 Settings/Exit Time = 1
 Settings/Transtion Duration設為0
 在Consitions中新增action Equals 0
Lab 角色動畫控制 6/10
73

74.  設定ninja_runninja_idle動作狀態切換條件
 取消勾選Has Exit Time
 Settings/Transtion Duration設為0
 在Consitions中新增action Equals 0
 設定ninja_throwninja_idle動作狀態切換條件
 勾選Has Exit Time
 Settings/Transtion Duration設為0
 在Consitions中新增action Equals 0
Lab 角色動畫控制 7/10
74

75.  在Ninja物件加上NinjaController程式如下：
public class NinjaController : MonoBehaviour{
private Animator animator;
// Use this for initialization
void Start(){
animator = this.GetComponent<Animator>();
}
private void PlayAnimation(int action){
animator.SetInteger("action", action);
}
Lab 角色動畫控制 8/10
75

76. // Update is called once per frame
void Update(){
if (Input.GetKeyDown(KeyCode.Z)){
PlayAnimation(1);
} else if (Input.GetKeyDown(KeyCode.Space)){
PlayAnimation(2);
} else if (Input.GetKey(KeyCode.RightArrow)){
PlayAnimation(3);
} else if (Input.GetKeyDown(KeyCode.X)){
PlayAnimation(4);
}
else
PlayAnimation(0);
}
}
Lab 角色動畫控制 9/10
76

77.  修改ninja_throw動畫，在時間軸0:15處新增Animation Event，設
定ThrowDart()做為事件函式
 測試遊戲專案
Lab 角色動畫控制 10/10
77