見出し画像

【Unity中級者向け】Animator応用編①｜Blend TreeでIdle・Walk・Runを滑らかにつなぐ

ファイブボックス

これまでのAnimator基礎編では、

  • State

  • Parameter

  • Trigger

  • Any State

  • Transition

  • Animation Event

など、Animatorを扱うための基本的な機能を確認してきました。
今回からは、これらの知識を使いながら、もう一歩進んだAnimatorの機能を学んでいきます。

Animator応用編、第1回のテーマは「Blend Tree」です。
Blend Treeを使うと、Idle → Walk → Run　のような複数のAnimationを、キャラクターの移動速度に合わせて滑らかにつなぐことができます。

今回は2Dではなく、3DのHumanoidキャラクターを使います。

サンプルでは無料の3DキャラクターAssetをUnityへ取り込み、そこへAnimationを設定し、最後にBlend Treeを使ってIdle・Walk・Runを切り替えてみます。

Animator 応用編【全5回】

  1. Blend Tree入門 ― Idle / Walk / Runを滑らかにつなぐ

  2. 2D Blend Tree ― 上下左右の移動アニメーション

  3. Animator Layer / Avatar Mask ― 上半身だけ別アニメーション

  4. Animator Override Controller ― キャラごとにモーションを差し替える

  5. StateMachineBehaviour ― Stateの開始・終了に処理を入れる


今回作るもの

今回の完成形は次のようになります。

  • 停止している場合は、Idle

  • 移動すると、Walk

  • Shiftキーを押しながら移動すると、Run

ただし、Idle → Walk → Run とAnimationが突然切り替わるのではありません。

今回使用するBlend Treeでは、

Idle
↓
Idle + Walk
↓
Walk
↓
Walk + Run
↓
Run

のように、複数のAnimationを混ぜながら切り替えることができます。

Blend Treeとは？

これまでAnimatorでは、Animation Clip ごとに State を作ってきました。

たとえばIdleとWalkを切り替える場合は、
[ Idle State ] → Transition → [ Walk State] 
という構成でした。

Idle・Walk・Runの3種類を使う場合は、
Idle  ⇔ Walk ⇔ Run
のように複数のStateとTransitionを作ることもできます。

もちろん、この方法でもAnimationを切り替えることはできます。
しかし、移動速度によって似たAnimationを切り替える場合には、もっと便利な方法があります。

それが、Blend Tree です。

Blend Treeは、Parameterの値に応じて、複数のAnimation Clipを混ぜながら再生する仕組みです。

3Dキャラクターを用意しよう

今回は、Animator応用編で使用するキャラクターとして、Unity Asset Storeで配布されている無料Asset、
GanzSe FREE Modular Character - Fantasy Low Poly Pack
をお借りして使用します。

ファンタジー系のローポリ3Dキャラクターで、今回だけでなく、今後のAnimator応用編でも使用していきます。

今回から第5回まで、基本的には同じキャラクターを育てていく形で進めます。

Asset StoreからAssetを追加する

Unity Asset Storeで「GanzSe FREE Modular Character」と検索します。
対象のAssetを開いたら、ご自身のプロジェクトに取り込んでみてください。

Asset Storeの素材を使用するときは、いきなりPrefabをSceneへ入れるのではなく、まずフォルダの中身を確認してみましょう。

Assetによって構成は異なりますが、3DキャラクターAssetの場合、

  • Prefab

  • Model

  • Material

  • Texture

  • Demo

  • Scene

などが含まれていることがあります。
今回特に確認したいのは、実際にゲームへ配置するキャラクターのPrefabまたはModelです。

Demo Sceneが含まれている場合は、一度開いてみるのもおすすめです。
どのPrefabを使用すればよいか、どのような見た目になるかを確認できます。

今回は、新しいSceneへキャラクターだけを配置して進めます。

Render Pipelineについて

3D Assetを使用するときに、もう一つ注意したいのが、Render Pipeline　です。
Unityでは主に、

  • Built-in Render Pipeline

  • URP

  • HDRP

などがあります。
AssetとProjectで使用しているRender Pipelineが合っていないと、Materialがピンク色になる など、正しく表示されないことがあります。

