Skip to content

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

本篇範例以 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);
        }
    }
}



Output:

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


References


Read More

Tags:

Leave a Reply