i-school - 3Dスライダーゲーム 手順16
 この手順ではキャラのジャンプ処理と、ジャンプのアニメーションとを同期させる制御を実装していきます。

 ペンギンのキャラには数種類のアニメーションが用意されており、その中にジャンプした際のアニメーションも含まれています。
ここではジャンプのアニメーションの設定を行い、その制御をスクリプトを利用して行うようにします。
そうすることで、キャラのジャンプ処理に合わせて、ジャンプのアニメーションを再生して同期させることが出来るようになります。


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


手順16 −ジャンプのアニメーションの実装−

27.Animatorビューを操作してキャラのアニメーション制御を設定する
28.スクリプトを使って、ジャンプ処理とジャンプのアニメーションを同期させる


新しく学習する内容


 ・アニメーション関連(Animatorビュー、アニメーションのステート、トランジション、パラメータ)
 ・Animator.SetTrigger メソッド


27.Animatorビューを操作してキャラのアニメーション制御を追加する

1.設計


 Unityにおいてアニメーションの切り替えは Animator ビューを利用して設定を行います。


Animatorビュー画像



 現在使用しているペンギンのキャラにはあらかじめいくつかのアニメーションが用意されていますが、
利用したいアニメーションとアニメーションとの遷移(切り替え処理のこと。トランジションといいます)の設定がありません。
Animatorビューで遷移の処理を設定しておくことにより、スクリプトから命令を出すことでアニメーションの遷移処理を制御することが出来るようになります。

 アニメーションを遷移させるには遷移のための条件を設定します。その条件を満たした場合に、アニメーションが遷移します。
これは Animatorビューでは矢印で表示され、矢印同士をつないでいくことで、アニメーション遷移を設定することが出来ます。


2.Animatorビュー


 まずは Animator ビューをエディターに追加します。

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


Animatorビュー画像



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

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


 Animatorビューの操作ですが、マウスのホイールボタンを押しながらマウスを移動させることによって、Animatorビューの中を移動できます。
またホイールをスクロールさせるとズームインとズームアウトを行うことが出来ます。


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


3.アニメーションのステートとアニメーションクリップ


 Animator ビューの中では、様々なアイコンがあります。これをアニメーションのステート(State)といいます。
アニメーションのステートには、Unityが機能として用意してあるものと、ゲームオブジェクト固有のものがあります。

 Entry というステートと、idle という名前のステートが矢印でつながっていると思います。
Entry はゲームが開始されると一番最初に実行されるステートで、Unity が用意しているステートです。

 現在は idle のステートにつながっていますので、ゲームが実行されると idle のステートに登録されているアニメーションクリップが再生されます。
ステートを選択すると、インスペクターにこのステートの情報が表示されます。

 ステートには1つのアニメーションクリップの情報が登録されています。ステートをダブルクリックするとインスペクターに表示されます。
アニメーションクリップが登録されているのは Motionという部分です。
idleのアニメーションクリップには、idle という名前のアニメーションクリップが登録されています。


idle アニメーションクリップ



 今回はこの idel ステートと jump ステートの2つを利用します。

 滑っている状態には idle ステートを再生し、ジャンプをしたら jump ステートにアニメーションを遷移(せんい)するようにします。
ジャンプが終了したら、再度 idle ステートのアニメーションに遷移するようにします。


jump アニメーションクリップ



フォルダ画像



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


 それでは idle ステートと jump ステートの遷移設定を行います。

 Entry ステートの場合は、ゲームの開始と同時に無条件でアニメーションの遷移が発生しますが、それ以外のアニメーションは
基本的には遷移するための条件を設定し、その条件に合致したときだけアニメーションの遷移(切り替え)を発生させるように設計します。

 
 今回はジャンプ部分を条件として利用しますので、まずは、条件用のパラメータの設定を確認します。

 パラメータとはアニメーションの再生の状態を設定するものです。4つの種類があり、今回は Trigger型を利用します。