今回使用するAssetは複数のRender Pipelineへ対応していますが、別のAssetを使用する場合は、Asset Storeの「Render pipeline compatibility」を確認する習慣をつけておきましょう。

Animatorとは直接関係ありませんが、Asset Storeの3D素材を使うときには非常に重要なポイントです。

キャラクターをSceneへ配置する

Assetの中から使用するキャラクターを見つけたら、HierarchyまたはSceneへドラッグします。

今回は説明しやすいように、キャラクターのGameObject名を「Player」として、座標を全て 0 でリセットしておきます。

さらに地面として、Hierarchy 右クリック 
3D Object  →  Plane
からPlaneを作っておきます。

Main Cameraもキャラクターが見える位置へ調整しておきましょう。

Humanoidになっているか確認しよう

今回のシリーズでは、Humanoid という仕組みが重要になります。
Humanoidとは、人型キャラクターの骨格をUnity共通の形式として扱う仕組みです。

  1. Projectウィンドウからキャラクターの Model を選択

  2. Inspector で Rig タグを確認

  3. Animation Type が Humanoid になっているのを確認
    別のTypeが指定されていたら、Humanoid に変更して Apply を押す

Humanoidにしておくことで、別のAssetから入手した Humanoid用Animationを、このキャラクターでも利用できるようになります。

これは今回だけでなく、この先に解説する Animator応用編④ で扱う、Animator Override Controller などでも重要になってきます。

Animationも用意しよう

キャラクターを用意しただけでは、Idle・Walk・Runは再生できません。
そこで今回はAnimation素材として、Human Basic Motions FREE を使用します。

こちらも Unity Asset Store から無料で追加できます。

先ほどと同じように、Projectへ取り込みます。

使用するAnimation Clipを選ぼう

今回使用する Human Basic Motions FREE には、あらかじめたくさんのAnimation Clipが収録されています。

今回は、その中から次の3つを使用します。

  • HumanM@Idle01

  • HumanM@Walk01_Forward

  • HumanM@Run01_Forward

それぞれ、

  • HumanM@Idle01　⇒　Idle

  • HumanM@Walk01_Forward　⇒　Walk

  • HumanM@Run01_Forward　⇒　Run

として使用します。

Projectウィンドウで Human Basic Motions FREE のフォルダを開き、これらのAnimationを探します。
FBXファイルの左側にある三角形をクリックすると、中に入っているAnimation Clipが表示される場合があります。

別AssetのAnimationを使える理由

ここは3Dキャラクターを初めて扱う場合、少し不思議に感じるかもしれません。
今回、GanzSeのキャラクターに対して、別のAssetに入っているAnimationを使用します。
これができる大きな理由が、Humanoid です。

どちらもHumanoidとして設定されていれば、Unityが、

  • 頭

  • 腕

  • 脚

  • 胴体

などの骨格を対応させてくれます。
この仕組みを、Retargeting（リ ターゲティング） と呼びます。

3Dゲーム制作では非常によく使われる仕組みなので、覚えておきましょう。

Animator Controllerを作る

それでは Animator を作っていきます。

Projectウィンドウで右クリックして、
Create → Animation → Animator Controller を選択します。

名前は、PlayerAnimator としておきます。

作成したPlayerAnimator を Player の、Aniamtorコンポーネントの Controller にセットします。

Animatorコンポーネントが付いていない場合は、
Add Component →  Animator
から追加します。

Blend Treeを作る

PlayerAnimatorをダブルクリックしてAnimatorウィンドウを開きます。

何もない場所で右クリックして、
Create State → From New Blend Tree


新しくBlend TreeのStateが作成されます。
名前を「Movement」としておきましょう。

このMovementをDefault Stateにします。

Speed Parameterを作る

今回のBlend Treeでは、キャラクターの移動速度を使ってAnimationを切り替えます。

AnimatorウィンドウのParametersから、
+  → Float を選択します。
名前を「Speed」とします。

今回は、

  • Speed = 0　⇒　Idle

  • Speed = 1　⇒　Walk

  • Speed = 2　⇒　Run

