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では、フレーム番号が１ではなく０から始まるので、ややこしくなるのでラベルで管理する） - クラシックトゥイーンで、アニメーションをつける。
- アニメーションのフレームに合わせて、音を 設定する。
- 特定フレームで必要なスクリプトを、インラインJSで書く。
CreateJSでパブリッシュする際に気をつけた点
大体は、パブリッシュ時に出力パネルで注意してくれます。
- レイヤーやシンボル名など、目に付く日本語を英数字に変えておく。
（パブリッシュしたJSにそのまま出力されるので、特にシンボル名は気をつける） - クラシックトゥイーンを含むレイヤーには、シンボルは１つにする。
- フィルターはシャドウ/光彩以外は使わない。
- 静的テキストはビットマップ等に変換しておく。
（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はバージョン１（2012年8月現在）ということもあり、まだまだ機能が足りません。
サポートするアニメーションの種類やフィルター、マスクなどなど、使いたいけど、使えない機能が結構ありましたが、
今後のアップデートに期待したいところです。