為4路精靈角色實現行走動畫

驗證環境

窗戶

• 窗戶11

Unity 編輯器

• 2020.3.25f1

輸入系統包

• 1.2.0

此提示的先決條件

以下設置已預先配置為解釋這些提示的先決條件。

• 輸入系統包簡介
• 將相機 （2D） 與畫布對齊

參考網站

• 使用 Unity 製作 RPG 第 1 部分：行走動畫和操作

步行圖形的準備

首先，行走動畫是通過在多個圖像之間不斷切換來實現的，使其看起來像是在行走。 因此，有必要準備盡可能多的圖像來顯示運動和行走的方向。

為了實現最簡單的行走動畫，通常準備如下圖像。 這種模式也用於許多角色扮演遊戲。

首先，它上面和下面分為四條線，但它顯示了你走路時將面對的方向。 從上到下，它是“向下，向左，向右，向上”。

對於左邊和右邊來說，這將是朝那個方向行走的動作。 一般流程是“中、左、中、右、中......”。

這次準備的字元的一個儲存格的大小是32x32px。 由於它是為 3x4 正方形準備的，因此圖像文件的實際大小為 96x128px。 順便說一句，一個字元的大小沒有限制，因此也可以使用32x48px或64x64px。

*這次準備的圖像是我很久以前製作的岩丸君。 您可以將其用作行為驗證。

創建項目並準備映像

在這次我們將創建的範例中，我們將假設您可以放置一個字元並使用鍵盤上的游標鍵移動它。

第一步是創建一個新的 2D 專案。 添加您為項目準備的角色圖像。

選擇剛剛新增的影像，並在檢查器中設定以下設定：

設置完成後，按兩下底部的“應用”按鈕。

接下來，拆分圖像，以便在 Unity 中在它們之間切換。 檢查器中有一個“Sprite Editor”按鈕，因此請按兩下它。

當出現 Sprite Editor 對話框時，按兩下「Slice」下拉清單，將 「Type」 設置為 「Grid By Cell Size」， 輸入圖元大小 32（取決於角色的大小），然後按下切片按鈕。

然後，圖像將按指定大小分割。 如果令人困惑，請按 Ctrl 鍵查看分界線。

拆分后，按兩下「應用」按鈕將其關閉。

如果按下專案中圖像檔的圓圈右鍵將其展開，則可以看到圖像被分割。

創建動畫數據

將上一節中創建的圖像拖放到檢視中。

然後，將顯示一個保存對話方塊，而不是添加圖像。 這將保存動畫設置，因此暫時將其另存為“<圖像名稱>Animation.anim”。

這將在專案中創建兩個檔，視圖中是拆分圖像，視圖中是後面的圖像。

順便說一句，如果你在這種狀態下運行遊戲，我認為角色會自己動畫。 這是隨時切換和顯示12張圖像的狀態。

如果遊戲正在運行，請退出遊戲並選擇「動畫」選項卡。 如果沒有，請從功能表中選擇“視窗 -> 動畫 -> 動畫”。

您已從層次結構中選擇了創建的物件（在本例中為 Iwamaru_0）。

已經有自動生成的動畫，但我不需要它，所以我稍後會刪除它。 這次我命名了一個名為“IwamaruAnimation”的下拉列表，因此按兩下一下它並選擇“創建新剪輯”。

然後將出現保存對話框。 由於我們將創建向下運動的動畫，因此我們將其保留為“Iwamaru Down”。

從層次結構中選擇“Iwamaru_0”，然後將動畫更改為“IwamaruDown”。

這一次，我們將在「左、中、右、中」中重複動畫，因此我們將樣本數設置為 4。 然後右邊的時間線將分為 4 個部分。

將Iwamaru_0（專案左上角的圖像）拖放到動畫時間軸中的0.0上。

接下來，將上圖中圖中的“Iwamaru_1”降低到0.1和0.3。

最後，將右上角圖像中的“Iwamaru_2”降至0.2。

完成後，按下播放按鈕。 您可以看到檢視中的角色正在行走和動畫。 （這個示例圖像有點難以理解，但是......

按照相同的步驟創建左、右和頂部動畫。

最終結果應如下圖所示。

確保每個方向都正確設置動畫。

動畫過渡設置

接下來，按兩下專案中的「Iwamaru_0.controller」將其打開。

然後 動畫師 選項卡將打開，您將看到一個如圖所示的螢幕。 這是因為您剛剛創建的動畫是“. controller“檔。

右鍵按下空白區域，然後選擇 Create State -> From New Friend Tree。

將創建一個新的「混合樹」 右鍵按鍵按鍵按鍵並選擇「將層次設置為預設狀態」。

然後，條目將查看混合樹。 這意味著當動畫移動時，混合樹將是第一個移動的東西。

我們將在 Blend Tree 中設置動畫，因此我們將刪除所有現有動畫。

