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

電子工程系應用電子組電腦遊戲設計組

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

吳錫修

Jun 11, 2017

shap

e th

e fu

ture

素材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

shap

e th

e fu

ture

Sprite可以是單張圖片，或由動作分鏡及相關圖片所組成

Sprite物件 1/2

Wu, ShyiShiou Dept. of E.E., NKUT3

sprite 1

sprite 2

shap

e th

e fu

ture

Sprite Mode

Single單張矩形裁切

Multiple裁切成多張素材

Polygon單張多邊形裁切

Sprite物件 2/2


shap

e th

e fu

ture

在Assets下新增Sprite目錄

Assets快顯功能表Create/Folder

將素材圖片拖曳到Assets/Sprite目錄

屬性編輯器 (inspector)

將貼圖類型 (Texture Type)設定為Sprite (2D and UI)

將圖片類型 (Sprite Mode)設定為Multiple

點擊「Sprite Editor」按鈕

剪裁Sprite 1/3


shap

e th

e fu

ture

由Slice下拉選單設定剪裁方式 (Type)，之後點擊「Slice」按鈕

Automatic 自動剪裁

Grid By Cell Size 固定大小剪裁

Grid By Cell Count 指定行列個數方式剪裁

剪裁Sprite 2/3


shap

e th

e fu

ture

自動裁切後可依需求調整剪裁後的sprite素材屬性

剪裁後每幅sprite會自動設定個別的名稱

剪裁Sprite 3/3


shap

e th

e fu

ture

Filter Mode指的是素材顯示時，圖片在3D空間中被拉扯或扭曲時pixel間的顏色如何顯示

2D遊戲中建議採用Point模式

選取原圖，將Generate Mip Maps取消

將Filter Mode選定為Point

素材Filter Mode


shap

e th

e fu

ture

透過改變sprite位置、大小、角度等，達到動畫效果

砲塔發射炮彈，變化砲塔位置來產生後座力效果

攻擊怪物，變化怪物大小來產生被攻擊受傷效果

由動作分鏡之⼀連串sprite，連續播放達到動畫效果

動畫原理


shap

e th

e fu

ture

將turret.png滙入到專案Assets\Sprite資料夾

開啟Sprite Editor，將Pivot設定到砲座下方中央位置

火炮動畫製作I 1/15

10 Wu, ShyiShiou Dept. of E.E., NKUTPivot位置

shap

e th

e fu

ture

將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)



shap

e th

e fu

ture

火砲發射砲彈時，火砲會因瞬間後座力而往後彈，再慢慢往前收

選取Turret元件

點選「Window/Animation」，開啟動畫編輯工具

可以將Animation Tab停靠到習慣的作業窗格上



shap

e th

e fu

ture

點擊Animation工具之「Create」按鈕建立動畫檔

動畫檔命名為TurretShoot，並儲存到專案中的Assets\Animation資料夾底下



shap

e th

e fu

ture

Animation Tab初始狀態會是這樣

滑鼠滾輪可調整時間軸解析度



「錄製鈕」壓下去表示正在錄製Key Frame

紅線代表我們在第幾秒

shap

e th

e fu

ture

點選Turret，將X座標變更為6.35；會自動在第零秒第零Frame 處(0:00) 建立keyframe紀錄



shap

e th

e fu

ture

點擊箭頭展開可以檢視細節設定

目前記錄在0:00 key frame，Position X為6.35，Position Y為2，Position Z為0



shap

e th

e fu

ture

滑鼠點擊紅線區域處，可以移動時間軸

將紅線移至0.1秒處



shap

e th

e fu

ture

將座標X設回6；會自動在0.1秒第零Frame 處(0:10)新增keyframe紀錄



shap

e th

e fu

ture

點擊播放按鈕可以預覽動態效果

點擊左下角的Curve按鈕可以調整key frame與key frame間的轉換細節

關閉Curve再開啟，會自動調整顯示比例



播放

shap

e th

e fu

ture

由控制點快顯功能表點選「Free Smooth」，會出現⼀條灰色的斜率控制線



shap

e th

e fu

ture

拉動灰色點點可以調整斜率



shap

e th

e fu

ture

外⼀端點套用同樣的方法調整斜率

若要增加畫面張力，砲管向後時可以同時放大，再慢慢復原



shap

e th

e fu

ture

