「Box2DFlashAS3」を試す!

2008年6月14日(土)
林 俊之

箱を降らせてみよう

 まずこちらより、サンプルファイルをダウンロード(http://www.thinkit.co.jp/images/article/91/2/9121.zip)してください(9121.zip/7.45 KB)。解凍されたsample1.fla、sample1.asをBox2DFlashAS3_2.0.0フォルダ内に配置してください。

 このサンプルは、まず開始時にランダムに位置、大きさ、色が設定された10個の箱が落ちてきます。さらにクリックするたびにランダムな箱が落ちてくるというものです(前ページの図1の動画と同様です)。

 まずはFlash上でプレビューしてこのFlashを動作させてみましょう。前ページの図1のように色とりどりの箱が落ちてくると思います。

 Box2DFlashAS3でオブジェクトを表示するには、大きく分けて以下の5ステップとなります。

ステップ1:「シミュレーション世界(World)の生成」
ステップ2:「オブジェクト(Body)の生成」
ステップ3:「シェイプの生成」
ステップ4:「シミュレーション世界(World)にオブジェクト(Body)を実体化」
ステップ5:「オブジェクト(Body)にシェイプ(四角とか丸などの形)を登録」

 今回のサンプルでは、ステップ1として、24行目から36行目までの「ワールドオブジェクトの生成」に対応しています。ステップ2からステップ5は、79行目からの「オブジェクトをワールドに追加するメソッド」や38行目から59行目までの「床の生成」にあたります。

 物理計算の結果とディスプレイオブジェクトの連携に関しては、オブジェクト(Body)のuserDataプロパティにMovieClipを登録すること行っています。また、Event.ENTER_FRAMEでUpdateというメソッドを定期的に実行していますが、これにより時間の経過とともに物理計算が更新されます。

重力を変えてみよう

 ワールドオブジェクトの生成のところで、下記のパラメータをセットするところがありますがこれはお決まりの文章なので、あまり気にする必要はないようです。

worldAABB.lowerBound.Set(-100.0, -100.0);
worldAABB.upperBound.Set(100.0, 100.0);

 29行目の「重力の設定」のところで、下記の記述があるかと思いますが、ここは重力のパラメータをセットすることころです。

var gravity:b2Vec2 = new b2Vec2(0,20);

 試しにここのパラメータを変更してみましょう。2つ目の20を100に変えてみるとどうでしょうか?箱の落ちてくるスピードが一気に速くなったかと思います。

 また、お気づきかもしれませんが、この重力のパラメータは横にも設定することができます。試しに30、30と入れてみましょう。箱が落ちてきつつも右にも流れていくのがわかるかと思います。図2の動画をご覧ください。風に流されているような動きがわかると思います。

 そのほか、摩擦係数、跳ね返り係数など変更できるパラメータはsample1.asの中でコメントとして記述してありますので、変更して試してみてください。動きがだいぶ変わってくるので、見ていて面白いと思います。

NTTレゾナント株式会社
So-net、MSNを経て現在gooを運営するNTTレゾナントでデザインエンジニアとして勤務。UIデザイン、HTML開発、JavaScript開発を主軸に仕事中。iGoogleガジェットコンテストで「インプレスR&D インターネットマガジン賞」を受賞。http://www.goo.ne.jp/

Think ITメルマガ会員登録受付中

Think ITでは、技術情報が詰まったメールマガジン「Think IT Weekly」の配信サービスを提供しています。メルマガ会員登録を済ませれば、メルマガだけでなく、さまざまな限定特典を入手できるようになります。

Think ITメルマガ会員のサービス内容を見る

他にもこの記事が読まれています