Unityに関連する記事です

 2回の手順に分けて、キャラの移動に合わせて、移動アニメを同期させる制御処理を実装します。
例えば、キャラが右方向に移動している場合には、移動アニメも右を向いているものを再生させるようにします。


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


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

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



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

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



10.プレイヤーキャラの移動アニメを作成して設定を行う

1.設計


 キャラは移動できるようになりましたが、現在は移動アニメが1種類であるため、いずれの方向に移動しても同じアニメが再生されています。

 2Dのゲーム画面にキャラを表示させる場合は主に4つの方向の画像やアニメを準備する必要があります。
これらを十字キーの方向入力に合わせることで、進行方向とキャラの画像・アニメを同期させて違和感をなくす必要があります。

 まずは最初に、残りの3方向分の移動アニメを作成し、それを移動の方向に合わせて制御できるように
Blend Tree という Unity の持つアニメーションの機能を利用して、方向入力と同期できるように設定を行います。

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

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


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


 手順は前回、キャラを作成した場合と同じになります。
複数の同じ種類の画像をまとめてヒエラルキーにドラッグアンドドロップすることにより、
その画像を利用したアニメが作成されます。
 これを、現在の方向以外の3方向分、作成を行います。



 Unity にインポートされているキャラの画像の中から、同じ方向を向いている画像のファイルをまとめて選択します。
最初にキャラを作成する際に行った方法と同じです。

 たとえば、左方向を向いている画像が3種類あるのであれば、それを3つまとめて選択してください。
まとめて選択する方法は Ctrl キーを押しながら左クリックです。


画像ファイルの選択



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



 選択したファイルをそのままヒエラルキーにドラッグアンドドロップします。
Create New Animation というウインドウが開きます。


Create New Animation ウインドウ



 ファイル名に、方向の名称を入れて、 player_left.anim や、player_right.anim に変更して保存を選択してください。
保存先には Animations のようなフォルダを作成しておいて、その中に保存するようにすると管理しやすくなります。

 ヒエラルキーに画像ファイルの最初のファイル名と同じ名称のゲームオブジェクトが作成されます。
(複数の画像の場合、自動的に先頭のファイル名を持つゲームオブジェクトになります)


ヒエラルキー画像



 移動用のアニメを作成することが目的ですので、ヒエラルキーに作成されたゲームオブジェクトは削除してください。
アニメーションは作成されているので問題ありません。



 上記の手順を繰り返して、合計で4方向分の移動アニメを作成してください。


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



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



 合計で、AnimationClip が4ファイル、Animator Controller が4ファイル作成されます。


フォルダ



 以上で移動用のアニメの作成は完了です。


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 内のアニメの制御が可能になります。

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



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

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

コメントをかく


「http://」を含む投稿は禁止されています。

利用規約をご確認のうえご記入下さい

Menu



プログラムの基礎学習

コード練習

技術/知識(実装例)

2Dおはじきゲーム(発展編)

2D強制横スクロールアクション(発展編)

3Dダイビングアクション(発展編)

2Dタップシューティング(拡張編)

レースゲーム(抜粋)

2D放置ゲーム(発展編)

3D脱出ゲーム(抜粋)

2Dリアルタイムストラテジー

2Dトップビューアドベンチャー(宴アセット使用)

3Dタップアクション(NavMeshAgent 使用)

2Dトップビューアクション(カエルの為に〜、ボコスカウォーズ風)

3Dトップビューアクション(白猫風)

VideoPlayer イベント連動の実装例

VideoPlayer リスト内からムービー再生の実装例(発展)

AR 画像付きオブジェクト生成の実装例

AR リスト内から生成の実装例(発展)

private



このサイト内の作品はユニティちゃんライセンス条項の元に提供されています。

管理人/副管理人のみ編集できます