「enchant.js」でゲームを作ろう！　HTML5とJavaScriptによるアクションゲーム制作入門

　HTML5でゲームが作れるライブラリ「enchant.js」がユビキタスエンターテインメントから発表されました。Webブラウザだけでスプライトを使ったゲームが動くとのことで興味を持った人も多いのではないかと思います。ここではenchant.jsを使ったゲーム作りについて見ていきたいと思います。

　enchant.jsがサポートしているHTML5は，長らく使われていたHTML4に代わる次世代Webシステムの要となるものです。HTML5ではWebページの動的な要素，とくにグラフィックスの描画機能などが大幅に強化されており，これまでFlashを使わないとできなかったようなことが，HTMLとJavaScriptだけでできるというのが最大の特徴となっています。
　ここにきてInternet Explorer 9（以下，IE9）もようやく正式版がリリースされ，主要なWebブラウザでのHTML5サポートがほぼ出揃いました。今回はenchant.jsでのゲーム開発に当たってIE9を主に使っていきますが，基本的にはほかのブラウザでも大差はありません。IE9は，Windows XPなど古いOSでは動作しませんので，Windows XP以前のOSを使用している人はほかのブラウザを導入してください。


　最初にお断りをしておきますと，私はJavaScriptのエキスパートではありません。むしろほとんど触ったことはありませんので，ときどきおかしな説明もあるかと思いますが，ご容赦ください。手探りで進めている状態であり，enchant.jsの全貌を理解しているわけでもありません。
　また，今回解説するスタイルは，あまり一般的でない部分が多いかと思われます。enchant.jsは，JavaやJavaScriptのプログラミングに習熟している人はかなり簡単に扱えるようですので「サンプルもドキュメントもついているし，問題ない」という人は我が道を行ってください。プログラムの経験がまったくない人には，さすがにイチから説明するのも無理ですので，先にJavaScriptの入門サイトなどで勉強してください。ある程度の経験はあるけど「サンプルを眺めてみてもよく分からない」という人が今回のターゲットです。

enchant.js：基本のキホン

　前置きが長くなりましたが，まず，標準のサンプルプログラムから見ていきましょう。
　アクションゲームの基礎部分だけを抜き出したサンプルがありますので，まず，それから見ていきます。

enchant();	//おまじない



window.onload = function() {

		//ページが開いたら以下の処理を実行

    var game = new Game(320, 320);

		//Gameオブジェクトを320×320で生成

    game.preload('bear.gif');

		//画像のロード指定

    game.onload = function() {

		//Gameオブジェクトができたら以下を起動

        var bear = new Sprite(20, 30);

		//20×30のスプライトを生成

        bear.image = game.assets['bear.gif'];

		//スプライトに画像を割り当て

        bear.addEventListener('enterframe', function() {

		 //ここがイベントリスナ部分

            this.x += 3;

		//スプライトのx座標に3を足す

        });

        game.rootScene.addChild(bear);

		//スプライトをシーンに登録

    };

    game.start();	//ゲーム開始

};

　非常にシンプルですね。プログラムの大まかな流れは，

　　オブジェクト生成
　　イベントリスナ登録（メイン処理部分）
　　オブジェクトをシーンに登録
　　実行

のようになります。これはenchant.jsのゲームすべてに共通する流れです。
　基本的に，各種処理の起動はイベントドリブンですので，プレイヤーのキー入力など，さまざまなイベントに対して対応する処理を書いていきます。それぞれのオブジェクトでどのイベントでどのような反応をするかを示した「イベントリスナ」を登録していくことでゲーム処理を記述するのが原則となります（リストの太字部分）。オブジェクト指向というと，クラスを作ってメソッドで処理を記述する形が多いかと思いますが，enchant.jsではインスタンスごとにイベントリスナで処理を指定するという流れのようです。
　イベントドリブンですので，非同期処理が基本のようですが，上記のようにフレーム開始イベントに同期した処理も書けます。ゲームでは同期処理のほうが多くなるでしょう。標準状態のenchant.jsでは，1/15秒ごとにフレーム開始イベントが発生します。