Animatorビューのすぐ下に Parameters という項目がありますので、その中にあるパラメータを確認してください。

Parameters



 この中にある jump というパラメータを利用します。
Trigger 型の場合、名前の右側に丸いアイコンが表示されます。(各パラメータの種類によってアイコンが異なります。)






 今回は必要ありませんが、この中に任意のパラメータを追加する場合には、プラスボタンを押して追加します。
以下の例は、bool 型の Prone パラメータを追加した場合です。何か作成してみて、操作方法を覚えておいてください。
不要なパラメータや、間違えてしまった場合には、対象のパラメータの上で右クリックをしてメニューを開き、Deleteで削除できます。


<手順動画 新しいパラメータを追加する>
https://gyazo.com/a0b2545d5c65421ed2dc4c1abdafd73b


Parametersに Prone パラメータを追加した後の画像



5.アニメーションのステートとステートをつなげる遷移条件の設定を行う


 アニメーションの遷移用の条件が用意できました。次は、この条件をアニメーションの遷移の中に設定していきます。


 まずは最初に、不要なステートをすべて削除します。
idle ステートと jump ステート以外のステート選択して右クリックをしてメニューを開き、Delete を選択してください。
(Unity が設定しているステートは削除できません。)
各ステートは左クリックしてドラッグすることで自由な位置に変更できますので、見やすい位置に調整してください。


不要なステート削除後の Animetor ビュー画像




 idle ステートから jump ステートへと伸びている矢印をクリックしてください。


idle => jump トランジション Animatorビュー画像


 
 矢印をトランジションといいます。この作成されたトランジションを左クリックで選択すると、画像のように矢印が青くなり、選択されている状態になります。
またインスペクターに、トランジションの情報が表示されます。


idle => jump トランジション インスペクター画像



 Conditions という項目があり、ここにアニメーションとアニメーションの遷移条件を設定することが出来ます。
Conditionsの右下にあるプラスボタンを押してください。上に項目が追加されて、先ほど作成したパラメータを選択出来るようになります。

 jump を選択して設定してください。(すでに設定済である場合は確認してください)

この条件では、スクリプトから Trigger 型の命令で jump が実行されたとき、ステートを idle => jump に遷移させるというものです。
ここに条件を設定しておくことで、スクリプトから遷移命令を出してアニメーションを遷移させることが出来るようになります。

 また Has Exit Time という項目がありますので、そちらのチェックを外しておいてください
このチェックが外れている場合、遷移前のアニメーションが再生され終わるのを待たずに、遷移先のアニメーションを割り込ませて再生させることが出来ます。
つまり、ジャンプへの遷移命令が来たら、idle アニメーションの途中であってもそのアニメーションを中断して、ジャンプのアニメーションが再生されます。

 チェックが外れていない場合には遷移前のアニメーションが再生されるのを待ってから、遷移先のアニメーションが再生されます。
そのため、ジャンプへの遷移命令が来ても、idle アニメーションを再生してからジャンプのアニメーションが再生されるため、
ジャンプの処理とアニメーションの再生処理がずれてしまい、挙動がちぐはぐになります

 実際にどのような違いがあるか、文章だけではなく実際に自分でチェックのある、なしの両方で確認して学習しておきましょう。



 インスペクターの下には Preview ウインドウがあり、その中には再生ボタンがあります。
再生ボタンを押すことでどのようなアニメーションを再生するか、実際のモデルとなるゲームオブジェクト(今回はペンギン)で確認できます。


Preview ビュー



<手順動画 再生ボタン>
https://gyazo.com/f01c955766206f05818a6f7798c82630

 ここにペンギンのモデルが表示されていない場合には再生を実行できませんので、まずは、ヒエラルキーにある再生したい対象のゲームオブジェクトを
ドラッグ&ドロップして、この Preview ウインドウに設定してください。そうすれば再生ボタンが押せるようになります。