左側有一個「參數」選項卡，因此請選擇它並從 + 按鈕添加「浮動」。。

由於有兩個參數，因此它們分別命名為“X”和“Y”。

按兩下混合樹。

選擇出現的「混合樹」（Blend Tree）。

在檢查器中，將混合類型更改為 2D 簡單詞典。

將參數設置為「X」和「Y」。

從Motion的 + 按鈕中，選擇添加運動場4次。

初始值可能不同，但應如圖所示。

對於我們添加的四個Motion專案，我們將在專案中設置頂部、底部、左側和右側的 .anims。

然後，指定每個動畫應移動的方向。

這樣就完成了動畫設置。

最後，您可以刪除自動生成的動畫檔，因為您不需要它。

運動控制

移動是通過按下鍵盤上的一個鍵來完成的，因此您可以創建一個腳本來控制它。 這一次，腳本將附加到角色上，因此我們將其保留為“CharacterMove”。

文稿如下所示：

using UnityEngine;
using UnityEngine.InputSystem;

public class CharacterMove : MonoBehaviour
{
  // あらかじめ Animator コンポーネントを持っておくようにする
  private Animator _animator;

  // 最初のフレーム更新の前に開始が呼び出されます
  void Start()
  {
    // オブジェクトに紐付いている Animator を取得する
    _animator = GetComponent<Animator>();

    // 最初の向き (下) を設定する
    _animator.SetFloat("X", 0);
    _animator.SetFloat("Y", -1);
  }

  /// <summary>一定時間ごとに呼ばれるメソッドです。</summary>
  void FixedUpdate()
  {
    // キーボードの入力方向を取得
    var move = GetMove();

    if (move != Vector2.zero)
    {
      // 入力されている場合はアニメーターに方向を設定
      _animator.SetFloat("X", move.x);
      _animator.SetFloat("Y", move.y);

      // 入力した方向に移動
      transform.Translate(move * 0.2f);
    }
  }

  /// <summary>キーボード入力による移動方向を取得します。</summary>
  /// <returns>キーボード入力による移動方向。</returns>
  private Vector2 GetMove()
  {
    Vector2 move = Vector2.zero;
    if (Keyboard.current.upArrowKey.isPressed)
    {
      move += new Vector2(0, 1);
    }
    if (Keyboard.current.downArrowKey.isPressed)
    {
      move += new Vector2(0, -1);
    }
    if (Keyboard.current.leftArrowKey.isPressed)
    {
      move += new Vector2(-1, 0);
    }
    if (Keyboard.current.rightArrowKey.isPressed)
    {
      move += new Vector2(1, 0);
    }

    // 入力した値がある場合は正規化して返す
    return move == Vector2.zero ? move : move.normalized;
  }
}

以下是每個部分的說明。

// あらかじめ Animator コンポーネントを持っておくようにする
private Animator _animator;

// 最初のフレーム更新の前に開始が呼び出されます
void Start()
{
  // オブジェクトに紐付いている Animator を取得する
  _animator = GetComponent<Animator>();

  // 最初の向き (下) を設定する
  _animator.SetFloat("X", 0);
  _animator.SetFloat("Y", -1);
}

Start首先，獲取方法中的Animator元件。 Update這將在 中使用，因此請提前準備好。

Animator.SetFloat 該方法可以為指定的參數名稱設置一個值。 在動畫設置中，我們根據 X 和 Y 值設置要使用的動畫。 如果設置 X 和 Y 參數的方向，則動畫將沿該方向執行。 在初始狀態下，我們希望面朝下，因此我們指定 （X： 0， Y： -1）。 順便說一句，請注意參數名稱區分大小寫。

/// <summary>一定時間ごとに呼ばれるメソッドです。</summary>
void FixedUpdate()
{
  // キーボードの入力方向を取得
  var move = GetMove();

  if (move != Vector2.zero)
  {
    // 入力されている場合はアニメーターに方向を設定
    _animator.SetFloat("X", move.x);
    _animator.SetFloat("Y", move.y);

    // 入力した方向に移動
    transform.Translate(move * 0.2f);
  }
}

FixedUpdate 在該方法中，我們定期檢查鍵盤的輸入狀態，並在有輸入時進行處理。

GetMove 該方法旨在將方向作為鍵盤輸入返回。 處理內容基於鍵盤輸入提示中描述的內容，因此我將省略它。

當有鍵盤輸入時， Animator.SetFloat 設置方法的方向。 這將啟用您移動方向的動畫。 transform.Translate 之後，我們使用 The Method 移動物件。

創建文稿后，將其附加到角色物件。

執行

這樣就完成了整個過程。 嘗試運行遊戲並按鍵盤上的游標鍵來移動它。 如果角色沿您按下的方向移動，並且行走動畫移動，而圖形將方向更改為您面對的方向，則您就完成了。