Box2DFlashAS3 を使ってみる[Box2D-1]ではBox2Dの物理エンジンを体験しましたが、今回は落下物を掴む動きを追加したいと思います。
ちょっと訳がわからくなって気がちですが、自分の作業メモ的に説明していきます。

Box2Dにはマウス処理をするにあたりマウスジョイントと言うプログラムが初めから使えるようになっています。
マウスジョイントとは物体とマウスをジョイント（付ける）処理と考えると分かりやすいかもしれません･･･
Box2DFlashAS3 を使ってみる[Box2D-1]をベースにまずはマウスジョントを宣言します。

private var mouseJointDef:b2MouseJointDef; // マウスジョイントの定義
private var mouseJoint:b2MouseJoint; // マウスジョイント

あとインポートにマウスイベントを指定も忘れずにお願いします。

次にマウス操作のイベントリスナーとそのメソッドを追加します。

stage.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
stage.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);

マウスが押された時

private function mouseDownHandler(event:MouseEvent):void {
	var body : b2Body = GetBodyAtMouse(event.stageX, event.stageY);
	if (body) {
		var md : b2MouseJointDef = new b2MouseJointDef();
		md.body1 = world.m_groundBody;
		md.body2 = body;
		md.target.Set(event.stageX / SCALE, event.stageY / SCALE);
		md.maxForce = 500.0 * body.m_mass;
		md.timeStep = 1 / 24;
		mouseJoint = world.CreateJoint(md) as b2MouseJoint;
		body.WakeUp();
	}
}

ここで重要になるのが、GetBodyAtMouseです。
マウスダウンした時に該当する物体があるかを判定していますが詳しく説明ができないので、もっと理解してからと言うことでお願いします。

//該当オブジェクトがあるかの判定
private function GetBodyAtMouse(stageX : Number, stageY : Number) : b2Body {
	// Make a small box.
	var mousePVec : b2Vec2 = new b2Vec2();
	var mouseXWorldPhys : Number = stageX / SCALE;
	var mouseYWorldPhys : Number = stageY / SCALE;

	mousePVec.Set(mouseXWorldPhys, mouseYWorldPhys);
	var aabb : b2AABB = new b2AABB();
	aabb.lowerBound.Set(mouseXWorldPhys - 0.001, mouseYWorldPhys - 0.001);
	aabb.upperBound.Set(mouseXWorldPhys + 0.001, mouseYWorldPhys + 0.001);

	// Query the world for overlapping shapes.
	var k_maxCount : int = 10;
	var shapes : Array = new Array();
	var count : int = world.Query(aabb, shapes, k_maxCount);
	var body : b2Body = null;
	for (var i : int = 0;i < count; ++i) {
		if (shapes[i].m_body.IsStatic() == false) {
			var tShape : b2Shape = shapes[i] as b2Shape;
			var inside : Boolean = tShape.TestPoint(tShape.m_body.GetXForm(), mousePVec);
			if (inside) {
				body = tShape.m_body;
				break;
			}
		}
	}
}

あとはマウスを動かした時とマウスを離した時の処理を追加するだけです。

//mouseUphandler
private function mouseUpHandler(event:MouseEvent):void {
	if(mouseJoint){
		world.DestroyJoint(mouseJoint);
		mouseJoint = null;
	}
}
//mouseMoveHandler
private function mouseMoveHandler(event:MouseEvent):void {
	if (mouseJoint) {
		var p2 : b2Vec2 = new b2Vec2(event.stageX / SCALE, event.stageY / SCALE);
		mouseJoint.SetTarget(p2);
	}
}

マウス操作を追加しただけですが、何か色々とイメージが膨らみ遊び心を感じると思います。
こうやって物理エンジンBox2Dを体験して、ちょこっとプログラムを追加しすだけで遊び心がわきますね！
どんどんプログラムを追加して自分なりに色々と遊びたいと思います。

