i-school - 2Dトップビューアドベンチャー 手順8
 3回の手順に分けて、キャラの移動に合わせて、移動アニメを同期させる制御処理を実装します。
例えば、キャラが右方向に移動している場合には、移動アニメも右を向いているものを再生させるようにします。


<実装動画>
動画ファイルへのリンク


 以下の内容で順番に実装を進めていきます。

手順8 ープレイヤーキャラの移動アニメの設定ー
11.Animator ビューにてステートの遷移の設定を行う



 新しい学習内容は、以下の通りです。

 ・アニメーション関連(Animatorビュー、アニメーションのステート、トランジション、パラメータ)
 ・Blend Tree によるプレイヤーの移動と移動アニメーションとの同期処理について



11.Animator ビューにてステートの遷移の設定を行う

1.設計


 作成した移動用のアニメを登録し、条件に合わせて遷移(切り替え)できるように設定を行います。

 アニメーションの設定については奥が深いため、ここでは手順に必要な情報だけをピックアップして記述しています。

 また、Unity には Animator と Animation という機能があり、名前は似ていますが、異なる機能になります。
そういった名称の違いからもわかるように、間違えて覚えてしまうと認識を修正することが大変になりますので、
しっかりとわかるまで復習をして、正しい知識を覚えていってください。



 Unity のゲームオブジェクトは Animator コンポーネントによって、アニメーションの設定を行っています。
アニメーションの設定を行っている情報を Animation Controller といいます。
これは、Animator コンポーネントの Controller プロパティに設定をすることで、その Controller の情報が適用されます。

 1つ1つのアニメーションの情報は、Animation Clip という情報になります。
この情報を State という部品に割り当てることによって、再生するアニメーションの設定が行えます。

 State 同士は矢印によってつなげていくことができます。この矢印をトランジションといいます。
トランジションのある State 同士のみが遷移を行って、再生するアニメーションが切り替わるようになっています。

 これが一般的なアニメーションの設定です。

 今回はこの方法ではなく、Blend Tree という手法を利用します。

 Blend Tree では、複数の異なるアニメーションの設定を1つの State 内で設定することが出来ます。
そのため、移動のアニメを個別に4つ設定して、それぞれをトランジションでつなげるのではなく、
Blend Tree 内に4つの移動用のアニメを登録し、いずれかの移動用のアニメを再生されるという方法になります。


2.Animator ビューを追加する


 Unityの左上にあるメニューの中から Window => Animation => Animator を選択してください。
SceneビューやGameビューのような Animatorビューがエディターのレイアウト内に追加されます。


Animatorビュー


 
 アニメーションの切り替えの設定は、このAnimatorビューの中で行います
設定を行うためには、対象となるゲームオブジェクトをヒエラルキーで選択している必要があります。

 ヒエラルキーにある Player ゲームオブジェクトを選択した状態にしてください。(インスペクターに表示されている状態)
この状態になると、Player ゲームオブジェクトにアタッチされている、Animator コンポーネント内にある、Controller プロパティの情報が Animator ビュー に表示されます。


Animator コンポーネント



 Animatorビューの操作ですが、マウスのホイールボタンを押しながらマウスを移動させることによって、Animatorビューの中を移動できます。


<手順動画 Animatorビュー内の移動>
https://gyazo.com/510206fa1deadd134b48a20084193633


3.Animatorビューの Parameters で遷移条件を作成する


 アニメのファイルである AnimationClip ですが、こちらは State という情報の Motion に1つだけ登録することが出来ます。
この State 間を遷移して、アニメの切り替えを行っています。

 このとき、State には遷移するための条件を設定しておくことが出来ます。(無条件も可能です)
例えば、どういった状態になったときに、このアニメの再生をしてほしい、という情報を Animator ビュー内で事前に登録しておくことにより、
その条件式をスクリプト内で制御し、アニメの再生と同期させることが出来るようになっています。

 今回は、キャラの移動のキー入力に合わせて、アニメの再生を制御する設計にしますので、
キー入力と同じように、X 軸と Y 軸の情報を条件式として用意するようにします。

 条件式として、Animator では、Parameter(パラメータ) を作成して、設定することが出来ます。。

 パラメータとはアニメーションの再生の状態を設定するものです。4つの種類があり、今回は Float 型を新しく作成します。
Animatorビューのすぐ下に Parameters という項目がありますので、その中にあるプラスボタンを選択し、Float を選択してください。


Parameters画像



<手順動画 パラメータの登録>
https://gyazo.com/63c7dac793d657c067a1b27afdad7c81


 Parametersの中に新しいパラメータが作成されますので、名前を Look X に変更してください。
Float型の場合、名前の右側に 0.0 という数字が表示されます。(この部分が型によって変化し、種類の特定が容易になっています)

 同じ手順で、もう一度プラスボタンを選択し、同じく Float を選択してください。
Parametersの中に新しいパラメータが作成されますので、名前を Look Y に変更してください。