點擊Animation視窗左上角Clip下拉式選單，點選「Create New Clip…」建立另⼀動畫檔，檔名TurretIdle



shap

e th

e fu

ture

TurretIdle動畫中只設定⼀個Frame，讓砲塔回到初始狀態

任意變更Position X值，再重置為6

完成動畫錄製後，點⼀下錄製按鈕，使它彈起停⽌錄製



shap

e th

e fu

ture

完成動作錄製後，要透過Animator編輯器設定動作狀態切換

開啟Animator編輯器

由Project窗格雙擊建立Turret動畫時自動產生的Controller；

或選取Turret物件，點選「Window/Animator」

火炮狀態切換控制 1/9


shap

e th

e fu

ture

第⼀個建立的動畫clip會被設定為default state

由TurretIdle快顯功能表，選擇Set as Layer Default State



shap

e th

e fu

ture

由TurretIdle快顯功能表，選擇Make Transition

把Transition的箭頭拉到TurretShoot



shap

e th

e fu

ture

由TurretShoot快顯功能表，選擇Make Transition

把Transition的箭頭拉到TurretIdle



shap

e th

e fu

ture

建立動作狀態切換控制變數

點擊左上角的Parameters

點擊+號，新增⼀個狀態機變數

選擇Trigger，並取名為Shoot



shap

e th

e fu

ture

設定TurretIdleTurretShoot動作狀態切換條件

點選TurretIdleTurretShoot轉換線

取消Has Exit Time

Settings/Transtion Duration設為0

在Consitions中新增Shoot



shap

e th

e fu

ture

設定TurretShootTurretIdle動作狀態切換條件

點選TurretShootTurretIdle轉換線

勾選Has Exit Time

Settings/Exit Time設定為1




shap

e th

e fu

ture

從Project Tab中選取TurretShot，關閉Loop Time (不重複播放)

從Project Tab中選取TurretIdle，關閉Loop Time (不重複播放)



shap

e th

e fu

ture

測試動畫狀態切換

點擊執行遊戲按鈕

每點擊Animator編輯器中的Shoot，應該會觸發⼀次TurretShoot



shap

e th

e fu

ture

剛才製作的火炮動畫是以移動火炮位置達到動畫效果，但火炮位置已寫死在動畫中，就算將火炮移到場景其它位罝，執行時火炮還是會回到動畫中所設定的位置

除非在你的遊戲中，動畫道具是要放固定位置 (且沒有複本)，否則在設計時要避免使用絕對位置方式

解決方式，選單命令GameObject>Create Empty先建立⼀個空遊戲物件，將turret素材做為子物件，再依照先前程序製作turret動畫

隱藏在火炮動畫的問題


shap

e th

e fu

ture

將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


turret2a turret2cturret2b

shap

e th

e fu

ture

將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)



shap

e th

e fu

ture


點擊Animation工具之「Create」按鈕建立動畫檔

動畫檔命名為Turret2Shoot，並儲存到專案中的Assets\Animation資料夾底下

依序將turret2a、 turret2b、 turret2c、 turret2a拖曳到Animation影格中，適度調整key frame時間點



shap

e th

e fu

ture

點擊Animation視窗左上角Clip下拉式選單，點選「Create New Clip…」建立另⼀動畫檔，檔名Turret2Idle



shap

e th

e fu

ture

拖曳turret2a到Turret2Idle動畫，讓砲塔回到初始狀態

完成動畫錄製後，點⼀下錄製按鈕，使它彈起停⽌錄製



shap

e th

e fu

ture

雙擊Assets/Animation資料夾中的Turret2動畫狀態控制器，開啟Animator編輯器



shap

e th

e fu

ture

Turret2Idle設定為Default State

建立Turret2Idle到Turret2Shoot轉換線

建立Turret2Shoot到Turret2Idle轉換線

建立⼀個名為Shoot的Trigger參數



shap

e th

e fu

ture

設定Turret2IdleTurret2Shoot動作狀態切換條件

點選Turret2IdleTurret2Shoot轉換線

取消Has Exit Time


在Consitions中新增Shoot

設定Turret2ShootTurret2Idle動作狀態切換條件

點選Turret2ShootTurret2Idle轉換線

勾選Has Exit Time





shap

e th

e fu

ture

從Project Tab中選取Turret2Shot，關閉Loop Time (不重複播放)

從Project Tab中選取Turret2Idle，關閉Loop Time (不重複播放)

