物体の動きをシミュレートする2次元物理エンジンの定番「Box2D」と、話題の国産HTML5/JavaScriptゲームエンジン「enchant.js」を組み合わせたプログラミングを紹介します。

 「Box2D」はスマートフォンの大ヒットゲーム「Angry Birds」(図1)も採用している定番の2次元物理エンジンです。物理シミュレーションのプログラムをゼロから作ろうとするととても大変です。ところが、Box2Dなどの物理エンジンを使えば比較的簡単に物理シミュレーションを取り入れたプログラムを作成できてしまいます。

図1●大ヒットゲーム「Angry Birds」(開発はフィンランドのRovio Entertainment)も物理エンジンを利用している
図1●大ヒットゲーム「Angry Birds」(開発はフィンランドのRovio Entertainment)も物理エンジンを利用している
(c)Rovio Entertainment

 「enchant.js」は日本のユビキタスエンターテインメントが開発するHTML5/JavaScriptのゲームエンジンです。enchant.jsを利用すれば素のHTML5/JavaScriptでプログラムを書くよりもずっと容易にゲームを作成できます。

 両者ともオープンソースなので誰でも自由に使えます。Box2Dとenchant.jsを使いこなせるようになれば、様々なゲームを容易に作れるようになるでしょう。そこで、この記事ではその第一歩として、Webブラウザで動く簡単なプログラムを作りながら、Box2Dとenchant.jsの最も基本的な使い方と組み合わせ方をご紹介します。

Box2DのJavaScript版を使う

 Box2DはもともとC++言語で書かれた物理エンジンですが、オープンソースなので、ActionScript(Flash)やJava、C#など、多数の言語に移植されています。もちろんJavaScript版もあります。ここでは素のBox2DのAPIについて学ぶため、JavaScript版の「Box2DJS」を使います。

 Box2DJSは「http://sourceforge.net/projects/box2d-js/files/」からダウンロードします。2012年2月末時点では「box2d-js_0.1.0.zip」というファイルを入手できます。

 ダウンロードが完了したらzipファイルを展開しましょう。すると、Box2DJSのデモを表示できる「index.html」と、いくつかのフォルダが作成されます(図2)。index.htmlをWebブラウザで開くとデモが始まります(図3)。まずはいろいろなデモを見てみましょう。

図2●box2d-js_0.1.0.zipを展開すると現れるフォルダ
図2●box2d-js_0.1.0.zipを展開すると現れるフォルダ
図3●Box2DJSに付属するデモ
図3●Box2DJSに付属するデモ

 これらのフォルダの中でプログラムに必要なのは「js」と「lib」です。jsフォルダにはBox2DJSの本体であるJavaScriptのコードが、libフォルダにはBox2DJSが利用するJavaScriptのフレームワーク「prototype.js」が格納されています。プログラムではこれらのJavaScriptのコードを最初に読み込むことになります。

「enchant.js」はファイルが一つだけ

 enchant.jsは「http://enchantjs.com/ja/」からダウンロードします。ダウンロードしたファイルを展開するとenchant.jsというファイルが作成されます。基本的にenchant.jsを使う上で必要なのはこれだけです。とても簡単ですね。

この先は会員の登録が必要です。有料会員(月額プラン)は初月無料!

日経 xTECHには有料記事(有料会員向けまたは定期購読者向け)、無料記事(登録会員向け)、フリー記事(誰でも閲覧可能)があります。有料記事でも、登録会員向け配信期間は登録会員への登録が必要な場合があります。有料会員と登録会員に関するFAQはこちら