NGUIでスプライトアニメーションに挑戦

スプライトアニメーション(SpriteAnimation)は、要するにパタパタアニメだ。
画像を高速で差し替えることで、対象物が動いているように錯覚させる。

キャラクターのアニメーションを作るのは、相当な技術が必要だけど
爆発等のエフェクトは自動生成ツールが存在するので、そういった所で試してもいいかもしれない。

画像の差し替えたいだけならbe-style氏の【NGUIで画像切り替え表示を試してみた】が参考になると思う。

■NGUIでSpriteAnimaiton(シンプルな方法)

1.【NGUIの使い方その1】を参考に、Atlasを作成
 Atlasの切り出しは面倒なので、【Texturepacker】を使うと吉。

2.【NGUIの使い方その2】を参考に、Spriteを作成

3.2の手順で作成したSpriteに[UISpriteAnimation]コンポーネントを登録。
 コンポーネントの位置は、[Component]→[NGUI]→[UI]→[Sprite Animation]

スクリーンショット 2012-05-05 23.08.51

ただ、この方法だけではAtlasに登録されている全Spriteを順番に表示してしまう問題がある。

かと言ってAtlasを動的に差し替えるのはあまり賢くない。
さて、どうしたものか

■アニメーションループを制御

NGUIのSpriteAnimationには、利用するSpriteを制御する機能がある。
それを使えば万事解決!

やり方は簡単。
[UISpriteAnimation]コンポーネントの[Name Prefix]に、実行したいSprite名の
頭部分で共通している所を入力すれば良い。

スクリーンショット 2012-05-05 23.31.09


例えば、
アイドル01〜アイドル04と攻撃01〜攻撃04といったSpriteがあったとする。
この時、[Name Prefix]に「アイドル」と入力すると、アイドルのSpriteAnimationが実行する。

これで複数のアニメーションが制御出来る。

とは言え、アニメーション実行速度は一定(Framelateで指定)なので、
使う画像が可変な2Dアニメーションがしたいならば、
スクリプトで管理するなりSpriteManagerを使うなりしないといけないかもしれない。