物体の動きをシミュレートする2次元物理エンジンの定番「Box2D」と、話題の国産HTML5/JavaScriptゲームエンジン「enchant.js」を組み合わせたプログラミングの解説、後編は実際にプログラムを作ってみます。
三つの箱が重力にしたがって落ちるプログラム
それでは、三つの箱が重力にしたがって落下し、床に衝突するだけのとても簡単なプログラムを作ってみましょう（図5）。プログラムの構成を極めて大雑把に言うと、Box2Dで物理演算を行い、その結果をenchant.jsで描画するという内容になります。
Box2Dの大まかな流れと登場する要素は図6です。「仮想世界」とは、物理シミュレーションの舞台となる箱庭のようなものです。「物体」は四角形や多角形、円などを組み合わせて作成します。物体には重さ（密度）や摩擦係数などを設定可能です。そして、仮想世界には「重力」を設定でき、物体には各種の「力」を外部から加えることができます。力が加わればBox2Dは物理シミュレーションの結果、物体を動かします。さらに物体間の「衝突判定」も行ってくれます（ただし衝突判定はこのプログラムでは扱いません）。
一方、Box2Dは描画機能を提供しません。描画はこのプログラムではenchant.jsの担当です。Box2Dから受け取った値を使ってenchant.jsの機能で描画することになります。
enchant.jsでひな形を作る
具体的な実装に入ります。初めにenchant.jsを利用するプログラムの“ひな形”と呼べるものを作ります。リスト2のようになります。
まず、Webブラウザのウィンドウがページをロードしたとき（windowのonloadイベント発生時）にゲームエンジンを開始します（リスト2の（1））。その後、「Game」クラスでゲームのインスタンス（game）を作り（リスト2の（2））、「Scene」クラスでゲームのシーンを作成して、それをgameに登録しています（リスト2の（3））。
また、プログラムで利用する画像は「Sprite」クラスで扱いますが、これはscene（Sceneクラスのインスタンス）に登録します。つまり、Game→Scene→Spriteのような階層関係を構築します（図7）。このような構成は一般に「シーングラフ」と呼ばれます。近年のゲームエンジンの多くはこのようなシーングラフの構成を採用しています。シーンの必要性はこのプログラムではわかり辛いと思いますが、大規模なゲームだと様々な画面が必要なので、それらをシーンの単位で扱うことができれば便利なわけです。
