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

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

はじめに

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

画像のインポート

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

#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 transition」を押し、runに矢印を伸ばしてください。こうすることでアニメーションをstand→runと移行します。
また、操作が終わった時runからstandに移行させておきたいので、runからstandへも→を設定しておきましょう。
次はこの移行の詳細な設定をしていきましょう。矢印を左クリックしてください。左クリックすると、新たにアニメーションの設定画面がインスペクターに現れます。

 

がぞ

 

まず、この画面で「has exit time」というチェックボックスを外してください。また、Settingの隣の▷を押し、出てきた項目のTransition Duration の値を0にしておいてください。

 

がぞ

 

has exit time はそのアニメーションが終わってから移行するという設定なので、ボタンを押してすぐ反応させたい場合はこのチェックを外す必要があります。
そしてsettingはアニメーションとアニメーションを合成する設定です。今回は合成させても意味ないので値は0にしておきます。
そして下のほうにはconditionsというものがあります。

 

がぞ

 

この画面にあるconditionsはどのタイミングでアニメーションを移行させるかを設定できるものです。この設定はAnimatorの中のParametersという場所で作ることができます。

Parameters

Parametersで設定を作っていきましょう。「＋」を押すと、どの条件（Float、Int、Bool、Triger）かを選べると思います。今回はボタンを押している間だけ移行するという設定にしたいので「Bool」を選んでください。
名前は何でもいいですが、わかりやすいようにrunという名前にしておきます。

 

がぞ

 

そしてこれを矢印に設定します。先ほどと同じように、矢印を左クリックし、インスペクターに現れた画面からconditionsのところの＋を押してください。
そうすると左側にparametersの名前、右側に値が何だと動作するというものを設定するものが現れます。

 

がぞ

 

今回はparmetersをひとつしか作っていないので勝手にrunが追加されています。
このparametersの値はスクリプトから制御していきます。

スクリプトから制御

これからアニメーションをスクリプトから制御していきます。移動に関するアニメーションなので、MoveSheapに書いていこうと思います。

 

スクリプト載せます

 

コンポーネントを取得するので、いつも通り変数を定義してGetComponentで取得します。
そしてBool値をTrueに変更するにはSetBool("parametersの名前", true) と書きます。