サイトトップ

Director Flash 書籍 業務内容 プロフィール

HTML5テクニカルノート

Box2dWebで物理ワールドと剛体の定義を定める

ID: FN1209010 Technique: HTML5 and JavaScript

b2Worldクラス
名前空間 Box2D.Dynamics
b2World()コンストラクタ
文法 b2World(gravity, doSleep)
概要 物理演算でシミュレーションする空間をb2Worldオブジェクトとして定める。
引数

gravity − 重力を定める2次元ベクトルのb2Vec2オブジェクト。

doSleep − 動かなくなった物体をシミュレーションから外す(スリープさせる)かどうかのブール(論理)値。trueを渡すと動かない物体はシミュレーションに含まれないため、処理が軽くなる。

b2Vec2クラス
名前空間 Box2D.Common.Math
b2Vec2()コンストラクタ
文法 b2Vec2(x, y)
概要 2次元ベクトルのb2Vec2インスタンスをつくる。
引数

x − 2次元ベクトルのx座標値。デフォルト値は0。

x − 2次元ベクトルのy座標値。デフォルト値は0。

b2Vec2.Set()メソッド
文法 b2Vec2オブジェクト.Set(x, y)
概要

2次元ベクトルのb2Vec2インスタンスにxy座標値を定める。

引数

x − 2次元ベクトルのx座標値。デフォルト値は0。

y − 2次元ベクトルのy座標値。デフォルト値は0。

戻り値 なし。
b2BodyDefクラス
名前空間 Box2D.Dynamics
b2BodyDef()コンストラクタ
文法 b2BodyDef(x, y)
概要 剛体のデフォルト値が定義されたb2BodyDefインスタンスをつくる。
引数

なし。


説明

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

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

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

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

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

第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プロパティに設定します。

表001■剛体の種類を定めるb2Body定数
マウスイベント 剛体の種類
b2_dynamicBody 動的 2
b2_kinematicBody キネマティック 1
b2_staticBody 静的 0

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

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


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


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


Copyright © 2001-2012 Fumio Nonaka.  All rights reserved.