i-school - 強制横スクロールゲーム 手順5
 以下の内容で順番に実装を進めていきます。

 手順4〜8ではプレイヤーの分身となるキャラの作成、キャラの行動とアニメーションの制御について実装を行います。

 この手順では、キャラ用のスクリプトを作成し、キャラを移動させたり、アニメーションと同期させる制御を実装します。
また待機用のアニメーションを作成して、移動時と待機時でのアニメーションの切り替え(遷移)の処理を実装します。

手順5 −キャラの移動と待機の実装−
 8.スクリプトを使って、キャラを移動させる



新しく学習する内容


・InputManagerによるキー入力の設定
・Rigidbody2D を利用した移動
・アニメーション関連(Animatorビュー、アニメーションのステート、トランジション、パラメータ)
・Animator.SetBoolメソッド、Animator.SetFloatメソッド



8.スクリプトを使って、キャラを移動させる

設計


 新しく PlayerController というスクリプトを作成し、このスクリプトを使ってキャラの制御を行っていきます。

 制御とは、キャラの行動(移動、ジャンプなど)だけではなく、移動に合わせたアニメーションの再生や、画面の移動範囲の制限など多岐に渡ります。
それらを順番に実装していきながら、スクリプトの学習を行います。


 この手順では、キャラの移動について扱います。移動には Rigidbody2D コンポーネントの機能を利用します。

参考サイト
Unityインターハイブログ様
物理エンジンと当たり判定を使いこなそう(その1)
http://inter-high-blog.unity3d.jp/2019/06/28/rigid...


 最初はキーボードで操作ができるようするため、キーボードのキー入力に反応して、ゲーム画面のキャラが移動するように制御を追加します。
移動の際にはアニメーションを再生して、キャラの行動と画面の画像とが一致するように制御します。

 また、現在は常に走るアニメーションを再生してしまうため、この部分も制御を行います。

・キー入力がある場合には、走るアニメーションを再生
・キー入力がない場合には、待機のアニメーションを再生

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

 そのため、まずはキャラの移動の制御を行い、それが完成したら、次に待機のアニメーションを作成し、キー入力と各アニメーションを再生が同期するように制御していきます。


InputManagerによるキー入力の設定


 Unityには InputManager という設定項目があり、この中に最初から特定のキー入力用のキーボードのボタンを登録してあります。

 InputManagerは、Unityの左上のメニューにある Edit => Project Settings からProject Settings ウインドウを開き、左の項目から InputManager を選択すると確認と設定が可能です。

 今回は設定をそのまま利用します。項目にある、Horizontal を選択してください。下記のような設定用の内容が表示されます。


InputManager


 一番上の設定項目に Name があります。この部分に指定した文字列を命令することによって、キー入力用の判定を行うことが出来ます。
Horizontal には始めから Horizontal という文字列が登録されていますので、この情報を利用してキー入力用の判定を行う処理をスクリプトに記述します

 実際に、どのキーの入力を判定するかですが、この Horizontal には、Negative Button に left(左矢印キー)、
Positive Button にright(右矢印キー)が登録されていますので、水平(横)方向用のキー入力の判定を取得することが出来るようになっています。


PlayerController スクリプトを作成する


 Project 内の Scripts フォルダを選択し、その中で右クリックをしてメニューを開き、Create => C# Script を選択してください。
名前を PlayerController に変更します。ダブルクリックしてエディター(Visual Studio)を立ち上げ、スクリプトを書いていきます。

 スクリプトを作成したら必ずセーブをします。VisualStudio では ctrl + Shift + S キーで一括セーブできます。


PlayerController.cs

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



<Rigidbody2D を利用した移動>


 キャラの移動には色々な方法がありますが、今回は、Rigidbody2D コンポーネントの管理している、Velocity(ベロシティ。速度ベクトル)の情報を操作して、キャラを移動させます。
Rigidbody2D コンポーネントのアタッチされているゲームオブジェクト(今回はキャラ)に対して、速度情報を与えることによって、キャラの移動を行うようにしています。

参考サイト
Unity公式スクリプトリファレンス
Rigidbody2D.velocity
https://docs.unity3d.com/jp/current/ScriptReferenc...
Samurai Blog様
【Unity入門】Rigidbodyで自在に移動!velocityの活用方法!
https://www.sejuku.net/blog/55084


