【Unity中級者向け】Animator応用編②｜2D Blend Treeで前後左右の移動アニメーションを切り替える

ファイブボックス

2026年9月25日 15:06

前回は、1D Blend Treeを使って、Speed の値に応じてIdle・Walk・Runを切り替えました。

今回は、横方向と前後方向の2つの値を使います。キャラクターが前へ進む、後ろへ下がる、左右へ移動する。それぞれの動きに合ったAnimationClipを、1つのBlend Treeで扱ってみましょう。

今回使用する素材には、Idleと8方向のWalkが揃っています。まずは前後左右の4方向で仕組みを確認し、最後に斜め方向を追加します。

今回の完成形
キャラクターの向きは固定したまま、W・A・S・Dキーで前後左右に移動します。キーを離すとIdleに戻り、斜めに入力すると斜め歩きのアニメーションが再生されます。

Animator 応用編【全5回】

Blend Tree入門 ― Idle / Walk / Runを滑らかにつなぐ
2D Blend Tree ― 上下左右の移動アニメーション
Animator Layer / Avatar Mask ― 上半身だけ別アニメーション
Animator Override Controller ― キャラごとにモーションを差し替える
StateMachineBehaviour ― Stateの開始・終了に処理を入れる

1D Blend Treeと2D Blend Treeの違い

前回の1D Blend Treeでは、アニメーションを選ぶ値は Speed の1つでした。

今回は次のように値を決めます。

MoveX：左が -1、右が 1
MoveY：後退が -1、前進が 1
両方 0：停止

ここでいう「前後左右」は、キャラクターが向いている方向を基準にした移動方向です。キャラクターを回転させて常に前へ歩かせる操作ではなく、前を向いたまま横歩きや後退をさせます。

今回使うAnimationClip

素材から、最初に以下の5つを使います。

ファイル名は .fbx ですが、UnityではFBXを展開すると、その中のAnimationClipを選べます。
下の図のように、対象のAnimationClip を選択して複製（Ctrl＋D）して、一つのフォルダにまとめておくと管理しやすいかもしれません。

Blend TreeのMotion欄には、そのAnimationClipを登録します。

ステートとAnimationClipは別物です。
今回Animatorに作るのは、Blend Treeのステート1個。
上の5つは、そのBlend Treeの中に登録するAnimationClipです。
Idle用・前進用・左移動用と、ステートを5個作るわけではありません。

AnimatorControllerを作る

今回新たに AnimatorController を用意します。
Projectウィンドウで右クリックして、
Create → Animation → Animator Controller を選択します。

名前は、Player2DAnimator としておきます。
※任意の名前でOKです。

Parameterを作る

Animatorウィンドウの Parameters で、Float型の Parameter を2つ作成します。

MoveX
MoveY

名前の大文字・小文字は、あとで書くスクリプトと一致させてください。

2D Blend Treeを作る

Animatorウィンドウで右クリックし
Create State → From New Blend Tree
を選びます。
作成したステートには、例えば Movement と名前を付けましょう。

Movement ステートをダブルクリックすると、Blend Treeの中に入れます。Inspectorでは次のように設定します。

Blend Type : 2D Simple Directional
Parameter : MoveX / MoveY

2D Simple Directional は、前進・後退・左移動・右移動のように、異なる方向のアニメーションを組み合わせるための方式です。今回登録するのは、停止用のIdleと、各方向のWalkです。

① 最初の行にIdleを登録する

Inspectorの Motion 欄には、最初から None (Motion) という行があります。この行の右にある小さな丸いボタンを押して、Idle01 のAnimationClipを選びます。

同じ行の Pos X と Pos Y は、どちらも 0 にします。

これは「左右にも前後にも動いていない＝停止している」という意味です。

② 「＋」で前進用の行を追加する

Motion 欄の右下にある 「＋」 を押し、Add Motion Field を選びます。新しくできた None (Motion) の行に Walk01_Forward を登録してください。

前進するときは、前後方向を表す MoveY を 1 にします。

③ 同じ手順で、残りの方向も追加する

「＋」で行を1つずつ増やし、後退・左移動・右移動のClipも登録します。

Pos X は左右、Pos Y は前後を表します。左と後ろはマイナス、右と前はプラスです。

5行の登録が終わっても、Animatorウィンドウ中央の Blend Tree ノードは1つのままで正解です。5つのClipは、そのノードを選んだときにInspectorへ表示されるMotion一覧の中に入っています。

BlendTreeはこのような状態です。

Animator上で動きを確認する

スクリプトを書く前に、Blend Treeのプレビューで動きを確認してみましょう。

Blend Treeのグラフ内でプレビュー位置を中央から上下左右へ動かすと、その位置に応じて再生されるモーションが変わります。

例えば、中央ならIdle、右側なら右移動です。中央と右側の途中では、Idleと右移動が混ざります。

この段階でClipの向きが想定と違って見えたら、Forward や Left というファイル名だけで判断せず、実際のキャラクターの動きを確認してください。素材の向きやモデルの設定によって、見え方が異なる場合があります。

キー入力をAnimatorへ渡す

次に、上下左右、または W・A・S・Dキーの入力を MoveX と MoveY に渡します。

public class Player2DController : MonoBehaviour
{
    float moveSpeed = 3f;   // 移動速度

    Animator animator;      // Animatorコンポーネントへの参照

    void Awake()
    {
        animator = GetComponent<Animator>();    // Animatorコンポーネントを取得
    }

    void Update()
    {
        float stepX = Input.GetAxis("Horizontal");  // 左右方向の入力を取得
        float stepY = Input.GetAxis("Vertical");    // 前後方向の入力を取得
        animator.SetFloat("MoveX", stepX);  // パラメータに左右方向の入力を設定
        animator.SetFloat("MoveY", stepY);  // パラメータに前後方向の入力を設定
        // 移動方向を計算
        Vector3 direction = transform.right * stepX + transform.forward * stepY;
        // 移動処理
        transform.position += direction.normalized * moveSpeed * Time.deltaTime;
    }
}

このスクリプトを、Animatorが付いているキャラクターに追加します。

stepX と stepY は、キー入力から取得した値です。
この値をAnimatorの MoveX と MoveY に渡して、再生するアニメーションを決めます。

キャラクターを実際に動かすときは、direction.normalized で移動方向の長さを揃えています。
これにより、WとDを同時に押しても、斜め移動だけが速くなることを防げます。

この例ではスクリプトでキャラクターの位置を動かすため、Animatorの「Apply Root Motion」はオフにしてください。
Rigidbody や Character Controller による移動処理がすでにある場合は、新たな移動処理を重ねず、その処理で使っている方向の値を SetFloat() に渡します。