Box2DFlashAS3（2.0.0）を使ってみる - その1（基礎編）

ずっと物理エンジンに手を出そうと思ってて手が着かなかったけど、最近ようやく触ったからメモ。
物理エンジンと言っても色々種類があってどれが良いのか迷った。
最終候補として「Box2DFlashAS3」と「APE」が上がったけど、APEは開発が止まっているというのをどっかの記事で見たのでBox2DFlashAS3で進めることにした。
（ただ、APEは絵として反映させるのがすごい簡単なのでとても惜しい）

そして実際にBox2DFlashAS3を触ってみたけど、難しい。
演算とグラフィック表示のコーディングが切り離されて、Flashでプログラムを始めたデザイナーの自分には敷居がちょっと高い。。
さらに最近バージョンアップがあって、最新バージョン（2.0.0）の情報がすげー少ない。ほぼどの記事を見ても1.4.3の内容で書かれている。
けどせっかくだからあきらめずにやる。「雨だれ石をも穿つ」だ。

まずはPV3Dの様に、worldを生成しなければならない。

package {

import Box2D.Dynamics.*;
	import Box2D.Collision.*;
	import Box2D.Collision.Shapes.*;
	import Box2D.Dynamics.Joints.*;
	import Box2D.Dynamics.Contacts.*;
	import Box2D.Common.*;
	import Box2D.Common.Math.*;

import flash.display.*;

public class Sample extends Sprite {
		
		//Box2D variables
		public var m_world:b2World;
		public var m_iterations:int;
		public var m_timeStep:Number;
		public var m_physScale:Number;
		
		public function Sample() {
			// set variables
			{
				m_iterations = 10;//計算精度。値を大きくすれば精度は上がるがパフォーマンスは下がる。
				m_timeStep = 1/60;//フレームレートみないなもん？Box2Dの計算頻度。
				m_physScale = 30;//まだよく分かってないけど、色々影響する。後述。
			};
			// make base world
			{
				var worldAABB:b2AABB = new b2AABB();//お決まりの設定。これがないと動かない。
				worldAABB.lowerBound.Set(-1000.0, -1000.0);//これもよくわからんけど、値が小さいよりは大きい方がいいらしい。
				worldAABB.upperBound.Set(1000.0, 1000.0);//同上。

var gravity:b2Vec2 = new b2Vec2(0.0, 10.0);//物理でおなじみの重力。第一引数がx方向で第二引数がy方向。xを指定すれば横向きにgがかかる。
				var doSleep:Boolean = true;//オブジェクトが動かなくなったときに、そのオブジェクトに対する演算をするか否か。trueのが良いと思う。
				m_world = new b2World(worldAABB, gravity, doSleep);//Box2Dの世界を生成。

};
		}

}
}

次にオブジェクトを生成する。
オブジェクトの形には次の2種類がある。

・b2CircleDef（円形オブジェクト）
・b2PolygonDef（多角形オブジェクト）

b2CircleDefはそのまま円形のオブジェクトが作れる。
b2PolygonDefは最大8角までの多角形オブジェクトがつくれる。
（バージョン1.4.3には、多角形オブジェクトの種類としてb2BoxDefとb2PolyDefの2つがあり、それぞれ四角形と多角形って感じみたい。）
実際のコードは以下の様な感じ。

//まずは動く円形オブジェクト
var circleDef:b2CircleDef = new b2CircleDef();//とりあえず生成。
circleDef.radius = 30/m_physScale;//大きさ設定。設定する全ての値をm_physScaleで割っておく。
circleDef.density = 10.0/m_physScale;//密度設定（重さ？）
circleDef.friction = 1.0/m_physScale;//摩擦力設定。
circleDef.restitution = 0.2/m_physScale;//よくわかんない。。反発力？？

var circleBD:b2BodyDef = new b2BodyDef();//オブジェクトをb2BodyDefというものに包む。
circleBD.position.Set(100/m_physScale,100/m_physScale);//位置を設定。ここもm_physScaleで割っとく。

var circle:b2Body = m_world.CreateDynamicBody(circleBody);//b2Bodyというオブジェクトを生成し、Box2Dの世界に落とし込む。
circle.CreateShape(circleDef);
circle.SetMassFromShapes();

//静止している四角のオブジェクト（床）
var floorDef:b2PolygonDef = new b2PolygonDef();//とりあえず生成。
floorDef.SetAsBox(400/m_physScale,20/m_physScale);//第一引数が横幅で第二引数が高さ。
floorDef.density = 1000.0;//とりあえず密度。
floorDef.friction = 1.0/m_physScale;//摩擦力設定。

var floorBD:b2BodyDef = new b2BodyDef();//circleと同様
floorBD.position.Set(stage.stageWidth/2/m_physScale, stage.stageHeight/m_physScale);

