【Unity】【開発日記】ドット絵アニメーションをゲームに反映させてみた その２
どうも！たぬきすです。
この記事は前回の続きです。前回の記事もよければ読んでみてください。
前回の記事では、UnityのAnimationを使って一動作のアニメーションを作るところまでやりました。今回は、Animationで作成した複数のアニメーションをAnimatorを使ってアニメーション遷移をコントロールしてみましょう。
それでは作成開始！
作成開始
前回はプレイヤーが待機しているアニメーションを作成しましたが、今度は追加でダッシュのアニメーションをAnimationで作成していきましょう。
前回と同様に、Animator、Animationのタブを開いてAnimationタブを表示し、GameObjectのPlayerをクリックして選択します。
すると、前回編集したPlayerの待機アニメーションの編集画面が表示されました。今は待機アニメーションだけですが、ここからどんどんアニメーションを追加していきます。
画像右上にある現在編集しているアニメーションの名前(この記事ではNew Animation)を選択すると、下のような画面になります。
ここで、Create New Clipを選択すると新しいアニメーションの新規作成ができます。アニメーションの名前は作りたい動作の名前をつけましょう。この記事ではダッシュアニメーションを作成するのでRunAnimationとしました。新規作成をすると下の編集画面が現れます。これでRunAnimationが編集できるようになりました。前に作ったアニメーションを編集したい場合は、右上のアニメーションの名前をクリックすれば選択できます。
あとは思い思いのアニメーションを作成しましょう。前回と同様に、Add PropertyからSprite Renderer→Spriteを追加してパラパラ漫画的にアニメーションを作成します。
編集の基本的な機能を説明します。
アニメーションのコマの追加はUnityに保存している画像ファイルをキャラクターの絵が表示されている帯の上にドラッグ＆ドロップするとできます。
コマ送り一つ一つのスピードは追加されたコマの絵を左右にドラッグすることで変更できます。
アニメーションのコマを削除したい場合は、削除したいコマの絵を右クリック→Delete Keyするとできます。
アニメーションが完成したらGame(もしくはScene)タブでアニメーションの確認ができます。GameObjectをGame、Sceneで見える位置に配置して、Animationタブの再生ボタンをクリックします。そうすればアニメーションの動作確認ができます。参考に上の動画を用意しました。
ここで、Animatorタブを選択してみると先ほど追加したRunAnimationがAnimatorに追加されています。
RunAnimationも完成したのでここからはAnimatorによるアニメーションの遷移制御を行いたいと思います。
アニメーションの制御
まずは、アニメーションが遷移する方向を決めます。今回は、条件に応じて待機(NewAnimationではわかりづらいのでIdleに変更)とダッシュを行き来させたいので、両方に伸びる矢印(Transition)を設定します。設定方法は、アニメーションを右クリック→Make Transitionを選択し、矢印を伸ばしたいアニメーションをクリックします。
それができたら、今度はアニメーションを切り替えるフラグ（名称が分からないのでここではフラグとします）の設定をします。
Parametersを選択し、検索バーの隣にあるプラスをクリックすると、Float、int、Bool、Triggerの四つを選択できます。この記事ではBoolを使います。
Boolを選択するとNew Boolという名前でフラグが作成されるので、今回はRunと変更しました。
それができたら、今度はフラグの状態に応じてアニメーションを変化させる設定をしていきましょう。
先ほど設定したIdle→RunAnimationの矢印(Transition)をクリックするとInspectorが画像右のように表示されます。
右下にConditionsという設定項目がありますが、このConditionsでアニメーションの遷移条件を設定することができます。Conditionsの右下にあるプラスをクリックすると条件が追加されます。この記事の設定では、画面右下のCondition設定のように、先ほど追加したJumpフラグがtrueになったときに待機→ダッシュに遷移するという条件を付与しました。
あと、条件が満たされたらすぐにアニメーションを遷移して欲しいので、Inspector内のHas Exit Timeのチェックマークは外します。
同様に、RunAnimation→Idleの矢印をクリックしInspectorでConditionを追加、Runフラグを設定し、今度はfalseのときにダッシュ→待機に遷移するように条件を付与しました。
そして、Has Exit Timeのチェックマークは外します。
これで、Animatorでの遷移の設定が整いました。
今度は、スクリプト内でフラグの上げ下げをして、望んだタイミングで遷移できるように設定します。
スクリプトは簡単のためにスペースキーが押されている時にダッシュアニメーションに遷移し、離された時に待機に遷移するようにしました。
Playerが持っているAnimatorコンポーネントを取得し、フラグを切り替えたいタイミングでSetBoolで切り替えています。スペースが押されている時はRunフラグがtrueになるので待機→ダッシュに切り替わります。離した時はRunフラグがfalseになるのでダッシュ→待機に切り替わります。
実際に動かしてみた映像がこちらです。期待した通りの動きになりました。
以上がドット絵アニメーションををゲームに反映させてみたでした！長くなりました汗。
絵を描かなくちゃいけなかったり設定がややこしかったりとめんどくさいアニメーションですが、実装するとゲームの見栄えはグッと上がるので興味がある方は挑戦してみてはどうでしょうか？
最後に、GooglePlayで自作アプリを公開しているので、興味がある方時間がある方はぜひ遊んでみてください（スマホ推奨）。
ではまた！
