Roba Memo - 素人のUnity覚書と奮闘記

素人のUnity覚書と奮闘記

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

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

1:スプライトを分割する

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

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

・SpriteModeをMultipleにする。
・SpriteEditorボタンを押す。
f:id:nico-taniku:20170705185335p:plain:w500

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

・Grid By Cell Sizeにする。
・Pixcel Sizeを一コマの画像サイズに合わせる。
・Applyボタンを押す。
f:id:nico-taniku:20170705185647p:plain:w500

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

f:id:nico-taniku:20170705190031p:plain:w200
f:id:nico-taniku:20170705190100p:plain:w250f:id:nico-taniku:20170705190108p:plain:w250

2:アニメーションを作る

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

・Animation
・Animator Controller
f:id:nico-taniku:20170705190542p:plain:w300

この二つを紐付けする。

Animator Controllerを選択して、インスペクターのOpenボタンを押す。
f:id:nico-taniku:20170705190730p:plain:w500

Animator画面が開くので、Animationをドラッグ&ドロップする。
これが、コントローラーを編集する画面
f:id:nico-taniku:20170705190900p:plain:w500

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

アニメーションをつけたいImageに、Animator Controllerをドラッグ&ドロップすると、Animatorが追加される。
f:id:nico-taniku:20170705191514p:plain:w300

アニメーションを作る

タイムラインにスプライトをドラッグ&ドロップするだけでOK。
これが、アニメーションを編集する画面
f:id:nico-taniku:20170705191815p:plain:w500

ループ再生する

ループ再生するなら、Animationのループにチェックを入れておく。
f:id:nico-taniku:20170705191953p:plain:w500

確認

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

まとめ

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