package {
	//インポート
	import Box2D.Collision.*;
	import Box2D.Collision.Shapes.*;
	import Box2D.Common.Math.*;
	import Box2D.Dynamics.*;
	import Box2D.Dynamics.Joints.*;
	import General.*;
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.MouseEvent;

	/**************************
	 * ADD CHILD = AS3
	 * http://www.addchild.net/
	 * Tatsuya Nishino
	***************************/
	//コンスラクタ
	public class Box2D2 extends Sprite {
		//インスタンスプロパティー
		private const SCALE:Number = 100; // 物理エンジン内の1mを表すためのピクセル数
		private var world:b2World; // 物理エンジンの管理クラス
		private var body:b2Body; // 本体
		private var mouseJointDef:b2MouseJointDef; // マウスジョイントの定義
		private var mouseJoint:b2MouseJoint; // マウスジョイント

		// メソッド
		public function Box2D2() {
			// 初期化
			init();
			createObject();

			// 毎フレームの処理
			addEventListener(Event.ENTER_FRAME, enterFrameHandler);
			stage.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
            stage.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
            stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);
		}
		// init
		private function init():void {
			/*************************
			 *物理エンジンのセットアップ
			**************************/
			//外枠の定義
			var worldAABB:b2AABB = new b2AABB();
			worldAABB.lowerBound.Set(-100, -100);
			worldAABB.upperBound.Set(100, 100);

			//重力の定義
			var gravity:b2Vec2 = new b2Vec2(0, 10);

			//エンジンのセットアップ
			world = new b2World(worldAABB, gravity, true);

			/*************************
			 *床を作る
			**************************/
			//物体の定義
			var floorBodyDef:b2BodyDef = new b2BodyDef();
			floorBodyDef.position.Set(2.5, 3); // 床の位置
			floorBodyDef.angle = Math.PI / 24; //角度を指定

			//物体の形の定義
			var floorShapeDef:b2PolygonDef = new b2PolygonDef();
			floorShapeDef.SetAsBox(3, 0.1); //物体のサイズ
			floorShapeDef.friction = 0.3;
			floorShapeDef.density = 0;

			//物体を作る
			var floor:b2Body = world.CreateBody(floorBodyDef);
			floor.CreateShape(floorShapeDef);
			/*************************
			 *DebugDraw を有効にする
			**************************/
			var m_sprite:Sprite = new Sprite();
			var debugDraw:b2DebugDraw = new b2DebugDraw();
			debugDraw.m_sprite = m_sprite;
			debugDraw.m_drawScale = SCALE;
			debugDraw.m_fillAlpha = 0.5;
			debugDraw.m_lineThickness = 1;
			debugDraw.m_drawFlags = b2DebugDraw.e_shapeBit;
			world.SetDebugDraw(debugDraw);
			addChild(m_sprite);
		}
		private function createObject():void {
			/*************************
			 *落下物のセットアップ
			**************************/
			for (var i:uint = 0; i < 20; i++) {
				// 物体の定義を作る (x 座標と角度はランダム)
				var bodyDef:b2BodyDef = new b2BodyDef();
				bodyDef.position.Set((300 * Math.random()) / SCALE, 0);
				bodyDef.angle = Math.PI / 2 * Math.random();

				// 物体を作る
				body = world.CreateBody(bodyDef);

				// 形の定義を作る
				var bodyShape:b2CircleDef = new b2CircleDef();
				bodyShape.radius = Math.random()*0.3+0.05;
				bodyShape.density = 0.5;
				bodyShape.friction = 1;
				bodyShape.restitution = 0.3;

				// 形を物体に追加する
				body.CreateShape(bodyShape);

				// 重さ・重心を計算する
				body.SetMassFromShapes();
			}
		}
		//mouseDownHandler
		private function mouseDownHandler(event:MouseEvent):void {
			var body : b2Body = GetBodyAtMouse(event.stageX, event.stageY);
			if (body) {
				var md : b2MouseJointDef = new b2MouseJointDef();
				md.body1 = world.m_groundBody;
				md.body2 = body;
				md.target.Set(event.stageX / SCALE, event.stageY / SCALE);
				md.maxForce = 500.0 * body.m_mass;
				md.timeStep = 1 / 24;
				mouseJoint = world.CreateJoint(md) as b2MouseJoint;
				body.WakeUp();
			}
		}
		//該当オブジェクトがあるかの判定
		private function GetBodyAtMouse(stageX : Number, stageY : Number) : b2Body {
			// Make a small box.
			var mousePVec : b2Vec2 = new b2Vec2();
			var mouseXWorldPhys : Number = stageX / SCALE;
			var mouseYWorldPhys : Number = stageY / SCALE;

			mousePVec.Set(mouseXWorldPhys, mouseYWorldPhys);
			var aabb : b2AABB = new b2AABB();
			aabb.lowerBound.Set(mouseXWorldPhys - 0.001, mouseYWorldPhys - 0.001);
			aabb.upperBound.Set(mouseXWorldPhys + 0.001, mouseYWorldPhys + 0.001);

			// Query the world for overlapping shapes.
			var k_maxCount : int = 10;
			var shapes : Array = new Array();
			var count : int = world.Query(aabb, shapes, k_maxCount);
			var body : b2Body = null;
			for (var i : int = 0;i < count; ++i) {
				if (shapes[i].m_body.IsStatic() == false) {
					var tShape : b2Shape = shapes[i] as b2Shape;
					var inside : Boolean = tShape.TestPoint(tShape.m_body.GetXForm(), mousePVec);
					if (inside) {
						body = tShape.m_body;
						break;
					}
				}
			}
			return body;
		}
		//mouseUphandler
		private function mouseUpHandler(event:MouseEvent):void {
			if(mouseJoint){
				world.DestroyJoint(mouseJoint);
				mouseJoint = null;
			}
		}
		//mouseMoveHandler
		private function mouseMoveHandler(event:MouseEvent):void {
			if (mouseJoint) {
				var p2 : b2Vec2 = new b2Vec2(event.stageX / SCALE, event.stageY / SCALE);
				mouseJoint.SetTarget(p2);
			}
		}
		//enterFrameHandler
		private function enterFrameHandler(event:Event):void {
			world.Step(1 / 24, 10);
		}
	}
}

