今回は十字キーで入力した方向にキャラクターが向く、歩く（アニメーション処理）に挑戦しました。
Animation と Animation Controller を使います。慣れれば直感的ですが、初心者には少しクセがあるように感じました（本投稿でまとめてあります）。
アニメーション用の画像を分割する処理は省略します。
オリジナリティを出すよりも、まず最低限ゲームとして完成させたいため、画像はAsset Storeから借りたものを使うことにしています（以前の記事を参考：Unity学習#4）
- 構成
- 準備
- Animation Controller を作成する
- Animation Controller の設定
- Animationを作成する
- Animationの設定
- 十字キーをAnimation Controllerに渡す
構成
キャラクターをキー操作に応じてアニメーションを切り替える設定は、
それぞれの方向を向いている時のアニメーション(Animation)、アニメーションの切り替え(Animation Controller/Animator)、アニメーションを切り替えるオブジェクトで構成されます。アニメーションの切り替え(Animation Controller/Animator)の設定画面で、今どの方向を向いているかの状態を、Blend Treeという状態遷移図で管理します。
（図）
キャラクターの十字キーが、アニメーションの切り替えに伝達して、アニメーションが切り替わるまでの伝達経路は、以下のようになっています。
キー操作 → Animation Controller の Parameter → Animation Controller の状態を変更 → 状態毎に割り当てられたモーション (Animation) を再生
（図）
アニメーション(Animation)、アニメーションの切り替え(Animation Controller/Animator) は、それぞれ設定する順番が決まっていて、特にアニメーション(Animation)は、順番を守らないとキャラクターの画像を配置できませんので、その点注意が必要です。最初は手順が多く感じますが、分かってしまえば簡単かつ直感的で、感動すら覚えます。さすがUnityです。
今回は、第2回で作成したPlayerオブジェクトを、人型の画像に差し替えて、十字キーでキャラクターの向きを変えられるようにします。
準備
画像を準備する（省略）
画像を分割する（省略）
Animation Controller を作成する
Animation Controller オブジェクトの作成
(1) Projectウィンドウ > Assets を選択（作成場所の選択）
(2) Project > +▼ > Animator Controller を選択
(3) 新しいオブジェクトに名前を付けます
（今回はPlayer用のアニメーションなので、「Player」と名前を付けました）
（図）
オブジェクトへのアタッチ
(1) Hierarchyウィンドウで、アニメーションを付けたいオブジェクトを選択
(2) Projectウィンドウに作られた先ほどのAnimation Controllerを、Inspectorウィンドウへドラッグ＆ドロップ
（今回は、Animation Controller「Player」を、第2回で作成してあった「Player」オブジェクトにアタッチしました。）
（図）
Animation Controller の設定
Animation Controller は、操作パネルから入力を受け付け、入力によってアニメーションを切り替えるための設定ができます。入力の受付をParameter、アニメーションの切り替えをLayersで行います。
Animatorウィンドウを開く
(1) Projectウィンドウで、先ほど作成したAnimation Controllerオブジェクトを選択
(2) Inspectorウィンドウで、Animation Controllerオブジェクト名の右にある「Open」ボタンをクリック
→Animatorウィンドウが表示されます（すでに表示されていれば何も起こりません）
（図）
入力設定 (Parameterタブ)
(1) Animatorウィンドウから、Parametersタブを選択
(2) ＋▼ > Float を選択
(3) パラメータの名前を入力
（今回は、XとYの入力値を受け取るため、dirX、dirYの2つを作成）
※作成したパラメータは、この後Layersに割り当てる必要があります。
アニメーションの切り替え設定 (Layersタブ)
状態遷移図の作成 (Blend Tree)
(1) Animatorウィンドウから、Layersタブを選択
(2) いくつかの箱が描画されているウィンドウを1回クリックし、ウィンドウが選択された状態にします。
(3) 画面上で右クリック > Create State > From New Blend Tree を選択
→新しい状態「Blend Tree」が作成されました。
※Blend Treeは複数の状態を一つにまとめるための大きい一つの状態定義です。
状態(Blend Tree)に名前を付ける
Blend Tree は、何の状態を表しているか分かるように、名前を付けます。
(1) 新しく作成された Blend Tree を1回クリック
(2) Inspectorウィンドウから名前を変更
（ここでは、Walk としておきます）
状態(Blend Tree)の設定
次に、Blend Treeの設定をします。
(1) 先ほど作成した Blend Tree をダブルクリック
→Animatorウィンドウのパンくずリストが Base Layer > Blend Tree に変わります
（図）
(2) 上記の状態で、Animator画面の余白を１回クリック
→InspectorウィンドウがBlend Treeの設定画面に変わります。
（図）
(3) Blend Type を 2D Simple Directional に変更します
(4) Parameter に、先ほど作成した2つのパラメータを割り当てます
(5) Motion欄 に4つのモーションを追加します：
Motion欄の +▼ > Add Motion Field を選択
これを4回繰り返します。
（図）
Animator の Inspectorウィンドウの設定は一旦ここまでで、次に各方向を向いている時のキャラクターアニメーションを作成していきます。
Animationを作成する
Projectウィンドウで、Assets が選択された状態で、
(1) Projectのすぐ下にある +▼ > Animation を選択します。
(2) 確定する前に、新しいアニメーションの名前を入力します。
（ここでは、正面、背面、右向きの３つのアニメーションを作成しますので、それぞれ、Player_front、Player_back、Player_right と名前を付けました）
（図）
Animationの設定
Animationは、Animation Controller にアサインされていない状態では、アニメーション設定ができません。そのため、先にAnimation を Animation Controller (Animator) と連結します。
Animation を Animation Controller (Animator) と連結する
(1) Projectウィンドウから、先ほどアタッチしたAnimation Controller (Animator) をダブルクリックします。
→ Animatorウィンドウが開きます（すでに開いている場合は何も起きません）
(2) 先ほどと同じ要領で、Blend Treeをダブルクリック > Animatorウィンドウ画面の空白部分を1回クリックし、InspectorウィンドウをBlend Treeの設定画面にします。
(3) 先ほど作成した3つのアニメーション(Animation)を、Blend TreeのMotion欄にドラッグ＆ドロップします。
（今回は、右向きのアニメーションから左向きのアニメーションを作りますので、右向きのアニメーションは2か所にドラッグ＆ドロップします）
（図）
Animation Controller (Animator) に、各 Animation の適用条件を設定する
それぞれのモーションの Pos X、Pos Y を、それぞれ以下の値にします。
| Motion | Pos X | Pos Y |
|---|---|---|
| 正面 | 0 | -1 |
| 背面 | 0 | 1 |
| 右向き | 1 | 0 |
| (左向き) | -1 | 0 |
（図）
動作原理はまだ理解不足なのですが、おそらく先ほどの2つのパラメータの値（ここではdirX、dirY）を使って、PosX、PosYとの距離が一番近い Motion (Animation) を適用する、または一番最後に適用した Motion (Animation) を適用し続ける、といった動きをしているのではないかと思われます。
Animationに画像を配置する
上記の設定が終わると、やっと各 Animation の設定が可能になります。
(1) Projectフォルダから、Animationオブジェクトをダブルクリックします
(2) Animationウィンドウが開きます
(3) タイムラインが書かれたウィンドウ上に、画像を配置します
※配置できるのは、オブジェクト名：Sprite と書かれた枠（少し濃いグレー）の枠内だけです。
※画像は、横▼マークがついているものでも、ついていないものでも配置できます。
(4) 配置が終わったら、Animationウィンドウ内の再生ボタンを押します
→Sceneビュー、またはGameビュー上でキャラクターがアニメーションしているのを確認できます
(5) タイムライン上の配置間隔を調節することで、アニメーションを早くしたり、遅くしたりできます
十字キーをAnimation Controllerに渡す
最後に、十字キーの入力を、Animation Controller の先ほどの2つのパラメータに渡す処理を追加します。
コード
public class Player : MonoBehaviour
{
private float speed;
private Vector2 input, scale;
private Rigidbody2D rigidBody;
private Animator animator;
// Start is called before the first frame update
void Start()
{
speed = 0.1f;
rigidBody = GetComponent<Rigidbody2D>();
animator = GetComponent<Animator>();
Debug.Log("Start");
}
void Update()
{
input = new Vector2(
Input.GetAxis("Horizontal"),
Input.GetAxis("Vertical")
);
}
private void FixedUpdate() {
if (input == Vector2.zero){
return;
}
rigidBody.position += input * speed;
// キャラクターの左右反転
scale = this.transform.localScale;
if( input.x > 0 ){
scale.x = 1;
} else if( input.x < 0 ){
scale.x = -1;
}
this.transform.localScale = scale;
// アニメーション方向決定
animator.SetFloat("dirX", input.x);
animator.SetFloat("dirY", input.y);
}
}
