CreateJS と Flash Pro CS6 のスプライトシート生成機能

createjsFlash Professional CS6 と CreateJS の連携と言えば Toolkit for CreateJS ですが、その他にも Flash Pro CS6 のスプライトシート生成機能を使って、Flash Pro CS6 から CreateJS 用にコンテンツを書き出すという手があります。

その際、アニメーションがビットマップ化されるため (スプライトシートになるので当然ですが)、Toolkit を使用した場合と比べて、ファイルサイズや実行時のメモリ使用量は増えそうです。また、ベクタ図形のような、自由な拡大縮小も難しいでしょう。

その代わり、「XX が再現されない」といった互換性に関する心配は減りそうです。また、フレームごとに描画を行う必要がない (フレームに対応するビットマップ領域を表示するだけでよい) ため、CPU の負荷が減ることも期待できます。

ということで、上手に Toolkit とスプライトシートを組み合せると、CreateJS を使った表現の幅を広げることができるかもしれません。

CreateJS 用のスプライトシート生成方法

前回の記事では、Starling 用のデータを生成するために、スプライトシート生成ダイアログの「データ形式」のプルダウンから "Starling" を選択しました。

このプルダウンのリストの一番下には "easeljs" という項目があります。CreateJS 用に書き出したい場合は、この easeljs を選んだ状態で生成を実行します。すると、スプライトシートと一緒に、同名の JS ファイルが生成されます。

なぜ easeljs の場合は XML ファイルではなくて JS ファイルかというと、ファイル内には、スプライトシートのデータだけでなく、生成されたデータと画像を読み込んでアニメーションを再生するクラスが JavaScript で記述されているからです。

そのため、後は、クラスのインスタンスを生成してステージに追加するだけで、スプライトシートとして書き出したアニメーションを表示できます。Starling の場合だと、これらのコードは自分で書かなければなりませんでした。

ということで、スプライトシートを使う場合、CreateJS の方が、一手間少ないことになります。

下は生成される JS ファイルの例です。

(function(window) {
  mySym = function() {
    this.initialize();
} // スプライトシートとデータの読み込み
mySym._SpriteSheet = new SpriteSheet({ images: ["mySymbol.png"], frames: [[0,0,257,85,0,127.35,41.35]] }); // アニメーション再生用のクラスを初期化 var mySym_p = mySym.prototype = new BitmapAnimation(); mySym_p.BitmapAnimation_initialize = mySym_p.initialize; mySym_p.initialize = function() { this.BitmapAnimation_initialize(mySym._SpriteSheet); this.paused = false; } window.mySym = mySym; }(window));

コード内では大きく 2 種類の作業が行われています。スプライトシートの読み込みと、それをアニメーションとして再生するクラスの初期化です。

上の例には含まれていませんが、シンボルのタイムラインにラベルがあれば、ラベルにジャンプして再生するためのコードも生成されます。

ちなみに、生成されるクラスの名前は、Flash Pro 内でのシンボル名と同じです。上の例だと、mySim という名前のシンボルがライブラリ内にあったことになります。

なお、複数のシンボルを選択して、スプライトシート生成を行った場合は、それぞれのシンボルに対応するクラスが生成されます。

SpriteSheet クラスと BitmapAnimation クラスの紹介は次回以降に続きます。

 

トラックバック(0)

トラックバックURL: http://cuaoar.jp/mt4/mt-tb.cgi/311

コメントする

2014年1月

Sun Mon Tue Wed Thu Fri Sat
      1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31  
レンタルサーバー

月別 アーカイブ

Powered by Movable Type 4.261