Adobe Animate CCを使ってCreateJS用のスプライトシートを書き出し方を説明します。

※基本編とスプライトシート編の違いは、連携のさせ方が異なります。一般的には基本編の方法がよく使われます。

まずは FLA ファイルをダウンロードしましょう。

サンプルのFLAファイルをダウンロードする

※ページ内の[View Raw]リンクをクリックください。

スプライトシートを書きだそう

FLAファイルを開いたら、[ライブラリ]パネルにある「Animal」シンボルを右クリックし、[スプライトシートを生成]を選択しましょう。

書き出し設定

書き出し設定のウインドウでは、次の箇所を設定します。

  • [データ形式]を「easeljs」に選択
  • [参照]で保存先を設定 (FLAファイルと同階層がいいでしょう)。今回はAnimal.pngファイルとして保存します。
  • その他の設定は任意で構いません

※なお、EaselJSとはCreateJSに含まれるJavaScriptライブラリの一つで、HTML5 Canvasを制御するライブラリです。このサイトの解説で紹介しているcreatejs.Stageクラスやcreatejs.Shapeクラスは、実はEaselJSライブラリの機能の一つです。

出力されたスプライトシートを確認しよう

書き出すと、シンボル名と同名のjsファイルとpngファイルが出力されます。

  • pngファイル : スプライトシートの画像です
  • jsファイル : 余白設定などスプライトシートの付与情報が記載されています。このファイルを読み込むことで、CreateJSで簡単にスプライトシートを利用することができます。

スプライトシートをCreateJSで使おう

次に、制御用のHTMLファイルとして、spritesheet_click.htmlを作成しましょう。

spritesheet_click.htmlファイルでは、CreateJSライブラリと、FLAから書き出したJSファイルを読み込みます。


<script src="https://code.createjs.com/1.0.0/createjs.min.js"></script>
<script src="Animal.js"></script>

CreateJSのステージにスプライトシートを配置してみましょう。Animal.jsファイルを読み込むとスプライトシートを扱うためのクラスが自動的に定義されます。FLAファイルでは「Animal」というシンボルで作っていたので、Animal.jsファイルを読み込むことによって、JavaScriptの「Animal」というクラスが定義されました。

new シンボル名()とコードを書くと、表示オブジェクトのインスタンスを作ることができます。addChild()メソッドを使って画面に表示し、play()メソッドを使ってスプライトシートを再生します。

// スプライトを作成
var chara = new Animal();
stage.addChild(chara);

// スプライトを再生する
chara.play();

実行結果

次のサンプルを再生して試してみましょう。動物をクリックすると再生したり停止したりします。