<手順動画 再生したいモデルを登録する>
https://gyazo.com/67a59f8eb3b5d149b2d5863515c30df8



 続いて反対に、jump ステートから idle ステートへと伸びている矢印をクリックしてください。


jump => idle トランジション Animatorビュー画像



 このトランジションを左クリックで選択すると、インスペクターに遷移情報が表示されます。

 Trigger 型でアニメーションの遷移を行った場合、再生処理が終了すると、Conditions の項目に設定がない状態であっても自動的にトランジション先に遷移します。
つまり、矢印さえ設定してあれば、ステートを jump => idle に自動的に遷移してくれます。この場合、スクリプトからの命令も不要です。


jump => idle トランジション インスペクター画像



 こちらは Has Exit Time チェックは入れたままにしておいてください
理由は先ほどの設定と逆に、ジャンプのアニメーションが再生され終わるのを待ってから、アイドルのアニメーションを再生したいためです。


 以上で Animator ビューでの設定は完了です。
最後に、Penguin ゲームオブジェクトの Animator コンポーネントの設定を行います。


6.Penguin ゲームオブジェクトの Animator コンポーネントの確認


インスペクター画像



 作成されているアニメーションクリップには、その場で再生するだけではなくて、再生にあわせてゲームオブジェクトの移動を伴うものがあります。
その場合、アニメーションを再生するたびにキャラが自動的に移動してしまうことになります。
今回のペンギンのアニメーションも、idle アニメーションと jump アニメーションの双方で、この移動を伴うアニメーションになっています。

 スクリプトからのみ移動を制御したい場合、この Apply Root Motion のチェックを外しておくことで、
アニメーション再生時に移動をさせないでアニメーションのみ再生することが出来ます。
ただし、一部のアニメーションクリップはこのチェックを外してあっても強制的に移動するものもありますので、注意してください。


参考サイト
いんでぃーづ 様
Unity : アニメーションとGameObjectの位置を同期させたい時に気をつけること
https://indie-du.com/entry/2016/05/14/095612


 以上で Animatorビューとステート遷移の設定は完了です。
次の手順で、PlayerController スクリプトからこのステート遷移の命令を出せるように処理を追加します。


7.ゲームを実行して動作を確認し、必要に応じてPenguin ゲームオブジェクトのスキーの位置を調整する


 スキーのゲームオブジェクトを利用していない場合や、位置が問題ない場合にはこの手順は不要です。

 ゲームを実行した際に、スキーの位置がずれてしまうことがあります。
これはアニメーションを再生する際に、アニメーションがオブジェクトの軸を調整する関係で生じる現象です。

 その場合、スキーのゲームオブジェクトの位置を Penguin ゲームオブジェクトの子オブジェクトにしてください。
現在は足元のゲームオブジェクトの子オブジェクトになっていると思います。


ヒエラルキー画像



スキーのゲームオブジェクトのインスペクター画像



Sceneビュー画像



 位置を微調整して、ゲームを再度実行して問題がないかを確認してください。


35.スクリプトを使って、キャラの姿勢とアニメーションを同期させる

1.設計


 Animator コンポーネントの持つメソッドを利用することで、Animator ビューに設定したステート間の遷移が可能になります。
今回は idle と jump の2つのステートを姿勢の変更に合わせて、行ったり来たりするように制御します。

 ステートの遷移条件用に Trigger 型の条件を設定していますので、アニメーションを制御する命令も Trigger 型で命令します。
他にも色々なステートが Animator には登録されていますが、今回はそれらは利用していません。

 そのためスクリプトに Animator コンポーネントを操作できるように Animator 型の変数を用意し、それを利用してアニメーションを遷移させます。
遷移させるタイミングはどこになるでしょうか。ロジックを考えながら実装をしてみてください。


2.PlayerController スクリプトを修正する


 アニメーションの遷移が完成しましたので、この遷移をスクリプトから切り替えるように処理を追加します。

 最初に宣言フィールドで Animator 型の anim 変数を追加します。この情報を使うことでアニメーションの遷移の命令を実行することが出来るようになります。