　さて，サンプルをこのまま実行すると，熊が走り去ってしまいますので，まずは右端で折り返すようにしてみましょう。
　イベントリスナの前に以下のようなbearのメンバ変数を追加します。

	bear.dir=1;

	bear.spd=3;

　続いてイベントリスナ内を書き換えます。

	if(this.x > game.width || this.x < 0) bear.dir *=-1;

	this.x += bear.dir*bear.spd;

　これで折り返すようになりました。だいたいお分かりと思いますが，移動速度を変えたいときには，spdの部分を変更してください。
　イベントリスナ内で変数を定義することもできますが，それだとイベントが呼ばれるたびに初期化されるため，オブジェクトに紐づくデータは，オブジェクト定義時にメンバ変数として用意しておきましょう。

ダウンロード

●キー操作で動かしてみる
　次に，キー操作で動かしてみましょう。体裁としては，キー入力イベントのイベントリスナで処理するのが筋なような気もしますが，標準のサンプルではフレームごとの処理内で入力処理もやっていますので，ここでもイベントドリブンにこだわらずにやってみましょう。
　まず，enchant.jsでのキー入力についてまとめます。enchant.jsはスマートフォンなどを主な対象としていますが，PCでのキー入力にも対応しています。ドキュメントには明記されておりませんが，キーの押下状態はシステム変数のように読み出すことができます。
　上下左右の方向キー入力は，それぞれ以下のようなinputのメンバ変数に格納されています。

	game.input.up

	game.input.down

	game.input.left

	game.input.right

　押されているとTrue（1）が返り，押されていないときはFalse（0）です。

　また，ボタンについても3つ分が確保されています。ここでは，z/x/cの各キーをAボタン/Bボタン/Cボタンとして定義しておきましょう。Webブラウザによって多少違いがあるようですが，少なくともWindowsだと，以下のキーバインドでほぼ問題なく動くようです。

	game.keybind(90, 'a'); //z

	game.keybind(88, 'b'); //x

	game.keybind(67, 'c'); //c

　Gameオブジェクトの生成時に以上のものを加えておき，読み出しするときは，

	game.input.a

	game.input.b

	game.input.c

の各変数を参照してください。

　ということで，上記の情報を念頭にキー操作可能なように変更していきます。先ほどのスクリプトでイベントリスナ内を，

	if(game.input.left) bear.x -= bear.spd;

	if(game.input.right) bear.x += bear.spd;

	if(game.input.up) bear.y -= bear.spd;

	if(game.input.down) bear.y += bear.spd;

のように置き換えるとできあがりです。

ダウンロード


●アニメーションさせてみる
　さて，以上の変更でキー操作で動くようになりますが，熊が平行移動しているだけでちょっと面白みに欠けます。用意されているbear.gifには歩きのパターンが入っていますので，ちょっと歩かせてみましょう。
　スプライトのアニメーションは，Spriteオブジェクトのframe変数を変更することで実現できます。bear.gifの場合，60×30ドットの画像ですが，スプライトの大きさは20×30ドットで指定されており，実はこのスプライトの大きさの絵が，左から順に0（中央），1（右足前），2番（左足前）のframeに自動的に格納されていますので，それを呼び出してやります。今回はなにも考えず，フレームごとに，

　　0→1→0→2→0 ……

という繰り返しで再生してみます。上記の繰り返しバターンを得るにはどういう方法を取ってもよいのですが，ここでは，

	bear.n++; 

	bear.frame=((bear.n %=4)<2) ? bear.n :(bear.n!=2)*2;

のようにしています。4で割った余りを取って，2より小さいときはそのまま，2だったら0，そうでないなら2を返す処理です。最終的に同じ動作であれば，if文で書くなり，テーブル参照にするなり，三角関数を使うなりしてください。もっと単純に，0のパターンを途中に追加して順に読み出せばいいような画像にする手もありますので，好みの処理で実装してかまいません。とにかく，frameの部分を書き換えると表示されるパターンが変わるということを理解しておいてください。

