イワシのUnityブログ

Unity3dの技術関連

2Dスプライトアニメーションの使い方

Unityの2D機能を使って2Dのスプライトアニメーションを実装する。
 
今回はモンスター集会所様からお借りした素材を使って作成します。
 
↓このような画像をコマ送りでアニメーションさせます

f:id:iwashigame:20150710034923p:image

 
完成イメージ

f:id:iwashigame:20150710034941g:image

 
 
1. 画像のセットアップ
まずドラッグ&ドロップして素材インポートします。

f:id:iwashigame:20150710034925p:image

 
次にTextureTypeをSpriteに変更します。
SpriteModeを Multiple
Pixcels Par Unitを 50
GenerateMipmapは OFF
にそれぞれ変更します。
変更が完了したらApplyを押します。
 

f:id:iwashigame:20150710034928p:image

 
 
 
2. 画像を分割する
InspecterビューのSprite Editorを押すと下のようなウインドウが表示されます。

f:id:iwashigame:20150710034930p:image

 
左上のSliceボタンを押して分割設定をします。
今回は1コマ 64x64で分割するので
TypeをGridに、Pixel sizeを64x64に設定します。
Pivotは画像の原点位置のことで、今回はTopLeftにします。

f:id:iwashigame:20150710034934p:image

設定が終わったらSliceボタンで、スライスを実行します。
元の画像が格子状にスライスされました。
最後にApplyを押して完了します。

f:id:iwashigame:20150710034937p:image

 
ここまでの処理が完了すると、プロジェクトビューで
画像が分割されているのが確認できます。

f:id:iwashigame:20150710034939p:image

 
 
3. Unity上で動かす
分割された複数のスプライトを選択してSceneビューにドラッグ&
ドロップします。
するとAnimationControllerとAnimationClipが生成されます。
 
 

f:id:iwashigame:20150710034945p:image

 
これで、実際にUnityエディタ上でスプライトアニメーションが
再生されているはずです。
実行して確認しましょう。
 

f:id:iwashigame:20150710034948p:image

見本通りに動き出しました!
あとで使用するときのために、作成したオブジェクトは忘れずにPrefub化しておきましょう!