Yuko_Player ゲームオブジェクトに PlayerController スクリプトをアタッチする


 ヒエラルキーにある Yoko_Player ゲームオブジェクトに、作成した PlayerController スクリプトをドラッグアンドドロップしてアタッチしてください。

 Yoko_Player ゲーオブジェクトを選択してインスペクターを確認し、PlayerController スクリプトがアタッチされているか確認します。

 PlayerController スクリプトには public 修飾子を持つ moveSpeed 変数が1つありますので、その情報をインスペクターから設定します。
moveSpeed 変数を値を 0 => 3 へ変更してください。この値が 0 のままですと、キャラは移動しません。処理を確認しましょう。


移動の計算式
// velocity(速度)に新しい値を代入して移動
rb.velocity = new Vector2(x * moveSpeed, rb.velocity.y);


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



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


 ゲームを実行して、キーボードの左右の矢印キーを入力をしてみましょう。キャラがキー入力に合わせて左右に移動すれば成功です。

 キャラクターの Rigidbody2D コンポーネントのインスペクターを確認してみてください。
移動するたびに、Velocity の値が変化することが分かります。このように、スクリプトを利用することによって
コンポーネントの操作・制御を行うことが出来るようになり、それをインスペクターで確認することが出来ます。

<実行動画 キャラの左右移動>
https://gyazo.com/98487027f63687e609e0b84371113fc3


 ※ 移動した際に、キャラがくるくると回転してしまう場合には、
   Rigidbody2D コンポーネントの Freeze Rotation の Z 軸にチェックが入っているかを確認してください

 無事に移動が実装できました。次はキャラの移動と画像の向きを合わせていきます。


PlayerController スクリプトを修正して、キャラの移動と画像の向きを合わせる


 キャラは無事に移動するようになりました。ですが、キャラの移動を画像の向きがあっていませんでした。
当然、自動的には画像は切り替わりません。必ず、制御が必要になります。

 PlayerController スクリプトを修正し、キャラの移動の方向と画像の向きとを合わせるように処理を追加します。
 制御方法としましては、Unityの教科書(267P)にもあったように、Transform コンポーネントの Scale の値を反転させることで
画像の方向を切り替えるようにします。Scele の値をスクリプトから指定する場合には localScale 変数を利用します

 よい機会ですので、どういう原理になっているか、Unityの教科書を見直してみてください。


PlayerController.cs

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



ゲームを実行して確認する


 スクリプトを修正したら必ずセーブをします。VisualStudio では ctrl + Shift + S キーで一括セーブできます。

 ゲームを実行してキャラを移動させてみてください。移動方向と画像の方向が一致すれば成功です。

 
<実行動画 キャラの移動に画像の向きを合わせる>
https://gyazo.com/add3db6a3bbea1ca3ee467e1afd09094


新しく待機用のアニメーションクリップを作成する


 走るアニメーションを作成したときの手順と同じように、複数の画像をまとめて選択して、ヒエラルキーにドラッグアンドドロップします。
今度は待機用のアニメーションを作成します。

 使い方としては、キャラが移動している間は Run アニメーションクリップを再生し、停止している間は新しく作成する Idle アニメーションクリップを再生する設計になります。


ファイルの場所 Assets/UnityChan/2DUnitychan/Sprites/Yuko/Yuko_Idle_1 から Yuko_Idle_4 までの4ファイル



選択時のインスペクター画像



 選択したファイルをそのままヒエラルキーにドラッグアンドドロップします。
先ほどと同じように、複数の画像をまとめて設置したため、画像をアニメーションクリップとして保存するための Create New Animation ウインドウが開きます。


Create New Animation ウインドウ


 ファイル名を Idle.anim に変更して保存を選択してください。

 ヒエラルキーに Yuko_Idle_1 ゲームオブジェクトが作成されます。
このゲームオブジェクトは不要ですので削除してください。


アニメーションとアニメーションをつなげる設定を行う


 ここまでに走る Run アニメーションクリップと Idle アニメーションクリップの2つのアニメーションが出来ました。

 走るアニメーションとキャラの移動に関してはアニメと行動の連動ができていますが、これはアニメーションが1つであったため、特に詳細な設定をせずとも連動が出来ていました。
