Edited at
FlashDay 23

StarlingのMovieClipでgotoAndPlayを作ったよ

More than 3 years have passed since last update.

harayokiです。

カレンダーが空いていたので小ネタを投稿します。暇なのではないです。(笑)

title-logo.png


StarlingのMovieClipはgotoAndPlayがない

StarlingのMovieClipはスプライトシートアニメーションを再生します。new Movieclip(textures, fps);のようにテクスチャの配列(Vector)とfpsを渡して初期化して使います。しかし、ラベルの概念がなく、Flasherが慣れ親しんでいるgotoAndPlayとgotoAndStopメソッドが実装されていません。APIリファレンスを参照してもラベル関係のメソッドはありません。

http://doc.starling-framework.org/current/starling/display/MovieClip.html

なので、MovieClipのアニメーションを切り替える際は、MovieClipごと切り替える必要がありました。位置及び拡大縮小回転などの状態を引き継ぐのは面倒なので、Spriteに一回包んで使うことになるのではないかと思います。しかしその場合無駄な階層が1つ増えてしまいますね。なにより面倒です。

この問題をなんとかしたいなと思い作ったクラスがありますので(作ったのは2年前ですが)ここで公開したいと思います。


gotoAndPlayが使えるMovieClipを作ったよ

ここにソースがあります。サンプルとかはないですが、実際にとある案件に適用してみましたので、大きな動作は問題ないかと思われます。

https://github.com/harayoki/StarlingMovieClipWithLabel/blob/master/src/harayoki/starling/MovieClipWithLabel.as

<使い方>

var mc: MovieClipWithLabel = new MovieClipWithLabel(textures, fps, labelName);

のようにデフォルトのラベル名とともに初期化します。(ラベル名がなくても平気ですが、指定しましょう)

mc.addLabel(labelName,textures);

のようにラベルと新たなアニメーションを追加できます。この処理は好きなだけ行うことができます。

このように準備を終えた後であれば、

mc.gotoAndPlay(labelName);



mc.gotoAndStop(labelName);

が使えます。

Enjoy!

<注意点>

SpriteSheetは全て同じ大きさじゃないといけなかったかも。TexturePacker+Starlingの組み合わせなら、余白のトリミングに対応しているので、十分な余白をもって全て同じ大きさで書き出してやれば大丈夫なはず。。

<仕組み>

MovieClipに対するテクスチャの登録を動的に切り替えています。あまりフレーム数が長いものを頻繁に切り替えると処理がかさみそうなので、その場合は最初に述べたようにMovieClipごと切り替えた方が良いかなと思います。


終わりに

以上です。SpriteSheetよりもDragonBonesやSpineに可能性を感じているので、存在を忘れていましたが、SpriteSheetを多用するコンテンツの方がずっと多いかと思いますので、最初から公開しておけばよかったなとか今更思っています。みんな忙しさがいけないんや。。。

ではでは。メリークリスマス!