Parametersにパラメータを追加した後の画像(Speed は無視してください)



4.Animator ビューにて、Blend Tree の初期設定を行う


 Animator ビュー内で右クリックをしてメニューを開き、Create State => From New Blend Tree を選択します。
新しい State として Blend Tree が作成されます。選択するとインスペクターから名称が変更できますので、Moving に変更してください。


Animator ビュー



インスペクター画像



 Entry の State を選択して、右クリックをしてメニューを開き、Set StateMachine Default State を選択します。
ゲーム開始時の初期のアニメの再生 State を設定できますので、作成した Moving に矢印を繋げて左クリックして決定してください。

 これでゲーム開始と同時に Blend Tree 内の移動アニメが再生されるようになります。


Animator ビュー




 
 Blend Tree をダブルクリックしてください。Animator ビューの内容が Blend Tree の詳細設定を行うことができる状態に切り替わります
前の画面に戻る場合には、左上にある Base Layer を押してください


Blend Tree の編集画面


 
 現在、Blend Tree の中に Look X のみが表示されていると思います。
これは Blend Type という設定から変更することが出来ます。

 インスペクターの上段にある Blend Type を 2D Simple Directional に変更してください。
すぐ下の Parameters が1つから2つに変更されます。
両方とも Look X になっていますので、右側を Look Y に変更してください。
この状態になると、Animator ビュー内の Blend Tree の項目が Look X と Look Y の2つに変更になっています。

 この2つの値の情報を利用して、アニメの再生を切り替えるようにします、という設定になります。
 

Animator ビュー



5.Animator ビューにて、Blend Tree を利用してアニメーションとアニメーションを切り替える設定を行う


 Blend Tree では通常のトランジション(遷移)のように、矢印で State 同士をつないでアニメの再生切り替えを設定しない代わりに
Blend Tree 内で設定をした Parameter(Look X と Look Y) の値がどの値になっているかによって、アニメの再生の切り替えの設定を行うことが出来ます。


 Blend Tree のインスペクターにある Motion の項目が List is Empty になっていると思います。
ここに再生を行いたい複数のアニメを登録し、再生するための条件式を設定出来ます

 Motion 内の右下にあるプラスボタンを押してください。メニューが表示されますので、Add Motion Field を選択します。
Animation Clip を選択するウインドウが開きますので、player_front のAnimation Clip を選択してください。
これで Motion 内に再生するアニメの候補として登録されます。Animator ビュー内にも、Blend Tree とつながる State が追加されます。


<手順動画 Motion に AnimationClip を追加する>
動画ファイルへのリンク


Blend Tree インスペクター画像



Animation ビュー画像




 追加された Motion に条件を設定します。
このときに利用するのが、Parameter である Look X と Look Y の情報になります。
Blend Tree では、この Parameter の値が、Motion 内の Pos X と Pos Y と同期する設定になっています

 新しく追加した player_front の設定を、Pos X = 0、Pos Y = -0.5f に設定してください。
キー入力のうち、下方向の移動は Y 軸をマイナス方向の値が取得できますので、Y 方向の値と同期するようにします。


Blend Tree インスペクター画像



 では、残りの3つの Animation Clip についても、Motion 内に追加していきましょう。
追加する順番は任意です。下記の画像のように、Pos X と Pos Y を設定してください。
各方向と値が同期することが大切です。


Blend Tree インスペクター画像



Animator ビュー画像



 2つ以上の Motion が追加されると、インスペクターの Parameter の下に、Blend する値の位置が青い菱形で表示されます。
現在は4つの点が、上下左右に1つずつ存在している状態になっているはずです。



 では、Blend Tree による、アニメの制御を実際に試してみましょう。
インスペクターの一番下にある Blend Tree をクリックして、アニメのプレビューを表示します。

 再生ボタンを押してください。正面を向いているアニメが再生されますので、
Parameter の下にある4つの点の中央にある赤い丸をドラッグアンドドロップして、いずれかの頂点に移動させてみてください。
その方向のアニメの再生に切り替わります。


<Blend Tree の機能の確認>
動画ファイルへのリンク


 これが Blend Tree を利用したアニメの制御処理になります。
Animator ビューも一緒に確認しておいてください。ドラッグアンドドロップに合わせて、Look X と Look Y の値が動いていることが分かります。

 今回は、Blend Tree 内の Parameter の設定として、Motion 内の Pos X と Pos Y に入る値を Look X と Look Y の値に指定しています。
そのため、キャラの移動した際のキー入力の値を、この Look X と Look Y に割り当てることが出来れば、スクリプトから、この Blend Tree 内のアニメの制御が可能になります。

 次の手順では、このロジックを使った遷移の制御を、スクリプト使って切り替えるようにして、キャラの移動と移動のアニメーションとを紐づけしていきます。



 以上でこの手順は終了です。

 次は 手順9 −プレイヤーキャラの移動アニメの同期− です。