
複数のアニメーションをつなげて再生するにはどうしたら良いですか?

Input Systemを使うと直感的にできるよ!
Input Systemは、ゲームパッド・キーボード・マウス・センサー等の各種入力デバイスからの入力を汎用的・統合的に取り扱うために導入されたUnityの新しい入力システムです。
Unity for Pro
今回は、キーボード操作で複数のアニメーションを連続再生する方法について解説していきます。
▼完成イメージ▼
では、早速始めていきましょう!
プロジェクトは前回の続きから始めていきますので、手順に不安のある方は以下の記事内容を実施してから、戻ってきてください。
ここでは、キャラクターとアニメーションは、mixamoを使用します。
アニメーションのダウンロード
mixamoからお好きなアニメーションをダウンロードします。ここでは、「歩く」→「走る」→「ブレイクダンス」という流れにするために、「歩く」と「走る」を備えたアニメーションをダウンロードします。(ブレイクダンスは前回の記事でダウンロード済み)
mixamoを開き、[Animations]>[Walk(任意)]>[DOWNLOAD]をクリックします。

必要事項を入力し、[DOWNLOAD]をクリックします。

もう一つ、同様の手順でアニメーションをダウンロードします。

アニメーションの設定
Unityにダウンロードしたアニメーションを取り込みます。
[Assets]>[Import New Asset…]をクリックして、先ほどダウンロードをした「〜.fbx」ファイルを選択します。

インポートが完了したら、アニメーションの設定をします。
Projectウインドウのアニメーションを選択し、Inspectorウインドウの[Rig]>[Animation Type]から、プルダウンメニューで[Humanoid]を選択して、[Apply]で確定します。
同様の操作を全てのアニメーションで実施します。(解説では3つ)

次に、アニメーションの設定をしていきます。Projectウインドウのアニメーションを選択し、Inspectorウインドウの[Animation]>[Loop Time]にチェックを入れて、[Apply]で確定します。
同様の操作を全てのアニメーションで実施します。(解説では3つ)

Input Systemのインストール
[Window]>[Package Manager]をクリックします。

[Package Manager]が開きますので、[Packages:Unity Registry]を選択して、検索窓で”inout”と入力します。[Input System]が表示されたら、選択して、[Install]をクリックします。

Warningが表示されますので、内容を確認して、[Yes]をクリックします。

変更を保存する場合は、[Save]をクリックします。

Player Inputの設定
Hierarchyウインドウのキャラクター[Worker]を選択し、Inspectorウインドウの[Add Component]>[Player Input]をクリックします。

Hierarchyウインドウのキャラクター[Worker]を選択し、Inspectorウインドウの[Player Input]>[Create Actions…]をクリックします。

[Assets]の配下を保存先に指定して、名前を入力して[Save]をクリックします。ここでは、[WorkerActions]をという名前を指定しました。

Projectウインドウに作成したPlayer Input[WorkerActions]が配置されますので、Inspectorウインドウの[Player Input]>[Actions]にドラッグして離します。
キーボード操作でキャラクターを操作するため、Default Scheme:[Keyboard&Mouse]に変更します。Behavior:[Invoke Unity Events]に変更します。

ProjectウインドウのPlayer Input[WorkerActions]をクリックすると、Input Actionウインドウが開きます。

[Action]>[Move]>[WASD]を開くと、それぞれの操作と紐づいたキーが表示れされます。

Hierarchyウインドウのキャラクター[Worker]を選択し、Inspectorウインドウの[Events]>[New script]をクリックします。

任意のファイル名を設定して、[Create and Add]で確定します。
ここでは、WorkerController]としました。

追加したScriptを開いてコードを書いていきます。
スクリプトの追加
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.InputSystem;
public class WorkerController : MonoBehaviour
{
Vector2 moveDirection;
public float moveSpeed = 5;
public float maxForwardSpeed = 10;
float desiredForwardSpeed;
float forwardSpeed;
const float stageAceel = 5;
const float stageDecel = 10;
Animator anima;
bool IsMoveInput
{
get { return !Mathf.Approximately(moveDirection.sqrMagnitude, 0f); }
}
public void OnMove(InputAction.CallbackContext context)
{
moveDirection = context.ReadValue<Vector2>();
}
private void Move(Vector2 direction)
{
if (direction.sqrMagnitude > 1f)
direction.Normalize();
desiredForwardSpeed = direction.magnitude * maxForwardSpeed;
float acceleration = IsMoveInput ? stageAceel : stageDecel;
forwardSpeed = Mathf.MoveTowards(forwardSpeed, desiredForwardSpeed, acceleration * Time.deltaTime);
anima.SetFloat("ForwardSpeed", forwardSpeed);
}
void Start()
{
anima = this.GetComponent<Animator>();
}
void Update()
{
Move(moveDirection);
}
}
参考に単一アニメーションで動作するスクリプトも載せていきます。(今回は使用しません)
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.InputSystem;
public class WorkerController : MonoBehaviour
{
Vector2 moveDirection;
public float moveSpeed = 5;
public void OnMove(InputAction.CallbackContext context)
{
moveDirection = context.ReadValue<Vector2>();
}
private void Move(Vector2 direction)
{
transform.Translate
(direction.x * moveSpeed * Time.deltaTime, 0,
direction.y * moveSpeed * Time.deltaTime);
}
void Start()
{
}
void Update()
{
Move(moveDirection);
}
}
イベントの追加
Hierarchyウインドウのキャラクター[Worker]を選択し、Inspectorウインドウの[Events]>[Player]>[Move(CallbackContext)]のオブジェクトの枠にドラッグして離します。
そして、[No Function]>[WorkerController]>[OnMove]をクリックします。

アニメータの設定
前回の続きからやっている場合、アニメータにアニメーションが追加されていますので、削除しておきます。

マウスの左クリックで[Create Sub-State Machine]をクリックします。

Sub-State Machineの名前を任意に設定します。
ここでは、[Movement]とします。

[Movement]が追加されますので、クリックして開きます。

マウスの左クリックから[Create State]>[From New Blend Tree]をクリックします。

From New Blend Treeの名前を任意に設定します。
ここでは、[Move]とします。
[Move]が追加されますので、クリックします。

先ほど、Scriptで指定した”ForwardSpeed”に変更します。

Blend Tree上で、左クリックから、[Add Motion]をします。今回3つのアニメーションを繋げるため、3回同じ作業を繰り返します。

Inspectorウインドウにアニメーションが3つ追加されます。

「mixamo」では、アニメーション名が「mixamo.com」になっていることがありますので、わかりやすい名前に変更します。Projectウインドウのアニメーションを選択し、Inspectorウインドウの[Edit]を選択します。

Inspectorウインドウの[Animation]から、名前を変更して、[Apply]で確定します。


[Blend Tree]をクリックして、Inspectorウインドウでプルダウンメニューから[Motion]を選択します。Parameterの時間も短いようであれば適当に大きくしておきます。解説では25にしています。
動作確認
[▶︎]ゲームプレイをクリックします。
キーボードの[W]をクリックすることで、アニメーションが遷移します。

[歩く]→[走る]→[ブレイクダンス]の3つの動作を連続でつなげることができました。
以上で完成です。お疲れ様でした。