という形にします。

Blend Treeを開く

Movementをダブルクリックして、Blend Tree の編集画面へ移動します。
Inspectorを確認すると、Blend Type があります。

今回は「1D」を使用します。
Parameterには「Speed」を指定します。

1D Blend Treeとは？

今回使用する1D Blend Treeでは、1つのParameter（Speed）を使ってAnimationを切り替えます。

たとえば、

Speed

0              1              2
│--------------│--------------│
Idle           Walk           Run

という形です。
Speedという1本の数値の変化だけを見るため、「1D」となります。

ちなみに次回は、

  • Horizontal

  • Vertical

という2つのParameterを使用する、2D Blend Tree を扱います。
ここでいう「2D」は、2Dゲームという意味ではありません。
2つの値を使ってAnimationをBlendするという意味です。

Idle・Walk・Runを登録する

Blend Tree の Inspector右下にある 「＋」 をクリックし、
Add Motion Field を選択します。
今回はIdle・Walk・Runの3つのAnimationを使用するため、同じ操作を3回行います。

Motion欄が3つ作成されたら、それぞれに上で確認した 
Idle・Walk・Run の Animation Clip を設定します。

今回は分かりやすく、

Idle : 0
Walk : 1
Run  : 2

となるようにThresholdを設定します。

必要に応じて、

Automate Thresholds

をOFFにして手動で設定してください。

Thresholdとは？

Thresholdは、どのParameterの値で、そのAnimationを再生するか を決める値です。
今回なら、以下の状態です。

  • Speedが 0 ならIdle。

  • Speedが 1 ならWalk。

  • Speedが 2 ならRun。

では、Speed = 0.5 の場合はどうなるのでしょうか。
ここが Blend Tree の特徴となる部分です。

0.5 の場合、Idle + Walk を混ぜたAnimation になります。

同じように、Speed = 1.5 なら、Walk + Run を混ぜて再生します。

Previewで確認してみよう

Blend Treeでは、Unityを実行しなくてもPreviewで動きを確認できます。
InspectorのPreviewを表示して、Speedの値を動かしてみましょう。
Speed を0から2まで徐々に変化させていってみましょう。

Animationが、Idle　⇒　Walk　⇒　Run　へ滑らかに変化することを確認できます。

Blend Tree を作ったときは、まず Preview で確認しておくと設定ミスを見つけやすくなります。

C#からSpeedを変更しよう

Blend Treeができたので、今度はゲーム中にSpeedを変更してみます。

Projectウィンドウで、スクリプトファイル：PlayerController を作成します。

次のように記述します。

public class PlayerController : MonoBehaviour
{
    public float walkSpeed = 2f;    // 歩行速度
    public float runSpeed = 5f;     // 走行速度

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

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

    void Update()
    {
        float speed = 0f;   // 現在の速度を初期化

        if (Input.GetKey(KeyCode.W))    // Wキーが押されている場合
        {
            speed = 1f;     // 歩行速度を設定

            float moveSpeed = walkSpeed;    // デフォルトは歩行速度

            if (Input.GetKey(KeyCode.LeftShift))  // 左Shiftキーが押されている場合
            {
                speed = 2f;             // 走行速度を設定
                moveSpeed = runSpeed;   // 走行速度に変更
            }
            // 移動方向を計算
            transform.Translate(
                Vector3.forward * moveSpeed * Time.deltaTime
            );
        }

        animator.SetFloat("Speed", speed);  // AnimatorのSpeedパラメータを更新
    }
}

作成したPlayerControllerをPlayerへアタッチします。

コードの確認

private Animator animator;

で Animator を入れる変数を用意しています。

Startでは、

animator = GetComponent<Animator>();

として、Playerに付いているAnimatorを取得しています。

Updateの最初で、

float speed = 0f;

としています。
何もキーを押していない場合は、

Speed = 0

になるため、Idle が再生されます。

次に、

if (Input.GetKey(KeyCode.W))

でWキー の入力を確認しています。
Wキーを押している場合は、

speed = 1f;

と指定しているため、Blend Treeでは、Walk が再生されます。
同時に、