ですが、待機のアニメーションはまだ設定が行われていないため、このままではアニメーションが再生されません。

 また、待機アニメーションと走るアニメーションについては、適宜なタイミングでのアニメーションの切り替えが必要になってきます。
キー入力がない間は待機アニメーションを再生し、キー入力があったら走るアニメーションを再生し、そしてまたキー入力がない場合には待機アニメーション、というように
実際のゲーム内のプレイヤーのキー入力に即したアニメーションの再生が必要になります。

 ここではアニメーションの切り替え(遷移(トランジション)といいます)の設定を行い、それをスクリプト使って切り替えるようにして、キャラの行動とアニメーションとを紐づけしていきます。


Animatorビュー


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


Animatorビュー
https://gyazo.com/0ebc03f90dcc9a0fbdb86326a2cef224

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

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


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


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


待機アニメーションのステートを追加する


 Animator ビューの中では、Entry というアイコン(State(ステート)といいます)と、Run 用のアニメーションクリップが表示されて、矢印でつながっていると思います。
この Run ステートを左クリックで選択してみてください。インスペクターにこのステートの情報が表示されます。

 ステートには1つのアニメーションクリップの情報が登録されています。Motionという部分です。
Runのアニメーションクリップには、最初に作成した Run アニメーションクリップが登録されています。


Run ステートのインスペクター画像



 まずはここに、Run ステートと同じように Idle のステートを作成します。

 先ほどの待機用の Idle アニメーションクリップを選択して、このAnimatorビューにドラッグアンドドロップしてください。
Idle アニメーションクリップは、画像と同じフォルダ内に作成されていると思います。三角形のアイコンのファイルになります。


Idle アニメーションクリップの場所



<手順動画 アニメーションクリップをAnimatorビューへドラッグアンドドロップしてステートを作成する>
https://gyazo.com/7eaf19cba28f72939b25f9de22f3b0b5


 これでステートが新しく追加されました。選択してインスペクターを確認してみてください。Motionの部分に Idle アニメーションクリップが登録されています。


Idle ステートのインスペクター画像



アニメーションの遷移を設定する


 続いて、アニメーションとアニメーションの切り替えの設定を行います。ここでは遷移で統一します。

 まずは最初に、Entry ステートの設定から行います。
現在は Entry ステートから Run ステートに対して矢印がつながっていると思います。Entry => Run です。これが、最初に再生されるアニメーションの設定値です。
これを、Run ステートではなく、Idle ステートに変更します。
 
 Entyr ステートを選択して、右クリックをしてください。メニューが表示されますので、Set StateMachine Default State というコマンドを選択してください。
このコマンドは、ゲーム開始と同時に、どのアニメーションからスタートするかを設定するものです。


<手順動画 Set StateMachine Default State>
https://gyazo.com/6b5739909c3a1d03fce32dc7afc610f8


 選択すると Entry ステートから矢印が出ますので、この矢印を Idle ステートまで移動させていって、左クリックを Idle ステートの上で押します。
矢印が Entyr => Idle につながっていれば成功です。Run への矢印がなくなったと思います。


Entry =>Idle への遷移



 これでゲームの開始と同時に、Run アニメーションではなく、Idle アニメーションが再生されるようになりました。
ゲームを実行して確認してみてください


<実行動画 ゲームの実行時に Run アニメーションではなく、Idle アニメーションが再生させる>
https://gyazo.com/86809884b1d6af48f1ef529c3c91b64d


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


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

 
 今回は移動時のキー入力の部分を条件として利用しますので、まずは、条件用のパラメータを設定します。

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


Parameters画像



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


 Parametersの中に新しいパラメータが作成されますので、名前を Run に変更してください。Float型の場合、名前の右側に 0.0 という数字が表示されます。

 同じ手順で、もう一度プラスボタンを選択し、今度は Bool を選択してください。
Parametersの中に新しいパラメータが作成されますので、名前を Idle に変更してください。Bool型の場合、名前の右側に四角いアイコンが表示されます。


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



アニメーションの遷移条件を設定する


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

 Idle ステートを選択し、右クリックをしてメニューを表示します。Make Transition というコマンドがありますので、それを選択します。
