Flash CS6 の拡張機能である Toolkit for CreateJS を利用して、
ちょっとしたミニゲームを作ってみましたので、その使用感や気をつけたことを述べていきます。
今回作ったゲームは、高速で移動するライオンを、制限時間内にクリックして捕まえるゲーム?です。
PC以外にはiOS5以上のiPhone/iPad、Android3.2以上の端末で動作確認しました。
(モバイル端末には最適化してないです。また、PCでゲームを始めると、音がなります)
作ったゲームは、コチラから。
Flash上での作業
まず、最初にやったことは、Flashだけミニゲームを完成させ、一旦、完成させた状態そのままで、
CreateJSでパブリッシュしてみて(当然、動きませんが)、どの部分がJSで書き直しが必要か、あたりをつけます。
JSで書き直すにも2種類のやり方で分けました。
フレーム制御する stop() など特定フレームで必要なJSは、Flashのアクションパネルで書く「インラインJS 」で書いてしまい、
それ以外のマウスクリックのハンドリングや、MovieClipの動的生成などのゲーム全体の制御は、パブリッシュ後にJSを追記していきました。
インラインJSで書いておけば、パブリッシュ時に書いたフレームの場所に自動的にJSを出力してくれるので便利です。

- フレームラベルで画面とアニメーション状態を管理しておく。
(CreateJSでは、フレーム番号が1ではなく0から始まるので、ややこしくなるのでラベルで管理する) - クラシックトゥイーンで、アニメーションをつける。
- アニメーションのフレームに合わせて、音を 設定する。
- 特定フレームで必要なスクリプトを、インラインJSで書く。
CreateJSでパブリッシュする際に気をつけた点
大体は、パブリッシュ時に出力パネルで注意してくれます。
- レイヤーやシンボル名など、目に付く日本語を英数字に変えておく。
(パブリッシュしたJSにそのまま出力されるので、特にシンボル名は気をつける) - クラシックトゥイーンを含むレイヤーには、シンボルは1つにする。
- フィルターはシャドウ/光彩以外は使わない。
- 静的テキストはビットマップ等に変換しておく。
(CreateJSでは全てダイナミックテキストに変換されるので、特定フォントで表示できない) - ボタンシンボルは使わない。(パブリッシュは出来るけど、UP/DOWN等は無効になる)
- マスクは使わない。
- クラシックトゥイーン以外は使わない。
パブリッシュ後に残りのJSを書いていく訳ですが、その前にCreateJSで出力されたHTMLをコピー&リネームしてから、
そちらにJSを追記していきます。これで、後々Flashを再度編集してパブリッシュし直しても、
書いたJSが消えることはありませんね。(HTMLのJSの部分は別ファイルにしておいた方が良いかも)
JSでコーディングする
パブリッシュしたHTMLの handleComplete() を以下のように編集します。
function handleComplete()
{
exportRoot = new lib.game();
stage = new Stage(canvas);
stage.addChild(exportRoot);
// stage.update();
Ticker.setFPS(23);
// Ticker.addListener(stage);
Ticker.addListener(window);
// ライオン インスタンスを生成して、表示
lion= new lib.Lion();
lion.onClick = lionClickHandler;
exportRoot.view.mainMC.addChild(lion);
}
lib.Lion()の定義自体は、CreateJSで出力されるJSファイルの方に書いてくれています。
また、Ticker.addListenerの対象をstageではなく、windowにすることで、
以下の tick() 内に書かれたJSを、setFPS() で指定した間隔で実行することができます。
function tick()
{
// 画面遷移やマウスイベントのハンドリングやら。ゲーム全体の制御
}
まとめ
今回のミニゲームを作るに当たっては、「Flash Professional Toolkit for CreateJSのファーストステップガイド」を参考にしました。サンプルコードもあるので、とても助かりました。
CreateJSはバージョン1(2012年8月現在)ということもあり、まだまだ機能が足りません。
サポートするアニメーションの種類やフィルター、マスクなどなど、使いたいけど、使えない機能が結構ありましたが、
今後のアップデートに期待したいところです。