transform.Translate(
    Vector3.forward * moveSpeed * Time.deltaTime
);

でキャラクターを前方向へ移動させています。
今回はBlend Treeの学習が目的なので、移動処理はシンプルなものにしています。

Wキーを押している状態で Left Shift も押している場合は、

if (Input.GetKey(KeyCode.LeftShift))

が true になり、

speed = 2f;

と指定しています。
そのため Blend Tree では、Run が再生されます。

最後に、

animator.SetFloat("Speed", speed);

を実行しています。
これによってC#側で決めた speed の値が Animator の、Speed Parameterへ送られます。

切り替わりの速さの補正

ここまででもBlend Treeは動作します。
ただし今回のコードでは、

Speed = 0
↓
Speed = 2

のように値そのものは一瞬で変化しています。
Animator.SetFloat() には次のような書き方があります。

animator.SetFloat(
            "Speed",            // Animatorのパラメータ名 
            speed,              // 現在の速度を設定
            0.1f,               // 変化のスムーズさを指定
            Time.deltaTime      // フレームレートに依存しない変化を実現
        );

このようにすると、Speedを目標値へ徐々に近づけることができます。

この0.1fは、Damp Time と呼ばれる値です。
値を急に変更するのではなく、少し時間をかけて目標値へ近づけます。

たとえば、
0 ⇒ 0.4 ⇒ 0.8 ⇒ 1.2 ⇒ 1.6 ⇒ 2
のように変化します。

するとBlend Treeでは、
Idle ⇒ （Idle + Walk） ⇒ Walk ⇒ （Walk + Run） ⇒ Run
というAnimationを通りながら変化します。

TransitionとBlend Treeの違い

ここで、これまで使ってきたTransitionとの違いを整理しておきましょう。

Transitionは、別のStateへ移動する仕組みです。

一方、Blend Treeは、1つのStateの中で複数のAnimationを混ぜる仕組みです。

どちらか一方だけを使うわけではありません。

実際のゲームでは、

  • Movement

  • Attack

  • Jump

  • Damage

などのStateを作り、Movement の中だけ、

  • Idle

  • Walk

  • Run

をBlend Treeにする、といった使い方もできます。

Blend Treeは便利ですが、すべてのAnimationをBlend Treeへ入れる必要はありません。

特に、

  • Attack

  • Jump

  • Damage

  • Death

のようなAnimationは「ある動作から別の動作へ切り替える」という意味合いが強いため、通常のStateとして扱うことも多くあります。

一方、

  • Idle

  • Walk

  • Run

のように、同じ種類の動作が連続的に変化する場合はBlend Treeが非常に便利です。

今回のまとめ

今回は、Animatorの応用機能、Blend Treeを使ってIdle・Walk・Runを切り替えました。

次回は2D Blend Tree

今回は、Speed という1つのParameterを使った、1D Blend Tree を使用しました。

しかし、キャラクターを自由に操作するゲームでは、
前 / 後 / 左 / 右
へ移動させたいことがあります。

そこで次回は、

  • Horizontal

  • Vertical

という2つのParameterを使用する、2D Blend Tree を使います。

なお、2D Blend Treeの「2D」は、2Dゲームという意味ではありません。
3Dキャラクターをそのまま使用して、前後左右の移動Animationを滑らかにつないでみましょう。


こちらはUnity初心者向けの記事をテーマ別にまとめています。
▼ Unity初心者向け記事まとめはこちら

こちらのマガジン「ミニゲーム作成講座　全8回セット」でもシーンの切り替えなどを活用して、初心者でも知識ゼロから作れるミニゲーム作成講座を紹介しています。

さらにステップアップの「スマホで遊ぶジャンプゲーム　8回セット」のマガジンもぜひご活用ください。

ファイブボックスでは、スクラッチやUnityの個別指導のオンラインレッスンを行っています。
ご興味のある方は当サイト、オンラインレッスンから、無料体験授業へお問い合わせ下さい。

いいなと思ったら応援しよう！

ファイブボックス よろしければ応援お願いします！ いただいたチップはクリエイターとしての活動費に使わせていただきます！