Entry ステートのときと同じように、Idle ステートから矢印が表示されますので、この矢印を Run ステートへつなげて左クリックして決定します。
Idle => Run が白い矢印でつながれば成功です。
 

Idle => Run トランジション



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

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

 Run を選択して、その横の条件を Greater、最後の数値は 0.1 と設定してください。
この条件では、移動用にキー入力が行われて移動が発生した場合に、0.1 以上の値になった場合に、ステートを Idle => Run に遷移させるというものです。
ここに条件を設定しておくことで、スクリプトから遷移命令を出してアニメーションを遷移させることが出来るようになります。

 また Has Exit Time という項目がありますので、そちらのチェックを外しておいてください。


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



 今度は逆に、Run ステートを選択し、右クリックをしてメニューを表示し、同じく Make Transition コマンドを選択します。
矢印を Run ステートから Idle ステートへとつなげて左クリックをして決定します。


Run => Idle トランジション



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

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

 Run を選択して、その横の条件を Less、最後の数値は 0.1 と設定してください。
この条件では、移動用にキー入力が行われて移動が発生した場合に、0.1 以下の値になった場合に、ステートを Run => Idle に遷移させるというものです。
ここに条件を設定しておくことで、スクリプトから遷移命令を出してアニメーションを遷移させることが出来るようになります。


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



 以上でアニメーションの遷移の設定は終了です。


Animatorビュー ステートとトランジション 完成図



PlayerController スクリプトを修正して、キャラの行動とアニメーションの遷移を合わせる


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

 最初に宣言フィールドで Animator 型の anim 変数を追加します。この情報を使うことでアニメーションの遷移の命令を実行することが出来るようになります。

 命令は、Animatorクラスの持つ、SetBool()メソッドやSetFloat()メソッドを利用することで実行します。
このSet〜の部分が、先ほどの条件のパラメータで設定した情報と同じものを利用します。


PlayerController.cs

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



<Animator.SetBoolメソッド、Animator.SetFloatメソッド>


 Unityのアニメーションは、Animatorクラスによって様々なアニメーションの制御が行えます。

Unity公式スクリプトリファレンス
Animator
https://docs.unity3d.com/ja/current/ScriptReferenc...

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

 各メソッドの引数にはそれぞれ型の指定が異なりますが、いずれも第1引数は string 型です。この部分には、パラメータで設定した文字列を指定します。
文字列ですので大文字小文字は区別されます。パラメータに登録した文字列をこの第1引数に指定することでパラメータのもつ情報を変更することが出来ます。
そして、パラメータの値を変更する内容を第2引数に指定します。例えば、SetBoolであれば、第1引数に bool 型のパラメータである Idle の文字列を指定し、第2引数に true や false を指定します。

  // 待機状態のアニメの再生を止めて、走るアニメの再生への遷移を行う
  anim.SetBool("Idle", false);
  anim.SetFloat("Run", 0.5f);


 //  走るアニメの再生を止めて、待機状態のアニメの再生への遷移を行う
  anim.SetFloat("Run", 0.0f);
  anim.SetBool("Idle", true);

 こうすることで、このパラメータの値をスクリプトから書き換えることができます。その結果として、条件が合致したアニメーションに遷移することが出来ます。


パラメータとSet〜メソッドの関連性



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

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


ゲームを実行して確認する


 スクリプトを修正してセーブをしたらゲームを実行しましょう。

 いままでは常に走っているアニメが再生されていましたが、キー入力がない場合には、待機のアニメを再生するようになっています。
キー入力があった場合のみ、走るアニメが再生されて、またキー入力がない状態になったら待機のアニメが再生されます。

 Gameビューと一緒に Animetorビューも確認していただいて、パラメータやステートの遷移などが動いていることを確認してください。


<実行動画 アニメーション遷移>
https://gyazo.com/9467f38427a2b012d29d0cadc168be0b


 アニメの遷移がうまくいかない場合には、トランジションの設定、スクリプトの記述間違い、など複数の部分が考えられますので
問題点を1つずつ順番に整理して確認していきましょう。スクリプトの場合にはアニメの再生を命令する処理の後にDebugを入れて、命令が動いているか確認しましょう。


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

 次は 手順6 −キャラのジャンプの実装− です。