　これを実行すると……ウエイトを入れてないので，歩いているというより走っているようにしか見えませんけど，ちゃんと動いて見えますのでこれはこれでよしとしましょう。

ダウンロード

enchant.jsで使うオブジェクト

　enchant.jsでは，なにができるのかをもう少し見ていきましょう。
　まず，ゲームで使えるオブジェクトについて。

Game

　ゲーム全体を表すオブジェクトです。プレイヤーの入力などは，このオブジェクトが扱います。

Label

　文字表示用のオブジェクトです。HTMLタグが使用できます。

Sprite

　スプライト表示用のオブジェクトです。

Map

　BG表示用のオブジェクトです。スプライトチップを並べて表現するもので，衝突判定も同時に指定します。

Scene

　画面を切り替えるためのオブジェクトです。なにを表示するかを管理し，スプライトなどはこのSceneオブジェクトに登録することで表示されるようになります。
　
　ほかにもありますが，主なものは以上です。
　これらは，

 - enchant.EventTarget 

 -- enchant.Node 

 --- enchant.Entity 

 ---- enchant.Sprite

 ---- enchant.Label

 ---- enchant.Map

といった階層構造になっており，Spriteは，上位のクラスが持つ要素を基本的に受け継いでいます。ドキュメントを読む際に少し意識しておくとよいでしょう。

　そのほか，注意点と個人的な不明点など気が付いたことをまとめておきます。

●画像のロード
　「preload」とありますが，実質的に「load」だと思っておいてください。先読みしなくても実行時に読まれるといったことはありません。ゲームのonloadの前に実行されるものですので，ゲーム処理中に記述することはできません。また，1行で書かないといけませんので，スクリプトの先頭部で，ゲーム内で使用する画像名をカンマで区切ってずらずらと書いていってください。
　こうしてpreloadされた画像は，game.assetに記録されます。

●ウィンドウのサイズ
　Gameオブジェクトの生成時に大きさを指定しますが，これは表示される大きさではありません。表示部分はWebブラウザの表示領域に応じて自動的に調整されます。プログラム内で扱われる各種座標値は，Gameオブジェクトで指定した値や，画像サイズなどのピクセル数そのものをベースに計算されます。

●画像にマージンを
　おそらく，ウィンドウサイズに従って画像を自動拡大している関係だと思われるのですが，アニメーションパターンを表示すると，隣のパターンが縦横1ピクセルのラインで滲み出して，ゴミのようにちらつくことがあります。サイズいっぱいで描かれたパターンだと防ぎようがないのですが，新しくパターンを作る際はできるだけ1ライン分の空き枠を取るようにしたほうが安心です。

●関数のスコープ
　プログラムを作るうえで，決まった処理は関数化するのはよくあることですが，普通に記述された関数は，Webブラウザであるwindowの管理下の関数となります（らしい）。私の理解不足もあるのですが，イベントリスナ内など，enchant.jsとの値のやり取り手段をきちんと把握しておりません。すみません。たぶんクロージャって奴を使うんですかね……。

