スプライトのアニメーション

コマ画像を並べた、こんな感じの画像を用意しまして、これを基にアニメーションを作る方法をメモ。

１：スプライトを分割する

元から1コマずつのスプライトを用意するなら分割の必要はないのでスルー。
いわゆるマップチップ素材とやらを使った場合は、分割が必要なので分割する。

アセットのスプライトをクリックして、インスペクターで編集する。

・SpriteModeをMultipleにする。
・SpriteEditorボタンを押す。

スプライトエディターで分割

・Grid By Cell Sizeにする。
・Pixcel Sizeを一コマの画像サイズに合わせる。
・Applyボタンを押す。

アセットでスプライトが分割されていれば成功。

２：アニメーションを作る

アセットにアニメーションの基を作る。

・Animation
・Animator Controller

この二つを紐付けする。

Animator Controllerを選択して、インスペクターのOpenボタンを押す。

Animator画面が開くので、Animationをドラッグ&ドロップする。
これが、コントローラーを編集する画面

ImageオブジェクトにAnimatorを追加する

アニメーションをつけたいImageに、Animator Controllerをドラッグ&ドロップすると、Animatorが追加される。

アニメーションを作る

タイムラインにスプライトをドラッグ&ドロップするだけでOK。
これが、アニメーションを編集する画面

ループ再生する

ループ再生するなら、Animationのループにチェックを入れておく。

確認

再生して、スプライトが切り替わって入れば成功。

まとめ

Animationは、動作を設定するもの。
Animator Controllerは、Animationを操作するもの。