たぬきすのアプリ開発日記

アプリ開発の備忘録兼日記

【Unity】【開発日記】ドット絵アニメーションををゲームに反映させてみた その1


どうも!たぬきすです。

この記事は前回の続きです。前回の記事もよかったら読んでみてください。

tanukis.hatenablog.com

前回はドット絵を描き、それをアニメーションにするまでを書きましたが今回はそこで作ったアニメーションを実際に実装してみた話です。

結論から言うと、いい感じにできました。アニメーションの実装はアニメーションの遷移条件をしっかり定めてやれば別段難しいことはない印象でした。アニメーションを実装した後のゲーム内容はこんなかんじ


2Dshooting

前回の記事の時に描いたダッシュと立ち絵をそのまま実装し、さらにジャンプアニメーションと敵のアニメーションも追加しました。ゲームっぽい見た目になってきましたね。この記事では実装の手順をざっくりと説明できたらと思っています。

それでは作って行きましょう!

作成開始

まずはアニメーションの実装に必要なタブを開きましょう。

UnityのツールバーからWindow→Animation→Animatorを開きます。また、UnityのツールバーからWindow→Animation→Animationを開きます。アニメーション実装の時はAnimatorとAnimationの二つのツールを使います。具体的には、Animationで歩く、走るといったアニメーションを作って、アニメーションの遷移をAnimatorで管理するような感じです。

タブが開けたら、まずはAnimationでキャラクターの動作をアニメーションにしていきましょう。

まずはAnimationタブを選択し、アニメーションを実装したいGameObject(この記事ではPlayer)をクリックすると、Animationタブが下のようになります。

f:id:tanukis:20200209145701p:plain

ここでCreateボタンをクリックすると下の画面が現れるので、ここでは自分が作りたいアニメーションの名前(ダッシュならRunAnimation的に)を入力して保存します。

f:id:tanukis:20200209150346p:plain

保存をすると画面が切り替わって下のようになり、UnityにAnimationとAnimatorのファイルが保存されているはずです。

f:id:tanukis:20200209152418p:plain

f:id:tanukis:20200209152437p:plain

これでアニメーションを作る準備が整いました。ここからアニメーションを作っていきましょう。

Add Propertyをクリックし、Sprite Renderer→Spriteを追加すると下のような画面になります。

f:id:tanukis:20200209153917p:plain

編集の基本的な機能を説明します。

アニメーションのコマの追加はUnityに保存している画像ファイルをキャラクターの絵が表示されている帯の上にドラッグ&ドロップするとできます。

コマ送り一つ一つのスピードは追加されたコマの絵を左右にドラッグすることで変更できます。

アニメーションのコマを削除したい場合は、削除したいコマの絵を右クリック→Delete Keyするとできます。

下の画像では屈伸するアニメーションを作りました。

f:id:tanukis:20200209155420p:plain

ここでAnimatorのタブを表示してみましょう。おそらく下のような画面になっていると思います。

f:id:tanukis:20200209160226p:plain

Animatorはアニメーションのコントローラーみたいなものなのですが、EntryからNew Animationへ矢印が伸びています。矢印は動作の遷移の方向を示しているのですが、デフォルトだとアニメーションが始まった瞬間にNew Animationを再生することになっています。なのでこの状態のままUnityを再生すると先ほど作ったアニメーションが再生されます。


AnimationSample

このように待機、ダッシュといったAnimationファイルを複数作成し、それらをAnimatorで遷移条件を設定することで、待機からダッシュダッシュからジャンプのような動作の遷移を細かく編集することができます。

この記事ではAnimationファイルで一動作を編集する方法を紹介しましたが、Animatorでアニメーションを遷移させる方法は次回にしようと思います。

 

ではまた!

 

追記

続きの記事を投稿しました。よかったら読んでみてください。

tanukis.hatenablog.com