enchant.jsのサンプルゲームを読む
2012 年 4 月 4 日 by 山平数回に渡ってenchant.jsとゲームについて、周辺の話を進めてきましたので、そろそろ本題に入ります。
enchant.jsにサンプルとして同梱されているアクションゲームのソースを眺めながら、少し手を入れてみます。
準備
解説用ファイル
以下のファイルをダウンロードしてください。
今回の解説用に手を加えたソースファイルです。
【添付ファイル】enchant.zip
添付ファイルの内容
- /enchant.js
- enchantエンジン本体です。(今回は触れません)
- /plugins
- 利用しているプラグインファイルが入っています。(今回は触れません)
- /examples/action/index.html
/examples/action/game.js - 今回参考にするサンプルのオリジナルです
- /examples/action/index.comment.html
/examples/action/game.comment.js - 今回参考にするサンプルにコメントのみを加えたファイルです。
- /examples/action/index.fix.html
/examples/action/game.fix.js - 今回参考にするサンプルを改造したファイルです。
/examples/action配下には上で説明しているファイル以外が含まれています。
これらはゲームやプラグインから呼び出されるものなので、今のところ気にしないでください。
ドキュメント
以下のドキュメントが読めるようになれば、enchant.jsを使ったゲーム開発で困ることはないと思います。
- Reference
- enchant.jsを大まかに知るのに適しています。
私の解説が足りないとき、こちらを参考にすると良いと思います。 - Class Index
- enchant.jsの各クラスに関する詳細です。
オリジナルソースの解説
オリジナルのソースコードにコメントのみを追加した添付ファイルを元に解説します。
以降、特に断りなくコードと言う場合は[/examples/action/game.comment.js]を指してます。
enchant.jsは、ツリー状にゲームオブジェクトを保持しています。
Game-Scene-Node(の派生オブジェクト)という階層を作った上でGameオブジェクトのstartメソッドを呼び出します。
各オブジェクトはenterframeイベントを持っており、パラパラ漫画のようにゲーム中の各コマで実行されます。
キャラクタの動きやスクロール、ゲームオーバーの判定などはそれぞれのオブジェクトのenterframeイベントで処理されます。
今回の解説にアクションゲームを選んだのは、ソースコードが一番読みやすいからです。
上から読んでいけば理解できる順序でコーディングされています。
基本的な流れは
- Gameオブジェクトの宣言と設定
- Gameオブジェクトに追加する各オブジェクトの宣言と設定、enterframeイベントの実装（の繰り返し）
- ゲーム開始
というシンプルなものですが、2点ほど注意が必要です。
ひとつはスコープ、もう一つはクロージャです。
スコープ
ほぼすべての処理がイベントとして定義するFunctionの宣言として記述されています。
「window.onload→game.onload→bear.enterframe」といったイベント用のFunction中にさらにイベント用のFunctionが定義されています。
コード中に各スコープの開始と終了をコメントしています。
各スコープの中での「this」が何を指しているか、混乱しないように注意が必要です。
クロージャ
enterframeイベント内のコードを読んでいると、イベントスコープの外で宣言されているgameやbearが普通に出てきます。
これがいわゆるクロージャで、gameやbearが宣言されたスコープ(onloadイベントなど)を外れた後にも参照され続けます。
当然gameやbearが宣言される前に参照できないので、コードを整理する際に順番を間違えて動かなくなったりします。
場合によっては便利なのですが、何でもかんでもクロージャで解決していると、どんどん可読性が落ちて行きます。
まずはきちんとオブジェクト構造を整えることが大切です。
改造ソースの解説
ここまでの説明と公式のドキュメントでオリジナルのコードは大体読めると思います。
添付の[/examples/action/game.fix.js]にも少し触れます。
オリジナルのアクションゲームは読みやすい半面、これを元に規模を大きくしていくには向いていない部分があります。
ある程度の規模のプログラムになってくると、別の読みやすさが必要になってきます。
オブジェクトの定義と利用がキレイに分かれている方がゲーム全体の流れを追いやすくなるのです。
サンプルソースを読みにくくさせているのは他の部分に比べて極端に長いクマの定義とマップデータですので、これを外に出します。
ついでなのでRectangleオブジェクトも外に出してしまいます。
ここで注目したいのは長い宣言を外に出したおかげでgame.onloadイベント内がすっきりして読みやすくなったことです。
鍵を持っていれば扉が開く、といったゲーム中の出来事をわかりやすく記述するために、それ以外のコードはそれ以外の場所に記述すると良いと思います。
次に読むべきコード
enchant.jsを使ったゲームの作り方の入り口を簡単に解説しました。
小さなゲームならもう作れるのではないかと思います。
まだ少し不安が残る場合には、enchant.jsにサンプルとして同梱されているシューティングゲームのソースコードを読むことをおすすめします。
今回の解説は何だったんだと怒られてしまいそうですが、シューティングゲームのコードは最初から各オブジェクトの定義が外だしされています。
また、コメント内で詳しく実装の解説がなされているので、実際にゲームを作る際のenchant.jsの使い方がとても良く分かります。
まずは公式ドキュメントに慣れることが大事と思い、今回シューティングゲームではなくアクションゲームを題材に選んでみました。
タグ: HTML5, JavaScript, オープンソース, 開発環境
