Updated on Jun 26, 2017 介紹使用Sprite Editor、Animation、Animator等工具製作2D動畫，並透過腳本程式控制動畫

1. 電子工程系
Unity遊戲程式設計(03)
2D動畫製作及應用
吳錫修
Jun 26, 2017

2. shapethefuture
 素材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. shapethefuture
 Sprite可以是單張圖片，或由動作分鏡及相關圖片所組成
Sprite物件 1/2
3 Wu, ShyiShiou Dept. of E.E., NKUT
sprite 1
sprite 2

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

5. shapethefuture
 在Assets下新增Sprite目錄
 Assets快顯功能表Create/Folder
 將素材圖片拖曳到Assets/Sprite目錄
 屬性編輯器 (inspector)
 將貼圖類型 (Texture Type)設定為Sprite (2D
and UI)
 將圖片類型 (Sprite Mode)設定為Multiple
 點擊「Sprite Editor」按鈕
剪裁Sprite 1/3
5 Wu, ShyiShiou Dept. of E.E., NKUT

6. shapethefuture
 由Slice下拉選單設定剪裁方式 (Type)，之後點擊「Slice」按鈕
 Automatic 自動剪裁
 Grid By Cell Size 固定大小剪裁
 Grid By Cell Count 指定行列個數方式剪裁
剪裁Sprite 2/3
6 Wu, ShyiShiou Dept. of E.E., NKUT

7. shapethefuture
 剪裁後每幅sprite會自動設定個別的名稱，並可個別使用
 自動裁切後可依需求調整剪裁後的sprite素材屬性，完成後點擊
Apply按鈕
剪裁Sprite 3/3
7 Wu, ShyiShiou Dept. of E.E., NKUT

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

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

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

11. shapethefuture
 將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. shapethefuture
 火砲發射砲彈時，火砲會因瞬間後座力而往後彈，再慢慢往前收
 選取Turret元件
 選單命令Window> Animation，開啟動畫編輯工具
 可以將Animation Tab停靠到習慣的作業窗格上
火炮動畫製作I 3/15
12 Wu, ShyiShiou Dept. of E.E., NKUT

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

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

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

16. shapethefuture
 點擊箭頭展開可以檢視細節設定
 目前記錄在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. shapethefuture
 滑鼠點擊紅線區域處，可以移動時間軸
 將紅線移至0.1秒處
火炮動畫製作I 8/15
17 Wu, ShyiShiou Dept. of E.E., NKUT

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

19. shapethefuture
 點擊播放按鈕可以預覽動態效果
 點擊左下角的Curve按鈕可以調整key frame與key frame間的轉換
細節
 拖曳滑桿四個端點，可調整顯示比例
火炮動畫製作I 10/15
19 Wu, ShyiShiou Dept. of E.E., NKUT
播放

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

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

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

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

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

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

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

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

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

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

30. shapethefuture
 設定TurretIdleTurretShoot動作狀態切換條件
 點選TurretIdleTurretShoot轉換線
 取消Has Exit Time
 Settings/Transtion Duration設為0
 在Consitions中新增Shoot
火炮狀態切換控制 6/9
30 Wu, ShyiShiou Dept. of E.E., NKUT

31. shapethefuture
 設定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. shapethefuture
 選取AssetsAnimationTurretShoot，關閉Loop Time (不重複播
放)
 選取AssetsAnimationTurretIdle，關閉Loop Time (不重複播放)
火炮狀態切換控制 8/9
32 Wu, ShyiShiou Dept. of E.E., NKUT

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

34. shapethefuture
 剛才製作的火炮動畫是以移動火炮位置達到動畫效果，但火炮位置
已寫死在動畫中，就算將火炮移到場景其它位罝，執行時火炮還是
會回到動畫中所設定的位置
 除非在你的遊戲中，動畫道具是要放固定位置 (且沒有複本)，否則
在設計時要避免使用絕對位置方式
 解決方式，選單命令GameObject>Create Empty先建立⼀個空遊
戲物件，將turret素材做為子物件，再依照先前程序製作turret動畫
隱藏在火炮動畫的問題
34 Wu, ShyiShiou Dept. of E.E., NKUT

35. shapethefuture
 將turret.png滙入到專案AssetsSprite資料夾，命名為turret2a。開
啟Sprite Editor，將Pivot設定到砲座底部中央位置
 將turret_fire.png滙入到專案AssetsSprite資料夾，命名為
turret2b。開啟Sprite Editor，將Pivot設定到砲座底部中央位置
 將turret.png滙入到專案AssetsSprite資料夾，命名為turret2c。開
啟Sprite Editor，將Pivot設定到砲座底部前側位置
火炮動畫製作II 1/9
35 Wu, ShyiShiou Dept. of E.E., NKUT
turret2a turret2cturret2b

