CreateJSでミニゲームを作ってみた


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を出力してくれるので便利です。

  1. フレームラベルで画面とアニメーション状態を管理しておく。
    (CreateJSでは、フレーム番号が1ではなく0から始まるので、ややこしくなるのでラベルで管理する)
  2. クラシックトゥイーンで、アニメーションをつける。
  3. アニメーションのフレームに合わせて、音を 設定する。
  4. 特定フレームで必要なスクリプトを、インラインJSで書く。

CreateJSでパブリッシュする際に気をつけた点

大体は、パブリッシュ時に出力パネルで注意してくれます。

  1. レイヤーやシンボル名など、目に付く日本語を英数字に変えておく。
    (パブリッシュしたJSにそのまま出力されるので、特にシンボル名は気をつける)
  2. クラシックトゥイーンを含むレイヤーには、シンボルは1つにする。
  3. フィルターはシャドウ/光彩以外は使わない。
  4. 静的テキストはビットマップ等に変換しておく。
    (CreateJSでは全てダイナミックテキストに変換されるので、特定フォントで表示できない)
  5. ボタンシンボルは使わない。(パブリッシュは出来るけど、UP/DOWN等は無効になる)
  6. マスクは使わない。
  7. クラシックトゥイーン以外は使わない。

パブリッシュ後に残りの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月現在)ということもあり、まだまだ機能が足りません。
サポートするアニメーションの種類やフィルター、マスクなどなど、使いたいけど、使えない機能が結構ありましたが、
今後のアップデートに期待したいところです。