説明

「Box2D」はもともとC++で開発された2次元空間の物理演算エンジンです。重力と物体の質量や摩擦、弾性にもとづく位置と動きの物理計算を行い、シミュレーションしてくれます。ActionScript 3.0やJava、C#、Pythonなど、さまざまな言語に移植されています。JavaScriptのライブラリとしても、いくつか公開されてきました。Box2dWeb(以下「Box2D」と呼びます)は、その中でも対応するバージョンが新しく、解説も整っています。

物理演算エンジンというのは、物体の位置や動きの数値計算をするだけで、オブジェクトの座標を変えたりはしません。つまり、エンジンがいくら演算を進めても、コンテンツの見た目は止まったままです。演算結果をオブジェクトの座標に与えて、初めてアニメーションとして動きます。物理演算のシミュレーションをする前に、定めておかなければならないことが3つあります。

【物理演算シミュレーションの前に】
1. 物理ワールドをつくる

重力の与えられた物理空間をつくります。クラスはb2Worldですので、「物理ワールド」と呼んでおきます。このb2Worldインスタンスが、物理演算シミュレーションのおおもとです。

2. 剛体を定義する

物理エンジンで扱う物体となる「剛体(Rigid body)」を定めます。Box2Dで剛体をつくるには、剛体の定義を先にb2BodyDefオブジェクトとしてつくらなければなりません。

3. 剛体定義に表示オブジェクトを関連づける

物理演算の結果をオブジェクトの動きとして見せるため、コンテンツのオブジェクトを剛体の定義と関連づけます。

第1に、物理ワールドは、b2Worldクラスのオブジェクトとしてつくります。b2World()コンストラクタには、引数をふたつ渡します。第1引数の重力は、2次元のベクトルを定めるb2Vec2オブジェクトで定めます。b2Vec2()コンストラクタはxy座標をふたつの引数としてとります。b2World()コンストラクタの第2引数のスリープはブール(論理)値です。trueを渡すと、動かなくなった剛体はシミュレーションから外し(スリープし)て、効率を高めます。

Box2Dは数多くのクラスから成立ちます。Box2dWebは、それらのクラスをファイルでは分けず、代わりに名前空間により分類・識別します。そのため、クラスを参照するときには、頭にそれぞれの名前空間を添えなければなりません。同じクラスを何度も用いる場合には、名前空間で参照したクラスを予め変数に入れておくと便利でしょう。

var world = new Box2D.Dynamics.b2World(重力, スリープ);

または

var b2World = Box2D.Dynamics.b2World;
var world = new b2World(重力, スリープ);

第2は、剛体の定義です。b2BodyDef()コンストラクタでインスタンスをつくったら、剛体の位置と種類を決めます。位置はb2BodyDef.positionプロパティでb2Vec2オブジェクトを参照し、b2Vec2.Set()メソッドにより座標を定めます。剛体の種類は、b2Bodyクラスの定数(静的プロパティ)として備わる整数(表001)でb2BodyDef.typeプロパティに設定します。

第3に、画面上にシミュレーションの結果として表示するオブジェクトを、剛体の定義されたb2BodyDefオブジェクトに関連づけます。そのためのプロパティが、b2BodyDef.userDataです。表示するオブジェクトの参照は、このプロパティに納めます。

以上3つの準備が整った後、剛体定義から剛体をつくったうえで、物理演算シミュレーションを行い、表示オブジェクトのアニメーションに反映させることになります。そこまでの処理の全体は、以下の「例』に引いたノートをお読みください。

例

「EaselJSのオブジェクトを物理演算エンジンのBox2Dで落とす」をお読みください。

作成者: 野中文雄
作成日: 2012年9月25日