[Unity] 使用 Animator 來幫角色加上動畫

Last Updated on 2021-07-03 by Clay

本篇範例以 2D 遊戲為主，實現人物跑步的動畫。

在 Unity 中要實現動畫效果，要先了解動畫元件分成 Animator 以及 Animation。

Animator 就是動畫的控制器，一個角色身上通常只會有一個。
Animation 就是動畫，跑步是一組動畫、跳躍也是一組動畫。一個角色身上可能會存在著多個動畫。

而切換不同 Animation（切換不同的動畫）的判斷就得使用 Animator 來完成。

事前準備

我準備了四張圖片作為範例，可以直接下載來使用。

接著打開 Unity 專案，做出地板與人物。

地板只需要加上 Box Collider 2D。人物則加上 Box Collider 2D 以及 Rigidbody 2D。

製作動畫

Step 1: 將角色加上 Animator

Step 2: 製作動畫

從 Window > Animation > Animation 打開動畫視窗。

分別製作『待機動畫』以及『跑步動畫』。

點選 Create 開始製作。

待機動作就是只有一張閒置站著的圖，沒什麼好說的；跑步動畫則是四張圖：中間動作 > 跨出右腳 > 中間動作 > 跨出左腳。

Step 3: 調整 Animator

接著調整角色身上的 Animator。

將 PlayerIdle 動畫設置成 Set as Layer Default State。這代表著開始遊戲場景時，角色預設就是反覆執行此動畫。

當然，由於我們只有一張待機圖片，所以你會看到角色只是呆呆站著。

接著，使用 Make Transition 來製作不同動畫的切換。我們需要設置來回的切換流向，這樣才能保證人物能從『閒置』轉為『跑步』、也能從『跑步』轉為『閒置』。

接著新增條件：選擇 Parameters 頁面，新增一個 Status 的整數變數。

接著選擇從『閒置』切換成『跑步』的 Transitions 線。在一旁 Inspector 的欄位中，取消 Has Exit Time。若是不取消的話，我們的動畫會到播完為止才切換到下一段動畫，這會讓人物的動作看起來卡卡的。

接著在下方新增條件，選擇 Status 等於 1 為條件。之後我們只需要在程式中更改 Status 的值，就能順利更改人物動畫。

另一條從『跑步』切換成『閒置』的線也要做一樣的事情，只不過 Status 的條件需要更改為 0。

Step 4: 撰寫人物移動腳本

將腳本 PlayerMovement.cs 附加在 Player 人物上。

myAnimator 是個 Animator 物件，用來控制動畫的 Status 變數；而 mySpriteRenderer 則是圖片物件，用來將圖片鏡像翻轉成另外一個方向。

using UnityEngine;

public class PlayerMovement : MonoBehaviour
{
    // Init
    public float moveSpeed = 0.2f;

    // Properties
    private Animator myAnimator;
    private SpriteRenderer mySpriteRenderer;

    void Start()
    {
        // Animator
        myAnimator = GetComponent<Animator>();

        // Sprite
        mySpriteRenderer = GetComponent<SpriteRenderer>();
    }

    void FixedUpdate()
    {
        // Movement
        if (Input.GetKey(KeyCode.LeftArrow))
        {
            mySpriteRenderer.flipX = true;
            myAnimator.SetInteger("Status", 1);
            transform.position -= new Vector3(moveSpeed, 0);
        }
        else if (Input.GetKey(KeyCode.RightArrow))
        {
            mySpriteRenderer.flipX = false;
            myAnimator.SetInteger("Status", 1);
            transform.position += new Vector3(moveSpeed, 0);
        }
        else
        {
            myAnimator.SetInteger("Status", 0);
        }
    }
}

using UnityEngine;

public class PlayerMovement : MonoBehaviour
{
    // Init
    public float moveSpeed = 0.2f;

    // Properties
    private Animator myAnimator;
    private SpriteRenderer mySpriteRenderer;

    void Start()
    {
        // Animator
        myAnimator = GetComponent();

        // Sprite
        mySpriteRenderer = GetComponent();
    }

    void FixedUpdate()
    {
        // Movement
        if (Input.GetKey(KeyCode.LeftArrow))
        {
            mySpriteRenderer.flipX = true;
            myAnimator.SetInteger("Status", 1);
            transform.position -= new Vector3(moveSpeed, 0);
        }
        else if (Input.GetKey(KeyCode.RightArrow))
        {
            mySpriteRenderer.flipX = false;
            myAnimator.SetInteger("Status", 1);
            transform.position += new Vector3(moveSpeed, 0);
        }
        else
        {
            myAnimator.SetInteger("Status", 0);
        }
    }
}

Output:

到這裡為止，今天要紀錄的動畫控制差不多結束了。如果人物還有更多想要製作的動作，當然也可以依此類推，製作不同的 Animation 動畫、使用 Animator 來切換不同的動畫、使用條件判斷現在該切換成那個動畫 ...... 等等。

[Unity] 使用 Animator 來幫角色加上動畫

事前準備