アニメーションを作ろう のバックアップ(No.6)

アニメーション関係をかいていきます

はじめに

～の続きです。
基本的に今までのことでゲームは作れますが、アニメーションがないと反応が薄い、無機質なゲームになってしまいます。
アニメーションをつけることによってゲームの触り心地がよくなりもっと面白いゲームを作ることができます。

画像のインポート

まずアニメーションの素材となる画像をいれていきましょう
今までの羊の画像から２点の画像を追加します。３つ貼っておきます。

#download(hitsuji_dot.png)

#download(hitsuji_run1.png)

#download(hitsuji_run2.png)

 

このインポートした画像は今までと同じようにAssetsフォルダの中に入れておけばいいのですが、そろそろいろんなものが入ってきてフォルダの中が乱雑になってきました。
基本的に、スクリプトはスクリプト、画像なら画像フォルダの中と分けておくと見やすくて作業もスムーズに進みます。
試しに、上の画像はAnimationフォルダというものを作って、その中に入れておきましょう。

 

がぞ

 

コンポーネントをつける

まずアニメーションを作る前に羊にAnimatorのコンポーネントを付けましょう。

 

画像差し込み予定

 

このコンポーネントは後ほど作るAnimation controllerというものを制御してくれるものです。

Animation

 

それではアニメーションを作っていきましょう
画面上部からWindow > Animation > Animation でアニメーションタブを開くことができます。

 

画像差し込み予定２枚

 

この画面では画像をパラパラ漫画のようにつなぎ合わせキャラクターを動かしているようなものを作ることができます。
ヒエラルキーで羊をクリックした状態でAnimationタブを押すと新しく「create」というボタンが出てくると思います。
ここで「羊をクリックした状態」というのがすごく重要で、Animationタブを触るときは基本的にそのアニメーションを作りたいオブジェクトを選択状態にしておくことが必要です。
そしてcreateをクリックし、名前を「run」にして保存してください。その後、このような画面になると思います。

 

がぞ

 

この時間の部分に画像をドラッグ＆ドロップしていきます。入れる画像の順番はhitsuji_dot→hitsuhi_run1→hitsuji_dot→hitsuhi_run2→hitsuji_run2と５枚等間隔でいいかんじに入れてください。
ここで、最後のhitsuji_run2を２枚入れているのは不思議な感じがしますが、４枚だけだと最後のコマが一瞬で終わってしまいます。最後のコマの表示時間を稼ぐためにもう一枚入れているという感じです。
これで移動のアニメーションを作ることができました。
さて、アニメーションを作った時に勝手に新しく何かができていないでしょうか。

 

がぞ

 

これがAnimationControllerです。これからAnimationControllerをいじっていきましょう。

AnimationController

Animationcontrolerではアニメーションをフローチャートのように組み立てることができます。
ちなみに、今の状態でゲームを起動すると何もしていない状態が走っている状態になります。移動しているときだけ走っている状態にしたいので、もう一つ立っている状態のアニメーションを作りましょう
Animationタブを開いて、羊を選択した状態にしておいてください。
そして、「create new crip」を押すと、新しくアニメーションを作ることができます。このアニメーションの名前を「stand」という名前にして保存しておきます。
このstandにはhitsuji_dotという画像一つを付けておきましょう。これで立ち絵の完成です。
そしてまたAnimationControllerに戻ると新しく「stand」が追加されていると思います。
追加されていない場合、アニメーションをAnimationControllerにドラッグ＆ドロップすると追加することができます。
そして、standを何も動作していない状態にするために、standを右クリックして、「set as layer default state」を押してください。これでゲームを起動すると何もしていない状態ではただ立っている状態になると思います。
しかし、移動していても走るアニメーションを行わないと思います。次はこれを設定していきます。

 

移動部分を作っていきます。standアニメーションを右クリックし、「make