測試動畫狀態切換

點擊執行遊戲按鈕

每點擊Animator編輯器中的Shoot，應該會觸發⼀次Turret2Shoot



shap

e th

e fu

ture

在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 ();

}}

}

撰寫動畫控制程式腳本


shap

e th

e fu

ture

由Project面板將TurretScript腳本曳到Hierarchy面板中的Turret及Turret2元件上

套用動畫控制程式腳本


shap

e th

e fu

ture

執行遊戲專案

按空白鍵發射火炮

測試動畫控制程式腳本


shap

e th

e fu

ture

將num0.png~num5.png滙入到專案Assets\Sprite資料夾

製作倒數動畫 1/5


shap

e th

e fu

ture

將num5素材拖曳到場景中，並命名為Countdown

選取Countdown物件


點擊Animation工具之「Create」按鈕建立動畫檔；動畫檔命名為Countdown，並儲存到Assets\Animation資料夾

依序將num5、num4、num3、num2、num1及num0拖曳到Animation影格中，num0 key frame間隔1.2秒，其餘key frame間隔1秒



shap

e th

e fu

ture

Countdown物件加入CountdownControl腳本程式

編輯CountdownControl程式如下：

public class CountdownControl : MonoBehaviour {void Start () {}

void Update () {}

public void DestroyMyself(){Destroy (gameObject);

}}



shap

e th

e fu

ture

在時間軸5秒下方點擊滑鼠右鍵，執行Add Animation Event，時間軸下方會建立⼀事件指示條



shap

e th

e fu

ture

雙擊事件指示條，選擇DestroyMyself()做為事件函式

執行測試，倒數5秒後動畫會自動消失



shap

e th

e fu

ture

角色動畫製作 1/5


匯入角色動畫素材到Assets/Sprite資料夾

shap

e th

e fu

ture

拖曳idle_000到場景中，命名為Ninja，並適度調整大小

由Unity選單「Window/Animation」，開啟動畫編輯工具

點擊Animation工具右下方「Create」按鈕建立動畫檔

動畫檔名Ninja_Idle，並儲存到專案中的Assets\Animation資料夾



shap

e th

e fu

ture

將所有的Idle分鏡動畫素材依序拖曳到Animation影格中，適度調整撥放時間



shap

e th

e fu

ture

點擊Animation視窗左上角Clip下拉式選單，點選「Create New Clip…」建立動畫檔，檔名Ninja_Attack



shap

e th

e fu

ture

比照Idle動畫製作方式，將attack分鏡動畫素材逐⼀拖曳到Animation影格中，並適度調整撥放時間

以同樣方式建立Ninja_Run及Ninja_Jump動畫檔



shap

e th

e fu

ture

雙擊Ninja動畫控制器，開啟Animator編輯器，編輯動作狀態切換控制

角色動畫控制 1/6


shap

e th

e fu

ture

將Ninja_Idle設設定為Default State

建立Ninja_Idle與Ninja_Run轉換線

建立Ninja_Idle與Ninja_Jump轉換線

建立Ninja_Idle與Ninja_Attack轉換線

建立⼀個名為Action的Int參數



shap

e th

e fu

ture

設定NinjaIdleNinjaAttack動作狀態切換條件

取消Has Exit Time


在Consitions中新增Action Equals 1

設定NinjaIdleNinjaJump動作狀態切換條件

取消Has Exit Time





shap

e th

e fu

ture

設定NinjaIdleNinjaRun動作狀態切換條件

取消Has Exit Time



設定其它狀態NinjaIdle動作狀態切換條件

勾選Has Exit Time





shap

e th

e fu

ture

在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);

}



shap

e th

e fu

ture

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); }

}



shap

e th

e fu

ture

新建2D專案，並以學號-2做為專案名稱

下載ninjaadventurenew.zip，使用以下5種分鏡動畫素材製作動畫

http://gameart.eu.org/files/ninjaadventurenew.zip

實作練習 1/2


Idle Attack Jump Run Throw

shap

e th

e fu

ture

設計動作狀態控制

使用Has Exit Time回到Ninja_Idle

實作練習 2/2


按鍵觸發目前狀態下一狀態

→ Run Ninja_Idle Ninja_Run↑ Jump Ninja_Idle Ninja_Jump

Space Attack Ninja_Idle Ninja_AttackZ Throw Ninja_Idle Ninja_Throw

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

Software