関連する投稿

• Box2DFlashAS3を使ってみる[Box2D-1] (0)
• 物理エンジン[Box2D]を使ったの作品紹介 (0)
• FlashDevelopの便利ショートカット (0)
• FlashDevelopのインストールと初期設定 (2)
• ムービークリップを徐々に加速させる[3-7] (0)

複雑な物理計算を処理してくれるライブラリーとして注目を浴びているのが、Box2DFlashAS3です。
とても便利なライブラリーでFlash、ActionScriptの世界を楽しくさせてくれますが、その反面Box2Dを使いこなすまでには、一筋縄ではいかなく中々難しいのが現状です。
しかし覚えて損はしないライブラリーなのは間違いないので、理解するよりまずは使っていくことにしました。

まずはBox2Dのライブラリーをダウンロードしてきて、解凍したフォルダ内のBox2Dフォルダ、Generalフォルダ、TestBedフォルダ（要らないかも）をflaファイルまたはasファイルと同じ階層に置き、アクションスクリプトにインポートさせます。
その前にBox2Dを体験したい場合は解凍したフォルダ内のHelloWorld.swf、PhysTest.swfなどを開くと体験することができます。

//インポート
import Box2D.Collision.*;
import Box2D.Collision.Shapes.*;
import Box2D.Common.Math.*;
import Box2D.Dynamics.*;
import Box2D.Dynamics.Joints.*;
import General.*;

ここからはザクっとBox2Dを使うための簡単な説明を。。。
Flashの中にBox2Dと言う世界を作ります。
地面、左右の壁、天井などを設定することにより、世界を大きさ、サイズを決めることができます。
またその中に物体を作ることにより、重力、反発、摩擦などが発生します。

Box2Dの世界をつくる

//外枠の定義
var worldAABB:b2AABB = new b2AABB();
worldAABB.lowerBound.Set(-100, -100);
worldAABB.upperBound.Set(100, 100);
//重力の定義
var gravity:b2Vec2 = new b2Vec2(0, 10);
//エンジンのセットアップ
world = new b2World(worldAABB, gravity, true);

地面をつくる

//物体の定義
var floorBodyDef:b2BodyDef = new b2BodyDef();
floorBodyDef.position.Set(2.5, 3); // 床の位置
floorBodyDef.angle = Math.PI / 24; //角度を指定
//物体の形の定義
var floorShapeDef:b2PolygonDef = new b2PolygonDef();
floorShapeDef.SetAsBox(3, 0.1); //物体のサイズ
floorShapeDef.friction = 0.3;
floorShapeDef.density = 0;
//物体を作る
var floor:b2Body = world.CreateBody(floorBodyDef);
floor.CreateShape(floorShapeDef);

落下物をつくる

for (var i:uint = 0; i < 20; i++) {
    // 物体の定義を作る (x 座標と角度はランダム)
    var bodyDef:b2BodyDef = new b2BodyDef();
    bodyDef.position.Set((300 * Math.random()) / SCALE, 0);
    bodyDef.angle = Math.PI / 2 * Math.random();
    // 物体を作る
    body = world.CreateBody(bodyDef);
    // 形の定義を作る
    var bodyShape:b2CircleDef = new b2CircleDef();
    bodyShape.radius = Math.random()*0.3+0.05;
    bodyShape.density = 0.5;
    bodyShape.friction = 1;
    bodyShape.restitution = 0.3;
    // 形を物体に追加する
    body.CreateShape(bodyShape);
    // 重さ・重心を計算する
    body.SetMassFromShapes();
}

基本は上記の世界の設定、床など（固定物）の設定、落下物の設定が必要で、さらにエンターフレームやデバックドローの設定をするとBox2Dの世界が開けます。
以下はカスタムクラスでのコードになりますので、Flashを使う場合はflaファイルのドキュメントプロパティーにカスタムクラス名を指定して下さい。