Startメソッドを修正して、GetComponentメソッドを利用して anim 変数に Penguin ゲームオブジェクトにアタッチされている Animator コンポーネントを取得する処理を追加します。

 アニメーションの制御命令は、Animatorクラスの持つ、SetTrigger メソッドを利用することで実行します。
このSet〜の部分が、先ほどの条件のパラメータで設定した情報と同じものを利用します。
今回は Trigger 型のパラメータを操作したいので、それに合わせて SetTrigger メソッドを実行することで命令を出しています。

 こちらをジャンプのタイミングで実行して、姿勢に応じたアニメーションに遷移するように制御を行いますので
Jump メソッド内に処理を追加します。


PlayerController.cs

 <= クリックすると開きます。



 スクリプトを修正したらセーブを行い、PlayerController スクリプトがアタッチされている Penguin ゲームオブジェクトのインスペクターを確認します。
新しく宣言した変数は private 修飾子であるので表示されませんので、いままで同じ情報のみ表示されていれば問題ありません。


Penguin ゲームオブジェクト インスペクター画像



3.<Animator.SetTrigger メソッド>


 Unityのアニメーションは、Animator クラスによって様々なアニメーションの制御が行えます。
Unity公式スクリプトリファレンス
Animator
https://docs.unity3d.com/ja/current/ScriptReferenc...

 今回はアニメーションの遷移のために、SetTrigger メソッドを利用し、遷移の条件をこのメソッドの引数に指定してアニメーションの遷移を行っています。

 このSet〜で始まるメソッドの引数にはそれぞれ型の指定が異なりますが、第1引数のみ string 型で共通しています。この部分に、パラメータで設定した文字列を指定します。
文字列ですので大文字小文字は区別されます。パラメータに登録した Trigger 型の文字列をこの第1引数に指定することで、Trigger 型のパラメータのもつアニメーション情報を変更することが出来ます。

  anim.SetTrigger("jump");

 こうすることで、このパラメータの値をスクリプトから書き換えることができます。その結果として、条件が合致したアニメーションに遷移することが出来ます。
Animetorビューでは、現在のパラメータや再生中のステートをリアルタイムで確認できますので、アニメーションを再生している場合にはこちらに常に気を配っておきます。


<実行動画 スクリプトからパラメータの値を変更し、条件を満たしたアニメーションを遷移させる>
https://gyazo.com/141da892450e38fda79ae0565dd1100c


参考サイト
Unity公式スクリプトリファレンス
SetBool
https://docs.unity3d.com/ja/current/ScriptReferenc...


4.ゲームを実行して動作を確認する


 すべて完成しましたので、ゲームを実行してキャラをジャンプさせてみましょう。ジャンプのために設定したアニメーションが再生されれば制御成功です。
一緒に Animator ビューで遷移していることを確認しましょう。現在再生されているステート、Parameter が確認できます。


<実行動画 GameビューとAnimatorビューの確認>
https://gyazo.com/141da892450e38fda79ae0565dd1100c


 今回はアニメーションクリップの中身やトランジションの詳細な設定や説明は省略しています。
この部分は今後も必ず利用する機能ですので、是非、自分で調べて理解を深めておいてください。


5.<応用 アニメーションクリップのアニメーションを変更する>


 ジャンプのアニメーションですが、キャラの jump Power の値を 0 にしてジャンプをしてみてください。
0 であるにもかかわらず、ジャンプをしていると思います。逆にどんなに値を大きくしても、一定の高さで変わりません。

 この原因は、ジャンプのアニメーションクリップの設定にあります。
アニメーションには移動を伴うものがあることを説明しましたが、Apply Root Motion のチェックを外しても
移動をしてしまうアニメーションがあり、それが今回のジャンプのアニメーションクリップになります。

 現在のままでもよいですが、しっかりとスクリプトからジャンプする高さの制御を行いたい場合には