●キーワード
　標準のサンプルでは，ドキュメントには明記されていないキーワードが使われているのですが，すでに説明しているもの以外で，例えば，

        bear.addEventListener('enterframe', function() {

は，

        bear.addEventListener(enchant.Event.ENTER_FRAME, function() {

と同じ意味を持ちます。ソースを読まずに済ませたい場合は，ちょっと長くなりますが，下の形式で記述したほうがいいかもしれません。

スクロールする背景：マップ機能を使ってみよう

　enchant.jsの目玉機能の一つといえるのが，BG処理を実現したMapオブジェクトでしょう。サンプルを見ると，昔懐かしい雰囲気の2D RPGが簡単に作れそうな気がしてきます。
　とはいえ，ソースを見て手作業でマップデータを作ることに絶望している人も多いのではないでしょうか。

　データ自体は，ただの数値型2次元配列ないし3次元配列のように見えます。n×mのマップであれば（n×m×2）のデータを渡してやればよさそうです。雰囲気としては，最初の配列がチップ番号の並び，次の配列が重ね合わせオブジェクトの配置でしょうか。それがマルチレイヤーになっているようです。プログラムを見ると背景を重ねて作ったstageというグループオブジェクトのxとyを変更してスクロールさせています。
　マップ内で通れるところと通れないところの判定は，座標を指定してhitTestメソッドに渡してやればよいようで，扱い自体はさほど難しそうではありません。

　……マップ作成以外の部分は，ですが。

表計算ソフトでマップ作成を試みているところ。CSVで吐き出せばちょうどいい？

　いろいろマップを作ることを考えてみたのですが，なんのツールもなしにサンプルくらいのクオリティのものを作るのはかなり大変です。ユビキタスエンターテインメントでマップエディタをリリースする予定もあるとのことで期待したいところです。

　ということで，今回は，サンプルマップを流用しつつということで少しだけいじってみました。本格的な使い方をするには不十分ですが，同水準のものはちょっと作れないのでしかたありません。

　さて，サンプルプログラムを見ていると基本的な使い方が分かります。先ほど，マップのレイヤーがグループ化されていると述べましたが，さらにプレイヤーキャラクターもそのマップにグループ化されているのが分かります。キャラクターオブジェクトのx，y座標が，Gameオブジェクト内のローカル座標ではなく，マップオブジェクト全体に対するローカル座標値になっていることに注目しましょう。

　まず，キャラクターの変更です。キャラクターアニメーションデータの並びは，某ツクール系のデータ並びと同じようなので，フリーのキャラクターデータにもこと欠かないと思われます。問題は，キャラサイズがサンプルのものと違うものもあるということでしょうか。ここでは大きめのキャラを導入してみましょう。
　とはいえ，結論からいえば，調整しきれておりません。今回は少しいじったサンプルを提示するに留めておきます。
　内容は，キャラをいわゆるVX系のものに差し替えて，マップをトーラススクロールに対応させたものです。
　現在のRPGサンプルはマップ内を端から端まで歩くタイプですが，上に抜けると下から出る感じで上下左右ががつながった構造のマップとしています。理屈は簡単で，マップを縦横2倍に継ぎ足して，端に近づいたら，データがつながっている端の部分まで移動させているだけです。

ダウンロード

　ちなみに，今回使用したキャラデータは，「First Seed Maerial」さんからお借りしました。いろいろなゲームで使える（ここ重要）フリー素材を提供されており，マップ用のデータも多く配布されているので，enchant.jsとは相性がよさそうなサイトです。
　　なお，注意点ですが，キャラは1キャラずつファイルを分割してください。次に，歩きパターンで少し手を抜くので，3パターンのデータのうち，真ん中の列を右端に追加して，4パターンの画像を登録してください。imageの登録では，drawなどを使わず，普通にファイル名を指定してassetsから読み出してください。
　

First Seed Material

http://www.tekepon.net/fsm/

JavaScript開発の流れ：開発者ツールを使ってみよう

　ブラウザとテキストエディタだけでゲームを作れるとはいうものの，いざやってみるとJavaScriptプログラムのデバッグは大変です。最近ではたいていのWebブラウザに開発者ツールが標準装備されるようになっていますので，ぜひ利用したいものです。
　IE9の場合，F12キーを押すと開発者ツールが起動します。デバッグしたいページを開いた状態でF12を押してください。開発者ツールが起動した時点で，F5キーで再読み込みをしてやれば，（問題が発生している場合）エラーメッセージなどを表示してくれます。
　以下にごく簡単な使い方を示しておきますので，この手のツールを使ったことがない人は参考にしてください。IE9以外のブラウザでもだいたい似たような手順となります。

開発者ツールを起動し「スクリプト」の部分を選択します（画面はRC版につき英語標記）

デバッグするスクリプトを選択します（ここではgame.js）

行番号の横をクリックしてブレイクポイント（一時的に処理を止める）を設定します

「デバッグ開始」ボタンを押します。止めたい部分の処理に差し掛かると一時停止します

処理が一時停止した状態で変数にカーソルを合わせると値を参照したりできます

　ブレイクポイントを何か所にも埋め込んでおいて，「続行」ボタンで少しずつ進めながら変数の状態を見ることもできます。スクリプトの編集がその場でできないのが多少不便ですが，使うと使わないのとでは効率がまったく違いますので，ぜひ活用しましょう。

　なお，「デバッグ開始」をした場合は，ちゃんと「デバッグ終了」ボタンを押さないとWebブラウザが反応しなくなるので注意してください。
　こういったツールを使うのと並行して，私は画面にデバッグ用のラベルをいくつか埋め込んでおいて，実行中の変数値を表示するといった方法を取っています。

サンプルシューティングゲーム

　さて，なんとなく開発の準備ができたところでenchant.jsというか，HTML5がどれくらいのパフォーマンスを持つのか確認できるサンプルゲームを作ってみました。とはいっても，新規で作ったわけではなく，以前サービスされていた「ソーシャルゲームSynthe（シンセ）」の解説記事で作成したゲームの移植版です。Syntheでは，同人ゲームなどでよく使われている「吉里吉里」というシステムで作成したゲームを配信できました。サンプルゲームも吉里吉里でそのまま実行できますので，実質，吉里吉里の記述言語であるTJSからJavaScriptへの移植だと思っていただいてかまいません。
　そのサンプルゲームも，吉里吉里用に作成したスプライトライブラリのデモという位置付けのものでしたので，表示周りをenchant.jsのものに置き換えています。こういった「移植」であることから，enchant.js用のサンプルとして見ていただくのはちょっとどうかと思う点も多い実装になっていますが，ある程度ちゃんとしたゲームが動くという部分だけ確認してみてください。

ダウンロード

　HTML5とJavaScriptでこれくらいのことはできるようになったのです。　

　さて，吉里吉里もイベントドリブンベースのシステムなのですが，以前Synthe用に制作した吉里吉里のスプライトライブラリでは，イベントドリブンだと処理が書きにくいのでフレームごとに呼ばれるメインループを作りました。ところが，enchant.jsでは，オブジェクトごとにフレーム開始のイベントも備えられているので，わざわざタイマーでイベントを起こしてやらなくてもよくなっています。しかし，それぞれのオブジェクトごとにフレーム開始イベントがあるのも煩雑です。
　どれくらいイベントにこだわっているシステムなのかと一瞬悩みましたが。オブジェクト（スプライト）の衝突でイベントが発生したりということもないようですし，前述のようにキー入力などは，キー入力イベントでイベントハンドラを書くだけでなく，システム変数としても用意されています（私も吉里吉里のライブラリではそうしてました）。
　イベントごとに処理を書いていくほうが綺麗だという人もいるのでしょうが，無理にイベントドリブンにこだわることもないような気がしてきました。
　
　ということで，イベントリスナ部分では，メインになるオブジェクトについて，フレーム開始イベントを取り，そこからメインループ関数を呼んでいます。メインループ関数では，該当オブジェクト以外も含めたゲーム処理を実行します。これで個人的な好みでいえば，非常にすっきりした形になりました。

グローバル変数化

　眉をひそめる方が続出な気配がありますが，上記のようにそのまま処理を持ってきた関係で，今回のプログラムではほとんどの変数をグローバル変数にしています。イベントリスナに処理を記述する際に，そこにゲーム処理を全部入れるというのがあまり気が進まなかったのと，もともとのプログラムが処理を関数に分けていたのですが，そのままではうまく呼び出せなかったので，スパッといろんなものをグローバル化しました。

TJS版からの変更点

　もともとTJSはJavaScriptと似た言語ですので，変更部分は非常に少なくて済みました。主な変更点と注意点は，変数の実体をちゃんと作っておかないと使えない場合が多いこと，整数除算がないので一部処理を変更せざるをえなかったこと，整数へのキャストがないので（整数自体がないのですが），同様に一部処理の変更が必要だったことなどです。スプライトライブラリの仕様はかなり違いますが，結局やっていることはそう変わりませんので，呼び出し方を全部変えるだけで済みました。元に比べてプログラムが長くなっているのは，主に初期化が必要なものが多くなったことに関係しています。
　「KAG」（Kirikiri Adventure Game）を使わず，吉里吉里だけでゲームを作っている人というのはあまり多くなさそうですが，とりあえず参考までに。

enchant.jsの変更

　本筋からは外れますが，PC用のブラウザでenchant.jsを使ったページを開くと，スクロールバーが出てしまい，カーソルキーの操作と同期して全体がスクロールしてしまうことがあります。Webブラウザウィンドウをちょっと小さめにしてF5で再表示したのちに大きさを戻すなどすれば大丈夫なのですが，ちょっと煩雑です。そこで，enchant.jsの画面サイズ設定部を書き換えて画面よりクライアント領域を少し小さめにしています。ブラウザごとに調整値は変わってきそうですが，ここではとりあえず，縦横20ピクセル小さめに設定するようにしてあります。
　その結果，ゲーム画面自体が右と下が20ドットほど削られたようで，ゲームにも多少影響が出ますが，とくに対処はしておりません。
　画面サイズの小さなスマートフォンにとってはあまりよくないのかもしれませんが，今回のサンプルで使用しているenchant.jsは，多少いじってありますのでご了承を。

音を鳴らそう

　残念ながら，enchant.jsではサウンド機能がサポートされておりません。ちょっと調べれば分かるのですが，HTML5にはAudioオブジェクトがサポートされています。もう少し調べれば分かるのですが，ブラウザごとの互換性は高くありません。
　ここではブラウザの種類を調べてサポートされているフォーマットのデータを渡して……といった煩雑な処理は書きたくありませんので，今回は，鳴ったらラッキー程度の気持ちで対応するに留めておきます。HTML5対応ブラウザ自体が発展途上であり，あちこちの検証サイトの内容も食い違っていたり，日々状況は変わっています。今後のサポートの充実に期待しておきましょう。
　今回用意する音声データは，WAV形式とMP3形式の2種類です。前述のように，スプリプトで選択といったことはしません。HTMLタグで埋め込み，そのタグがハンドルしているデータを再生することにします。

　まず，HTML部分です。これまで，

と非常にシンプルだったBODY部にタグを入れます。今回使う音声データは2種類です。

　このようにそれぞれに2種類フォーマットで用意したデータのソースを併記しておけば，かなりの確率でどっちかを拾ってくれます。あとは，運を天に任せましょう。最近のバージョンであれば，おそらく，Chrome，IE9，SafariはMP3，FirefoxはWAVファイルを読むかと思われます。
　HTMLタグを使わず，JavaScriptだけでも，

　　sd1= new Audio('s1.mp3');

のように指定することでサウンドデータを利用できますが，ブラウザによって再生できるデータを自動選択して読んでくるようなことはありません。やるとなると，ブラウザを判別して適したデータ一つ選んで渡すという処理になりますが，対応状況は日々変わっており，対応していたはずのものが使えなくなっていることもあったりします。また，判別していないブラウザでは音が鳴らなくなります。タグでのデータ併記であれば，新しいブラウザが出てきてもそのまま対応できますし，仕様変更でも柔軟に対応できます。

　続いてJavaScript部です。片方だけ示しますが，内容は同じです。単純に再生するだけなら，

	sd1= document.getElementById("sd1");	// サウンド指定部

	sd1.play();	//再生部

で大丈夫です。

　ただし，ゲームの効果音の場合，サウンドバッファが一つでは連続して音が鳴ったときに途切れたり，新しい音が出なかったりします。そこで，複数のバッファを用意して，順番に使ってやるようにします。こうすることで，効果音が重なって再生され，音の途切れや不自然な挙動がなくなります。
　これにはサウンドバッファを複数取ることが必要になわけですが，今回の実装では，サウンドオブジェクトの実体はブラウザ側にあるので，idを変えた