var floorBody = m_world.CreateStaticBody(floorBD);
floorBody.CreateShape(floorDef);
floorBody.SetMassFromShapes();

この中で「CreateDynamicBody」というのは動く物体を生成するメソッド。
固定された物体を作る場合は「CreateStaticBody」を使う。

ここでパブリッシュしても、まだグラフィッックの表示設定をしてないので画面には何も表示されない。
そんな時はデバッグモードで確認する。
以下の関数を呼び出せばデバッグモードで画面が表示される。最後に毎フレーム演算と描画をしなければならないのでEventListener用の関数を用意今回はこの辺で。
次回はグラフィッックを反映させてみる。

一応全ソース。

package {

import flash.display.*;
	import flash.events.Event;
	
	public class Sample extends Sprite {

//Box2D variables
		public var m_world:b2World;
		public var m_iterations:int;
		public var m_timeStep:Number;
		public var m_physScale:Number;

public function Sample() {
			// set variables
			{
				m_iterations = 10;//計算精度。値を大きくすれば精度は上がるがパフォーマンスは下がる。
				m_timeStep = 1/60;//フレームレートみないなもん？Box2Dの計算頻度。
				m_physScale = 30;//まだよく分かってないけど、色々影響する。後述。
			};
			// make base world
			{
				var worldAABB:b2AABB = new b2AABB();//お決まりの設定。これがないと動かない。
				worldAABB.lowerBound.Set(-1000.0, -1000.0);//これもよくわからんけど、値が小さいよりは大きい方がいいらしい。
				worldAABB.upperBound.Set(1000.0, 1000.0);//同上。

};
			//まずは動く円形オブジェクト
			{
				
				var circleDef:b2CircleDef = new b2CircleDef();//とりあえず生成。
				circleDef.radius = 30/m_physScale;//大きさ設定。設定する全ての値をm_physScaleで割っておく。
				circleDef.density = 10.0/m_physScale;//密度設定（重さ？）
				circleDef.friction = 1.0/m_physScale;//摩擦力設定。
				circleDef.restitution = 0.2/m_physScale;//よくわかんない。。反発力？？

var circleBD:b2BodyDef = new b2BodyDef();//オブジェクトをb2BodyDefというものに包む。
				circleBD.position.Set(100/m_physScale,100/m_physScale);//位置を設定。ここもm_physScaleで割っとく。

var circle:b2Body = m_world.CreateDynamicBody(circleBody);//b2Bodyというオブジェクトを生成し、Box2Dの世界に落とし込む。
				circle.CreateShape(circleDef);
				circle.SetMassFromShapes();
			}
			//そして床
			{
				var floorDef:b2PolygonDef = new b2PolygonDef();//とりあえず生成。
				floorDef.SetAsBox(400/m_physScale,20/m_physScale);//第一引数が横幅で第二引数が高さ。
				floorDef.density = 1000.0;//とりあえず密度。
				floorDef.friction = 1.0/m_physScale;//摩擦力設定。

var floorBD:b2BodyDef = new b2BodyDef();//circleと同様
				floorBD.position.Set(stage.stageWidth/2/m_physScale, stage.stageHeight/m_physScale);

var floorBody = m_world.CreateStaticBody(floorBD);
				floorBody.CreateShape(floorDef);
				floorBody.SetMassFromShapes();
			}
			setDebug();
			this.addEventListener(Event.ENTER_FRAME, Update, false, 0, true);
		};
		public function setDebug():void {

var dbgDraw:b2DebugDraw = new b2DebugDraw();//デバッグオブジェクトを生成
			var dbgSprite:Sprite = new Sprite();//デバッグ用オブジェクトの表示用sprite
			addChild(dbgSprite);//表示用スプライトを表示
			dbgDraw.m_sprite = dbgSprite;//これはお決まり。
			dbgDraw.m_drawScale = m_physScale;//ここでm_physScaleと違う値を入れると思わぬ表示になってしまう。
			dbgDraw.m_fillAlpha = 0.5;//デバッグ用オブジェクトの透明度。表示されるオブジェクト全体に設定される。
			dbgDraw.m_lineThickness = 0;//デバッグ用オブジェクトのライン。
			dbgDraw.m_drawFlags = 0xFFFFFFFF;//デバッグ用オブジェクトの色指定。
			m_world.SetDebugDraw(dbgDraw);//Box2Dのworldに追加。

}
		public function Update(e:Event):void {
			m_world.Step(m_timeStep, m_iterations);
		}
	}
}

デザインとかプログラムとか音楽とか本とか写真とか

Box2DFlashAS3（2.0.0）を使ってみる - その1（基礎編）

0 trackbacks

leave comment

Search

Calender

Categories

Latest Posts

Archives