ジャンプのアニメーションクリップの設定を変更する必要があります。

 アニメーションクリップの確認や編集を行うには、Animation ビューをエディターに追加する必要があります。
これは Animetorビューとは異なるビューウインドウになります。
Unity の左上のメニューより、Window => Animation => Animation でビューが追加されます。


Animationビュー


 Animation ビューも Animetorビューと同じように、アニメーションクリップを確認したいゲームオブジェクトをヒエラルキーで選択している必要があります。
今回の場合であれば、ペンギンのゲームオブジェクトを選択している場合に限り、Animetorビューに登録されているステートが選択できるようになり、再生ボタンが有効になります。
Animation ビューの場合は、再生すると Gameビューでアニメーションの確認を行います。

 
<手順動画 Animetorビューでアニメーションを再生する方法>
https://gyazo.com/11b29d7891f6d9a9f47f341f689cba87



 再生するとわかるように、常に一定の高さに移動するようにアニメーションクリップに設定されています。

 変更する場合には、まず最初に、jump アニメーションクリップを複製し、複製したものを変更しましょう。
こうすることで、以前のjump アニメーションクリップに戻したい場合や設定に失敗してしまった場合に便利です。

 アニメーションクリップは右クリックをしてのメニューでは複製が出来ませんので、ctrl + D キーで複製します。
jump 1 が作成されますので、こちらを Animetorビューにドラッグアンドドロップして、Animation ビューで選択出来るようにします。


フォルダ画像



Animetorビュー(ここに登録されていないと、Animationビューで選択できない)



 ヒエラルキーで Penguin ゲームオブジェクトを選択してから、Animation ビューで jump 1 を選択します。
左側の項目内に、ゲームオブジェクトの名前 : Positon / Rotation / Scale のいずれか の書式で、複数の項目があると思います。
例えば、Bip001 : Position や、Bip001 : Rotation というように、1つのゲームオブジェクトにつき、3つの情報が登録されています。


Animation ビューの設定項目



 このうちの、各ゲームオブジェクトの Position の情報だけを削除してください
削除の方法は、削除したい項目の右側にある - ボタンを押して、Remove Propaties を選択します
これは位置情報の更新をこの部分で行っているためです。そのため、アニメーションの再生に合わせて移動が行われています。

 たくさんの項目を削除しますので、1つずつ順番に、ゆっくりと丁寧に確認をしながら作業を行ってください
万が一、Position 以外の項目を削除してしまった場合には、慌てずに、ctrl + Z キーで1つ前の操作状態に戻してください。


<手順動画>
https://gyazo.com/ee4adf55324a655d5bccd2ed678ec2ba


<Positionの項目のみを削除>



 これでアニメーションクリップの編集は完了です。



 Animetorビュー の jump ステートを選択してインスペクターを確認します。
Motion という項目があります。現在は jump アニメーションクリップが登録されていますので、
こちらに先ほど編集した jump 1 アニメーションクリップをドラッグアンドドロップしてアサインしてください。

 こうすることで他の設定は変更せずに、再生するアニメーションクリップのみ変更することが出来ます。


jump ステート インスペクター画像



 設定が終了したら、先ほど追加した jump 1 ステートは不要です。削除しておきましょう。


<手順動画 Animetorビューから不要なステートを削除する>
https://gyazo.com/18fdcfaed24060fc50c6c4c341e7f60b




 すべて完了しましたので、Penguin ゲームオブジェクトの jump power の値を 0 にしてからゲームを実行してジャンプさせてください。
ジャンプのアニメーションはするものの、キャラがジャンプしなくなっていれば(位置が変更されなければ)制御成功です。

 あとはキャラを動かしながら、jump power の値を調整してください。


<実行動画 jump power 0 の場合>
https://gyazo.com/230df40afc4b5e4a98cdf9c644783042


<実行動画 jump power 200 の場合>
https://gyazo.com/4eee31f7a1f0551899595abcc8dfef84


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

 => 次は 手順17 −得点獲得用ゲームオブジェクトの作成− です。