36. shapethefuture
 將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. shapethefuture
 選單命令Window> Animation，開啟動畫編輯工具
 點擊Animation工具之「Create」按鈕建立動畫檔
 動畫檔命名為Turret2Shoot，並儲存到專案中的AssetsAnimation
資料夾底下
 依序將turret2a、 turret2b、 turret2c、 turret2a拖曳到
Animation影格中，適度調整key frame時間點
火炮動畫製作II 3/9
37 Wu, ShyiShiou Dept. of E.E., NKUT

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

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

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

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

42. shapethefuture
 設定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. shapethefuture
 選取AssetsAnimationTurret2Shot，關閉Loop Time (不重複播
放)
 選取AssetsAnimationTurret2Idle，關閉Loop Time (不重複播放)
 測試動畫狀態切換
 點擊執行遊戲按鈕
 每點擊Animator編輯器中的Shoot，應該會觸發⼀次Turret2Shoot
火炮動畫製作II 9/9
43 Wu, ShyiShiou Dept. of E.E., NKUT

44. shapethefuture
 在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 ();
}
}
}
撰寫動畫控制程式腳本
44 Wu, ShyiShiou Dept. of E.E., NKUT

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

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

47. shapethefuture
 將num0.png~num5.png滙入到專案AssetsSprites資料夾
 將num5素材拖曳到場景中，並命名為Countdown
製作倒數動畫 1/5
47 Wu, ShyiShiou Dept. of E.E., NKUT

48. shapethefuture
 Countdown物件加入CountdownController腳本程式
 編輯CountdownController程式如下：
public class CountdownControl : MonoBehaviour {
void Start () {
}
void Update () {
}
public void DestroyMyself(){
Destroy (gameObject);
}
}
製作倒數動畫 2/5
48 Wu, ShyiShiou Dept. of E.E., NKUT

49. shapethefuture
 選取Countdown物件
 選單命令Window> Animation，開啟動畫編輯工具
 點擊Animation工具之「Create」按鈕建立動畫檔；動畫檔命名為
Countdown，並儲存到AssetsAnimation資料夾
 依序將num5、num4、num3、num2、num1及num0拖曳到
Animation影格中，num0 key frame間隔1.2秒，其餘key frame間
隔1秒
製作倒數動畫 3/5
49 Wu, ShyiShiou Dept. of E.E., NKUT

50. shapethefuture
 在時間軸5秒下方點擊滑鼠右鍵，執行Add Animation Event，時間
軸下方會建立⼀事件指示條
製作倒數動畫 4/5
50 Wu, ShyiShiou Dept. of E.E., NKUT

51. shapethefuture
 點選事件指示條
 設定DestroyMyself()做為事件函式
 執行測試，倒數5秒後動畫會自動消失
製作倒數動畫 5/5
51 Wu, ShyiShiou Dept. of E.E., NKUT

52. shapethefuture
角色動畫製作 1/5
52 Wu, ShyiShiou Dept. of E.E., NKUT
 匯入角色動畫素材到Assets/Sprites資料夾
 https://gameart.eu.org/files/adventure_girl.zip

53. shapethefuture
 拖曳idle_000到場景中，命名為Ninja，並適度調整大小
 選單命令Window/Animation，開啟動畫編輯工具
 點擊Animation工具右下方「Create」按鈕建立動畫檔
 動畫檔名Ninja_Idle，並儲存到專案中的AssetsAnimation資料夾
角色動畫製作 2/5
53 Wu, ShyiShiou Dept. of E.E., NKUT

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

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

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

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

58. shapethefuture
 將Ninja_Idle設設定為Default State
 建立Ninja_Idle與Ninja_Run轉換線
 建立Ninja_Idle與Ninja_Jump轉換線
 建立Ninja_Idle與Ninja_Attack轉換線
 建立⼀個名為Action的Int參數
角色動畫控制 2/6
58 Wu, ShyiShiou Dept. of E.E., NKUT

59. shapethefuture
 設定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
59 Wu, ShyiShiou Dept. of E.E., NKUT

60. shapethefuture
 設定NinjaIdleNinjaRun動作狀態切換條件
 取消Has Exit Time
 Settings/Transtion Duration設為0
 在Consitions中新增Action Equals 3
 設定其它狀態NinjaIdle動作狀態切換條件
 取消Has Exit Time
 Settings/Transtion Duration設為0
 在Consitions中新增Action Equals 0
角色動畫控制 4/6
60 Wu, ShyiShiou Dept. of E.E., NKUT

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

62. shapethefuture
void Update () {
if (Input.GetKey (KeyCode.Z)) {
PlayAnimation (1);
} else if (Input.GetKey (KeyCode.X)) {
PlayAnimation (2);
} else if (Input.GetKey (KeyCode.C)) {
PlayAnimation (3);
}
else
PlayAnimation (0);
}
}
角色動畫控制 6/6
62 Wu, ShyiShiou Dept. of E.E., NKUT