i-school - 3Dグラフィック 2D横スクロールアクション 手順9
 2回の手順に分けてプレイヤーの移動時のアニメの同期の処理を実装します。

 今回の手順ではアニメーションの遷移設定を行い、次の手順ではスクリプトを利用して、プレイヤーの移動に合わせて、移動アニメを同期させる制御処理を実装します。


<実装動画(手順10まで実装したときのもの)>
動画ファイルへのリンク



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

手順9 ープレイヤーの移動方向と移動アニメの同期処理の実装ー
14.キャラの移動アニメを設定する
15.Animator ビューにてステートの遷移の設定を行う



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

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



14.移動アニメの作成・設定を行う

1.設計


 プレイヤー用のキャラは移動できるようになりましたが、現在はアニメーションの設定がないため、立った状態のキャラが移動するだけになっています。

 3Dのゲーム画面にあるキャラのモデルにアニメーションを適用する場合には、事前に AnimationClip というアニメーションのファイルを作成しておき、
それを移動に合わせて再生することによってキャラの移動に合わせてアニメーションを同期させます。
 
 その際には Blend Tree という Unity の持つアニメーションの機能を利用して、移動している状態と同期できるように設定を行います。

 ゲームではこのように、プレイヤーの操作状況を反映して、キャラの行動も変化しますので、アニメーションの再生もそれに同期するように制御が必要になります

 制御命令についてはスクリプトにて制御します。こちらは次の手順で実装を行いますので、この手順では移動アニメの作成と、その設定を行います。


2.移動アニメの作成を行う


 最初からアニメーションを作成することも可能ですが、今回は Unitychan のアセットに入っているアニメーションを利用することにします。

 アニメーションには AnimationType という設定があり、この設定が Humanoid になっているものであれば、大体の3Dのモデルはアニメーションします。
つまり、Unitychan 以外のアセットにあるアニメーションであっても、AnimationType の設定が Humanoid であれば、別のモデルにも流用できます。



AnimationClip の場所



AnimationClip の AnimationType



AnimationClip のインスペクター画像



 こちらの AnimationClip を利用していきます。


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

1.設計


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

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

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



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

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

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

 これが一般的なアニメーションの設定ですが、今回はこの方法ではなく、Blend Tree(ブレンドツリー) という手法を利用します。

 Blend Tree では、複数の異なるアニメーションの設定を1つの State 内で設定することが出来ます。


2.Animator ビューを追加する


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


Animatorビュー(表示されている情報は異なります)


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

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


Animator コンポーネント



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



3.プレイヤー用のゲームオブジェクトの Animator に AnimatorController を設定する


 プレイヤーに利用しているゲームオブジェクトをヒエラルキーにおいて選択してインスペクターを確認します。

 Animator コンポーネント内に Controller の設定がありますので、こちらに UnityChanLocomotions を設定します。

 この設定を行うことで、アニメーションの遷移(移り変わり)を Animator ビューにおいて設定することが出来ます。


インスペクター画像



 実際に、ヒエラルキーでプレイヤー用のゲームオブジェクトを選択してから、Animator ビューを選択してみてください。
最初から登録されているアニメーションの遷移状態が表示されます。


4.Animatorビューの Parameters で遷移条件を確認する


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

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

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

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


Parameters画像



 今回はこの Parametersの中にある Speed という Float 型のパラメータを利用します。
Float型の場合、名前の右側に 0.0 という数字が表示されます。(この部分が型によって変化し、種類の特定が容易になっています)


Parameters画像



 後程、攻撃やジャンプのアニメーションを設定する際には、この Parameters に情報を追加します。
いまは設定できる場所であることを覚えておいてください。


5.Animator ビューにてトランジションの設定を行う


 プレイヤー用のゲームオブジェクトをヒエラルキーで選択してから、Animator ビューを開いてください。
Animator コンポーネントのアタッチされているゲームオブジェクトを選択していると、Animator ビュー内に AnimatorController の情報が表示されます。

 現在の AnimatorController には UnityChanLocomotions が設定されています。
すでに多くの矢印(トランジション)の設定がありますが、下記の画像のような状態になるように不要な矢印を削除してください。

 トランジションを削除する方法は矢印を選択した状態でキーボードの Delete キーです。


Animator ビュー



 今回はこの状態にすれば完成です。
別の手順でジャンプや攻撃のアニメーションを設定する際には、Animator 内に新しい State(AnimationClip) を追加してトランジション(矢印)でつないでいくことになります。


6.Animator ビューにて、Blend Tree を利用してアニメーションとアニメーションを切り替える設定の確認をする


 今回は用意されている AnimatorController を利用しているため、Blend Tree の機能も最初から設定されています。
今後は自作していく必要もありますので、Blend Tree について確認しておきます。

 Animator ビュー内にある Locomotion をダブルクリックしてください。Blend Tree という機能内に移動します。


Animator ビュー内 Blend Tree



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


Blend Tree インスペクター画像




 Blend Tree では、インスペクターにある Motion に条件を設定します。
このときに利用するのが、Parameter の情報になります。
Blend Tree では、この Parameter の値が Motion 内の各値と同期する設定になっています


Blend Tree インスペクター画像



 なお、Blend Tree の遷移先にも別の Blend Tree を設定することが可能です。
今回の AnimatorController は3つの Blend Tree を利用して移動と待機のアニメーションの遷移を制御しています。

 Runs と Walks の Blend Tree をクリックするとインスペクターの情報が変わりますので、確認しておいてください。



 では、Blend Tree による、アニメの制御を実際に試してみましょう。
Animator ビューの Blend Tree である Locomotion の中にある Speed の部分にあるバーを左右に移動させてみてください。

 一番左側にあるとき、Speed の値は 0、一番右側にあるときは Speed の値は 1 になります。
バーを動かす際に Runs と Walks の Blend Tree を見ていると、バーが左端にあるときは Walks の方が明るくなっており、
バーが右側に近づくと今度は Runs の方が明るくなります。これは Speed の値を自動的に判断して、
Speed(移動速度)の値が一定値高くなると歩くアニメーションから走るアニメーションに切り替わるように制御が設定されています。


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


 これが Blend Tree を利用したアニメの制御処理になります。
インスペクターも確認しておいてください。

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



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

 次は 手順10 −プレイヤーの移動と移動アニメの同期処理の実装− です。