２Ｄリアルタイムストラテジー 手順１０
最終更新：
orika_ex_miyako 2022年02月07日(月) 14:43:23履歴
２回の手順に分けて味方キャラの移動時のアニメの同期の処理を実装します。
この機能は敵キャラについても応用が可能です。
この手順では、味方キャラの移動アニメの作成とアニメの遷移処理を実装します。
次の手順ではスクリプトを利用して、味方キャラの移動方向に合わせて、移動アニメを同期させる制御処理を実装します。
例えば、味方キャラが右方向に移動している場合には、移動アニメも右を向いているものを再生させるようにします。
＜実装動画(手順１１まで実装したときのもの)＞
動画ファイルへのリンク
以下の内容で順番に実装を進めていきます。
手順１０ ー味方キャラの４方向分の移動アニメの作成と BlendTree による移動アニメの切り替え機能の実装ー
新しい学習内容は、以下の通りです。
１４．敵キャラの移動アニメを複数作成する
１．設計
敵キャラは移動できるようになりましたが、現在は移動アニメが１種類であるため、いずれの方向に移動しても同じアニメが再生されています。
２Ｄのゲーム画面にキャラを表示させる場合は主に４つの方向の画像やアニメを準備する必要があります。
これらを移動している方向に合わせることで、進行方向とキャラの画像・アニメを同期させて違和感をなくす必要があります。
まずは最初に、残りの３方向分の移動アニメを作成し、それを移動の方向に合わせて制御できるように
Blend Tree という Unity の持つアニメーションの機能を利用して、移動している方向と同期できるように設定を行います。
ゲームではこのように、プレイヤーの操作状況を反映して、キャラの行動も変化しますので、アニメーションの再生もそれに同期するように制御が必要になります。
制御命令についてはスクリプトにて制御します。こちらは次の手順で実装を行いますので、この手順では移動アニメの作成と、その設定を行います。
２．移動アニメの作成を行う
手順は前回、敵キャラを作成した場合と同じになります。
複数の同じ種類の画像をまとめてヒエラルキーにドラッグアンドドロップすることにより、
その画像を利用したアニメが作成されます。
これを、現在の方向以外の３方向分、作成を行います。
Unity にインポートされているキャラの画像の中から、同じ方向を向いている画像のファイルをまとめて選択します。
最初にキャラを作成する際に行った方法と同じです。
たとえば、左方向を向いている画像が３種類あるのであれば、それを３つまとめて選択してください。
まとめて選択する方法は Ctrl キーを押しながら左クリックです。
画像ファイルの選択
選択時のインスペクター画像
選択したファイルをそのままヒエラルキーにドラッグアンドドロップします。
Create New Animation というウインドウが開きます。
Create New Animation ウインドウ
ファイル名に、方向の名称を入れて、 Enemy_0_left.anim や、Enemy_0_right.anim に変更して保存を選択してください。
保存先には Animations / Chara / Emeny_0 のようなフォルダを作成しておいて、その中に保存するようにすると管理しやすくなります。
ヒエラルキーに画像ファイルの最初のファイル名と同じ名称のゲームオブジェクトが作成されます。
(複数の画像の場合、自動的に先頭のファイル名を持つゲームオブジェクトになります)
ヒエラルキー画像
移動用のアニメを作成することが目的ですので、ヒエラルキーに作成されたゲームオブジェクトは削除してください。
アニメーションは作成されているので問題ありません。
上記の手順を繰り返して、合計で４方向分の移動アニメを作成してください。
画像ファイル選択時のインスペクター画像��
画像ファイル選択時のインスペクター画像��
合計で、AnimationClip が４ファイル、Animator Controller が４ファイル作成されます。
Animator Controller については新しく作成した３つは不要ですので、最初からあるもの以外は削除してください。
フォルダ
以上で移動用のアニメの作成は完了です。
１５．Animator ビューにてステートの遷移の設定を行う
１．設計
作成した移動用のアニメを登録し、条件に合わせて遷移(切り替え)できるように設定を行います。
アニメーションの設定については奥が深いため、ここでは手順に必要な情報だけをピックアップして記述しています。
また、Unity には Animator と Animation という機能があり、名前は似ていますが、異なる機能になります。
そういった名称の違いからもわかるように、間違えて覚えてしまうと認識を修正することが大変になりますので、
しっかりとわかるまで復習をして、正しい知識を覚えていってください。
Unity のゲームオブジェクトは Animator コンポーネントによって、アニメーションの設定を行っています。
アニメーションの設定を行っている情報を Animation Controller といいます。
これは、Animator コンポーネントの Controller プロパティに設定をすることで、その Controller の情報が適用されます。
１つ１つのアニメーションの情報は、Animation Clip という情報になります。
この情報を State という部品に割り当てることによって、再生するアニメーションの設定が行えます。
State 同士は矢印によってつなげていくことができます。この矢印をトランジション(Transition)といいます。
トランジションのある State 同士のみが遷移を行って、再生するアニメーションが切り替わるようになっています。
これが一般的なアニメーションの設定ですが、今回はこの方法ではなく、Blend Tree(ブレンドツリー) という手法を利用します。
Blend Tree では、複数の異なるアニメーションの設定を１つの State 内で設定することが出来ます。
そのため、移動のアニメを個別に４つ設定して、それぞれをトランジションでつなげるのではなく、
Blend Tree 内に４つの移動用のアニメを登録し、いずれかの移動用のアニメを再生されるという方法で移動のアニメの制御を行うようにします。
２．Animator ビューを追加する
Unityの左上にあるメニューの中から Window => Animation => Animator を選択してください。
SceneビューやGameビューのような Animatorビューがエディターのレイアウト内に追加されます。
Animatorビュー
アニメーションの切り替えの設定は、このAnimatorビューの中で行います。
設定を行うためには、対象となるゲームオブジェクトをヒエラルキーで選択している必要があります。
ヒエラルキーにある Enemy ゲームオブジェクトを選択した状態にしてください。(インスペクターに表示されている状態)
この状態になると、Enemy ゲームオブジェクトにアタッチされている、Animator コンポーネント内にある、Controller プロパティの情報が Animator ビュー に表示されます。
Animator コンポーネント
Animatorビューの操作ですが、マウスのホイールボタンを押しながらマウスを移動させることによって、Animatorビューの中を上下左右に移動できます。
３．Animatorビューの Parameters で遷移条件を作成する
アニメのファイルである AnimationClip ですが、こちらは State という情報の Motion に１つだけ登録することが出来ます。
この State 間を遷移して、アニメの切り替えを行っています。
このとき、State には遷移するための条件を設定しておくことが出来ます。(無条件も可能です)
例えば、どういった状態になったときに、このアニメの再生をしてほしい、という情報を Animator ビュー内で事前に登録しておくことにより、
その条件式をスクリプト内で制御し、アニメの再生と同期させることが出来るようになっています。
今回は、キャラの移動の方向に合わせて、アニメの再生を制御する設計にしますので、
移動の方向と同じように、X 軸と Y 軸の情報を条件式として用意するようにします。
条件式として、Animator では、Parameter(パラメータ) を作成して、設定することが出来ます。。
パラメータとはアニメーションの再生の状態を設定するものです。４つの種類があり、今回は Float 型を新しく作成します。
Animatorビューのすぐ下に Parameters という項目がありますので、その中にあるプラスボタンを選択し、Float を選択してください。
Parameters画像
Parametersの中に新しいパラメータが作成されますので、名前を X に変更してください。
Float型の場合、名前の右側に 0.0 という数字が表示されます。(この部分が型によって変化し、種類の特定が容易になっています)
同じ手順で、もう一度プラスボタンを選択し、同じく Float を選択してください。
Parametersの中に新しいパラメータが作成されますので、名前を Y に変更してください。
Parametersにパラメータを追加した後の画像
４．Animator ビューにて、Blend Tree の初期設定を行う
Animator ビュー内で右クリックをしてメニューを開き、Create State => From New Blend Tree を選択します。
新しい State として Blend Tree が作成されます。選択するとインスペクターから名称が変更できますので、Move に変更してください。
Animator ビュー
インスペクター画像
Entry の State を選択して、右クリックをしてメニューを開き、Set StateMachine Default State を選択します。
ゲーム開始時の初期のアニメの再生 State を設定できますので、作成した Move に矢印を繋げて左クリックして決定してください。
これでゲーム開始と同時に Blend Tree 内の移動アニメが再生されるようになります。
Animator ビュー
Blend Tree の Move をダブルクリックしてください。Animator ビューの内容が Blend Tree の詳細設定を行うことができる状態に切り替わります。
前の画面に戻る場合には、左上にある Base Layer を押してください。
Blend Tree の編集画面
現在、Blend Tree の中に X のみが表示されていると思います。
これは Blend Type という設定から変更することが出来ます。
インスペクターの上段にある Blend Type を 2D Simple Directional に変更してください。
すぐ下の Parameters が１つから２つに変更されます。
両方とも X になっていますので、右側を Y に変更してください。
この状態になると、Animator ビュー内の Blend Tree の項目が X と Y の２つに変更になっています。
この２つの値の情報を利用して、アニメの再生を切り替えるようにします、という設定になります。
Animator ビュー
５．Animator ビューにて、Blend Tree を利用してアニメーションとアニメーションを切り替える設定を行う
Blend Tree では通常のトランジション（遷移）のように、矢印で State 同士をつないでアニメの再生切り替えを設定しない代わりに
Blend Tree 内で設定をした Parameter(X と Y) の値がどの値になっているかによって、アニメの再生の切り替えの設定を行うことが出来ます。
Blend Tree のインスペクターにある Motion の項目が List is Empty になっていると思います。
ここに再生を行いたい複数のアニメを登録し、再生するための条件式を設定出来ます。
Motion 内の右下にあるプラスボタンを押してください。メニューが表示されますので、Add Motion Field を選択します。
Animation Clip を選択するウインドウが開きますので、Enemy_0_front のAnimation Clip を選択してください。
これで Motion 内に再生するアニメの候補として登録されます。Animator ビュー内にも、Blend Tree とつながる State が追加されます。
Blend Tree インスペクター画像
Animation ビュー画像
追加された Motion に条件を設定します。
このときに利用するのが、Parameter である X と Y の情報になります。
Blend Tree では、この Parameter の値が、Motion 内の Pos X と Pos Y と同期する設定になっています。
新しく追加した Chara_front の設定を、Pos X = 0、Pos Y = -1 に設定してください。
キー入力のうち、下方向の移動は Y 軸をマイナス方向の値が取得できますので、Y 方向の値と同期するようにします。
Blend Tree インスペクター画像
では、残りの３つの Animation Clip についても、Motion 内に追加していきましょう。
追加する順番は任意です。下記の画像のように、Pos X と Pos Y を設定してください。
各方向と値が同期することが大切です。
Blend Tree インスペクター画像
Animator ビュー画像
２つ以上の Motion が追加されると、インスペクターの Parameter の下に、Blend する値の位置が青い菱形で表示されます。
現在は４つの点が、上下左右に１つずつ存在している状態になっているはずです。
では、Blend Tree による、アニメの制御を実際に試してみましょう。
インスペクターの一番下にある Blend Tree をクリックして、アニメのプレビューを表示します。
再生ボタンを押してください。正面を向いているアニメが再生されますので、
Parameter の下にある４つの点の中央にある赤い丸をドラッグアンドドロップして、いずれかの頂点に移動させてみてください。
その方向のアニメの再生に切り替わります。
＜検証動画 Blend Tree の機能の確認＞
動画ファイルへのリンク
これが Blend Tree を利用したアニメの制御処理になります。
Animator ビューも一緒に確認しておいてください。ドラッグアンドドロップに合わせて、X と Y の値が動いていることが分かります。
今回は、Blend Tree 内の Parameter の設定として、Motion 内の Pos X と Pos Y に入る値を X と Y の値に指定しています。
そのため、キャラの移動した際のキー入力の値を、この X と Y に割り当てることが出来れば、スクリプトから、この Blend Tree 内のアニメの制御が可能になります。
次の手順では、このロジックを使った遷移の制御を、スクリプト使って切り替えるようにして、キャラの移動と移動のアニメーションとを紐づけしていきます。
以上でこの手順は終了です。
次は 手順１１ −味方キャラの移動と移動アニメの同期処理の実装− です。
この機能は敵キャラについても応用が可能です。
この手順では、味方キャラの移動アニメの作成とアニメの遷移処理を実装します。
次の手順ではスクリプトを利用して、味方キャラの移動方向に合わせて、移動アニメを同期させる制御処理を実装します。
例えば、味方キャラが右方向に移動している場合には、移動アニメも右を向いているものを再生させるようにします。
＜実装動画(手順１１まで実装したときのもの)＞
動画ファイルへのリンク
以下の内容で順番に実装を進めていきます。
手順１０ ー味方キャラの４方向分の移動アニメの作成と BlendTree による移動アニメの切り替え機能の実装ー
１４．味方キャラの移動アニメを複数作成する １５．Animator ビューにてステートの遷移の設定を行う
新しい学習内容は、以下の通りです。
・アニメーション関連（Animatorビュー、アニメーションのステート、トランジション、パラメータ） ・Blend Tree によるプレイヤーの移動と移動アニメーションとの同期処理について
１４．敵キャラの移動アニメを複数作成する 
１．設計
敵キャラは移動できるようになりましたが、現在は移動アニメが１種類であるため、いずれの方向に移動しても同じアニメが再生されています。
２Ｄのゲーム画面にキャラを表示させる場合は主に４つの方向の画像やアニメを準備する必要があります。
これらを移動している方向に合わせることで、進行方向とキャラの画像・アニメを同期させて違和感をなくす必要があります。
まずは最初に、残りの３方向分の移動アニメを作成し、それを移動の方向に合わせて制御できるように
Blend Tree という Unity の持つアニメーションの機能を利用して、移動している方向と同期できるように設定を行います。
ゲームではこのように、プレイヤーの操作状況を反映して、キャラの行動も変化しますので、アニメーションの再生もそれに同期するように制御が必要になります。
制御命令についてはスクリプトにて制御します。こちらは次の手順で実装を行いますので、この手順では移動アニメの作成と、その設定を行います。
２．移動アニメの作成を行う
手順は前回、敵キャラを作成した場合と同じになります。
複数の同じ種類の画像をまとめてヒエラルキーにドラッグアンドドロップすることにより、
その画像を利用したアニメが作成されます。
これを、現在の方向以外の３方向分、作成を行います。
Unity にインポートされているキャラの画像の中から、同じ方向を向いている画像のファイルをまとめて選択します。
最初にキャラを作成する際に行った方法と同じです。
たとえば、左方向を向いている画像が３種類あるのであれば、それを３つまとめて選択してください。
まとめて選択する方法は Ctrl キーを押しながら左クリックです。
画像ファイルの選択
選択時のインスペクター画像
選択したファイルをそのままヒエラルキーにドラッグアンドドロップします。
Create New Animation というウインドウが開きます。
Create New Animation ウインドウ
ファイル名に、方向の名称を入れて、 Enemy_0_left.anim や、Enemy_0_right.anim に変更して保存を選択してください。
保存先には Animations / Chara / Emeny_0 のようなフォルダを作成しておいて、その中に保存するようにすると管理しやすくなります。
ヒエラルキーに画像ファイルの最初のファイル名と同じ名称のゲームオブジェクトが作成されます。
(複数の画像の場合、自動的に先頭のファイル名を持つゲームオブジェクトになります)
ヒエラルキー画像
移動用のアニメを作成することが目的ですので、ヒエラルキーに作成されたゲームオブジェクトは削除してください。
アニメーションは作成されているので問題ありません。
上記の手順を繰り返して、合計で４方向分の移動アニメを作成してください。
画像ファイル選択時のインスペクター画像��
画像ファイル選択時のインスペクター画像��
合計で、AnimationClip が４ファイル、Animator Controller が４ファイル作成されます。
Animator Controller については新しく作成した３つは不要ですので、最初からあるもの以外は削除してください。
フォルダ
以上で移動用のアニメの作成は完了です。
１５．Animator ビューにてステートの遷移の設定を行う
１．設計
作成した移動用のアニメを登録し、条件に合わせて遷移(切り替え)できるように設定を行います。
アニメーションの設定については奥が深いため、ここでは手順に必要な情報だけをピックアップして記述しています。
また、Unity には Animator と Animation という機能があり、名前は似ていますが、異なる機能になります。
そういった名称の違いからもわかるように、間違えて覚えてしまうと認識を修正することが大変になりますので、
しっかりとわかるまで復習をして、正しい知識を覚えていってください。
Unity のゲームオブジェクトは Animator コンポーネントによって、アニメーションの設定を行っています。
アニメーションの設定を行っている情報を Animation Controller といいます。
これは、Animator コンポーネントの Controller プロパティに設定をすることで、その Controller の情報が適用されます。
１つ１つのアニメーションの情報は、Animation Clip という情報になります。
この情報を State という部品に割り当てることによって、再生するアニメーションの設定が行えます。
State 同士は矢印によってつなげていくことができます。この矢印をトランジション(Transition)といいます。
トランジションのある State 同士のみが遷移を行って、再生するアニメーションが切り替わるようになっています。
これが一般的なアニメーションの設定ですが、今回はこの方法ではなく、Blend Tree(ブレンドツリー) という手法を利用します。
Blend Tree では、複数の異なるアニメーションの設定を１つの State 内で設定することが出来ます。
そのため、移動のアニメを個別に４つ設定して、それぞれをトランジションでつなげるのではなく、
Blend Tree 内に４つの移動用のアニメを登録し、いずれかの移動用のアニメを再生されるという方法で移動のアニメの制御を行うようにします。
２．Animator ビューを追加する
Unityの左上にあるメニューの中から Window => Animation => Animator を選択してください。
SceneビューやGameビューのような Animatorビューがエディターのレイアウト内に追加されます。
Animatorビュー
アニメーションの切り替えの設定は、このAnimatorビューの中で行います。
設定を行うためには、対象となるゲームオブジェクトをヒエラルキーで選択している必要があります。
ヒエラルキーにある Enemy ゲームオブジェクトを選択した状態にしてください。(インスペクターに表示されている状態)
この状態になると、Enemy ゲームオブジェクトにアタッチされている、Animator コンポーネント内にある、Controller プロパティの情報が Animator ビュー に表示されます。
Animator コンポーネント
Animatorビューの操作ですが、マウスのホイールボタンを押しながらマウスを移動させることによって、Animatorビューの中を上下左右に移動できます。
３．Animatorビューの Parameters で遷移条件を作成する
アニメのファイルである AnimationClip ですが、こちらは State という情報の Motion に１つだけ登録することが出来ます。
この State 間を遷移して、アニメの切り替えを行っています。
このとき、State には遷移するための条件を設定しておくことが出来ます。(無条件も可能です)
例えば、どういった状態になったときに、このアニメの再生をしてほしい、という情報を Animator ビュー内で事前に登録しておくことにより、
その条件式をスクリプト内で制御し、アニメの再生と同期させることが出来るようになっています。
今回は、キャラの移動の方向に合わせて、アニメの再生を制御する設計にしますので、
移動の方向と同じように、X 軸と Y 軸の情報を条件式として用意するようにします。
条件式として、Animator では、Parameter(パラメータ) を作成して、設定することが出来ます。。
パラメータとはアニメーションの再生の状態を設定するものです。４つの種類があり、今回は Float 型を新しく作成します。
Animatorビューのすぐ下に Parameters という項目がありますので、その中にあるプラスボタンを選択し、Float を選択してください。
Parameters画像
Parametersの中に新しいパラメータが作成されますので、名前を X に変更してください。
Float型の場合、名前の右側に 0.0 という数字が表示されます。(この部分が型によって変化し、種類の特定が容易になっています)
同じ手順で、もう一度プラスボタンを選択し、同じく Float を選択してください。
Parametersの中に新しいパラメータが作成されますので、名前を Y に変更してください。
Parametersにパラメータを追加した後の画像
４．Animator ビューにて、Blend Tree の初期設定を行う
Animator ビュー内で右クリックをしてメニューを開き、Create State => From New Blend Tree を選択します。
新しい State として Blend Tree が作成されます。選択するとインスペクターから名称が変更できますので、Move に変更してください。
Animator ビュー
インスペクター画像
Entry の State を選択して、右クリックをしてメニューを開き、Set StateMachine Default State を選択します。
ゲーム開始時の初期のアニメの再生 State を設定できますので、作成した Move に矢印を繋げて左クリックして決定してください。
これでゲーム開始と同時に Blend Tree 内の移動アニメが再生されるようになります。
Animator ビュー
Blend Tree の Move をダブルクリックしてください。Animator ビューの内容が Blend Tree の詳細設定を行うことができる状態に切り替わります。
前の画面に戻る場合には、左上にある Base Layer を押してください。
Blend Tree の編集画面
現在、Blend Tree の中に X のみが表示されていると思います。
これは Blend Type という設定から変更することが出来ます。
インスペクターの上段にある Blend Type を 2D Simple Directional に変更してください。
すぐ下の Parameters が１つから２つに変更されます。
両方とも X になっていますので、右側を Y に変更してください。
この状態になると、Animator ビュー内の Blend Tree の項目が X と Y の２つに変更になっています。
この２つの値の情報を利用して、アニメの再生を切り替えるようにします、という設定になります。
Animator ビュー
５．Animator ビューにて、Blend Tree を利用してアニメーションとアニメーションを切り替える設定を行う
Blend Tree では通常のトランジション（遷移）のように、矢印で State 同士をつないでアニメの再生切り替えを設定しない代わりに
Blend Tree 内で設定をした Parameter(X と Y) の値がどの値になっているかによって、アニメの再生の切り替えの設定を行うことが出来ます。
Blend Tree のインスペクターにある Motion の項目が List is Empty になっていると思います。
ここに再生を行いたい複数のアニメを登録し、再生するための条件式を設定出来ます。
Motion 内の右下にあるプラスボタンを押してください。メニューが表示されますので、Add Motion Field を選択します。
Animation Clip を選択するウインドウが開きますので、Enemy_0_front のAnimation Clip を選択してください。
これで Motion 内に再生するアニメの候補として登録されます。Animator ビュー内にも、Blend Tree とつながる State が追加されます。
Blend Tree インスペクター画像
Animation ビュー画像
追加された Motion に条件を設定します。
このときに利用するのが、Parameter である X と Y の情報になります。
Blend Tree では、この Parameter の値が、Motion 内の Pos X と Pos Y と同期する設定になっています。
新しく追加した Chara_front の設定を、Pos X = 0、Pos Y = -1 に設定してください。
キー入力のうち、下方向の移動は Y 軸をマイナス方向の値が取得できますので、Y 方向の値と同期するようにします。
Blend Tree インスペクター画像
では、残りの３つの Animation Clip についても、Motion 内に追加していきましょう。
追加する順番は任意です。下記の画像のように、Pos X と Pos Y を設定してください。
各方向と値が同期することが大切です。
Blend Tree インスペクター画像
Animator ビュー画像
２つ以上の Motion が追加されると、インスペクターの Parameter の下に、Blend する値の位置が青い菱形で表示されます。
現在は４つの点が、上下左右に１つずつ存在している状態になっているはずです。
では、Blend Tree による、アニメの制御を実際に試してみましょう。
インスペクターの一番下にある Blend Tree をクリックして、アニメのプレビューを表示します。
再生ボタンを押してください。正面を向いているアニメが再生されますので、
Parameter の下にある４つの点の中央にある赤い丸をドラッグアンドドロップして、いずれかの頂点に移動させてみてください。
その方向のアニメの再生に切り替わります。
＜検証動画 Blend Tree の機能の確認＞
動画ファイルへのリンク
これが Blend Tree を利用したアニメの制御処理になります。
Animator ビューも一緒に確認しておいてください。ドラッグアンドドロップに合わせて、X と Y の値が動いていることが分かります。
今回は、Blend Tree 内の Parameter の設定として、Motion 内の Pos X と Pos Y に入る値を X と Y の値に指定しています。
そのため、キャラの移動した際のキー入力の値を、この X と Y に割り当てることが出来れば、スクリプトから、この Blend Tree 内のアニメの制御が可能になります。
次の手順では、このロジックを使った遷移の制御を、スクリプト使って切り替えるようにして、キャラの移動と移動のアニメーションとを紐づけしていきます。
以上でこの手順は終了です。
次は 手順１１ −味方キャラの移動と移動アニメの同期処理の実装− です。
コメントをかく