package {
	//インポート
	import Box2D.Collision.*;
	import Box2D.Collision.Shapes.*;
	import Box2D.Common.Math.*;
	import Box2D.Dynamics.*;
	import Box2D.Dynamics.Joints.*;
	import General.*;
	import flash.display.Sprite;
	import flash.events.Event;

	/**************************
	 * ADD CHILD = AS3
	 * http://www.addchild.net/
	 * Tatsuya Nishino
	***************************/
	//コンスラクタ
	public class Box2D1 extends Sprite {
		//インスタンスプロパティー
		private const SCALE:Number = 100; // 物理エンジン内の1mを表すためのピクセル数
		private var world:b2World; // 物理エンジンの管理クラス
		private var body:b2Body; // 本体

		// メソッド
		public function Box2D1() {
			// 初期化
			init();
			createObject();

			// 毎フレームの処理
			addEventListener(Event.ENTER_FRAME, enterFrameHandler);
		}
		// init
		private function init():void {
			/*************************
			 *物理エンジンのセットアップ
			**************************/
			//外枠の定義
			var worldAABB:b2AABB = new b2AABB();
			worldAABB.lowerBound.Set(-100, -100);
			worldAABB.upperBound.Set(100, 100);

			//重力の定義
			var gravity:b2Vec2 = new b2Vec2(0, 10);

			//エンジンのセットアップ
			world = new b2World(worldAABB, gravity, true);

			/*************************
			 *床を作る
			**************************/
			//物体の定義
			var floorBodyDef:b2BodyDef = new b2BodyDef();
			floorBodyDef.position.Set(2.5, 3); // 床の位置
			floorBodyDef.angle = Math.PI / 24; //角度を指定

			//物体の形の定義
			var floorShapeDef:b2PolygonDef = new b2PolygonDef();
			floorShapeDef.SetAsBox(3, 0.1); //物体のサイズ
			floorShapeDef.friction = 0.3;
			floorShapeDef.density = 0;

			//物体を作る
			var floor:b2Body = world.CreateBody(floorBodyDef);
			floor.CreateShape(floorShapeDef);
			/*************************
			 *DebugDraw を有効にする
			**************************/
			var m_sprite:Sprite = new Sprite();
			var debugDraw:b2DebugDraw = new b2DebugDraw();
			debugDraw.m_sprite = m_sprite;
			debugDraw.m_drawScale = SCALE;
			debugDraw.m_fillAlpha = 0.5;
			debugDraw.m_lineThickness = 1;
			debugDraw.m_drawFlags = b2DebugDraw.e_shapeBit;
			world.SetDebugDraw(debugDraw);
			addChild(m_sprite);
		}
		private function createObject():void {
			/*************************
			 *落下物のセットアップ
			**************************/
			for (var i:uint = 0; i < 20; i++) {
				// 物体の定義を作る (x 座標と角度はランダム)
				var bodyDef:b2BodyDef = new b2BodyDef();
				bodyDef.position.Set((300 * Math.random()) / SCALE, 0);
				bodyDef.angle = Math.PI / 2 * Math.random();

				// 物体を作る
				body = world.CreateBody(bodyDef);

				// 形の定義を作る
				var bodyShape:b2CircleDef = new b2CircleDef();
				bodyShape.radius = Math.random()*0.3+0.05;
				bodyShape.density = 0.5;
				bodyShape.friction = 1;
				bodyShape.restitution = 0.3;

				// 形を物体に追加する
				body.CreateShape(bodyShape);

				// 重さ・重心を計算する
				body.SetMassFromShapes();
			}
		}
		//enterFrameHandler
		private function enterFrameHandler(event:Event):void {
			world.Step(1 / 24, 10);
		}
	}
}

関連する投稿

• Box2DFlashAS3を使ってマウス操作する[Box2D-2] (0)
• 物理エンジン[Box2D]を使ったの作品紹介 (0)
• FlashDevelopの便利ショートカット (0)
• FlashDevelopのインストールと初期設定 (2)
• ムービークリップを徐々に加速させる[3-7] (0)

よく見かけてやってみたいと思っていましたが、実際やってみるとすごい苦労しました。
激しく上に掘り投げるとどっか行ってしまいます…

制作日

2010年１月8日

使用ツール

ActionScript 3.0｜FlashDevelop｜Box2DFlashAS3 ver2.0.1

まだまだ勉強不足で色んなサイトを巡回し、実験してはダメの繰り返しで取り合えずではありますが、こんな感じに仕上げました。
コードはとても見せれたもんではないので、もう少し勉強してからと言うことでお願いします。

関連する投稿

• Box2DFlashAS3を使ってマウス操作する[Box2D-2] (0)
• Box2DFlashAS3を使ってみる[Box2D-1] (0)
• ムービークリップを徐々に加速させる[3-7] (0)
• ムービークリップをボタンとして使う[2-4] (0)
• ムービークリップをボタンとして使う[2-3] (0)