memo.at sonic: 2008年5月アーカイブ

Box2DFlashAS3（2.0.0）を使ってみる - その3（マウス操作編）

2008年5月14日 12:58

オブジェクトをマウス操作（ドラッグ）で動かすというのをやってみる。
と言っても詳しい資料がなかなか見つからないのでよく理解出来てない、、
とりあえずサンプルにあったものを拝借して動かしてみる。

ただ、ドラッグの処理の仕方が特殊なので注意。

続きを読む ≫

まずは入力用のライブラリをインポート。マウス座標の変数と、入力用のオブジェクトを作成。
それと入力用オブジェクトを作成するときにspriteが必要になってくるからそれも作成。
（これは後々MCをBox2Dので作成したオブジェクトに貼付ける際にも必要になってくる）
そして、マウス位置を取得する関数、ドラッグする関数、マウスの位置にあるオブジェクトを取得する関数の3つの関数を用意。
↓毎フレームマウス位置を取得する関数。

↓実際にドラッグする関数。

↓マウスの位置にあるオブジェクトを取得する関数。

そして上記3つの関数を毎フレーム実行すればドラッグできる。

以下今までの全ソース
・ソース

≪ 続きを隠す

まずは入力用のライブラリをインポート。マウス座標の変数と、入力用のオブジェクトを作成。
それと入力用オブジェクトを作成するときにspriteが必要になってくるからそれも作成。
（これは後々MCをBox2Dので作成したオブジェクトに貼付ける際にも必要になってくる）
そして、マウス位置を取得する関数、ドラッグする関数、マウスの位置にあるオブジェクトを取得する関数の3つの関数を用意。
↓毎フレームマウス位置を取得する関数。

↓実際にドラッグする関数。

↓マウスの位置にあるオブジェクトを取得する関数。

そして上記3つの関数を毎フレーム実行すればドラッグできる。

以下今までの全ソース
・ソース

Box2DFlashAS3（2.0.0）を使ってみる - その2（図形編）

2008年5月13日 14:43

前回は単純な円形と四角形を作ったけど今回は多角形を。
ライブラリのソースを見たところ最大8角までの図形が作れるみたい。

作り方は簡単で、b2PolygonDefのvertexCountで角の数を設定し、各頂点の座標を指定するだけ。

続きを読む ≫

五角形以上の場合は角の数を増やして、頂点座標もそれに合わせて追加すればできる。

そして、より複雑な図形を作る場合はそれらの形を組み合わせる。
b2BodyDefには複数のオブジェクトを登録できて、それらを一つのオブジェクトとして生成することができる。
たとえばカプセルっぽいものを作るとすると↓こんな感じ。長くなって来たからソースをアップロード。

・ソース

≪ 続きを隠す

五角形以上の場合は角の数を増やして、頂点座標もそれに合わせて追加すればできる。

そして、より複雑な図形を作る場合はそれらの形を組み合わせる。
b2BodyDefには複数のオブジェクトを登録できて、それらを一つのオブジェクトとして生成することができる。
たとえばカプセルっぽいものを作るとすると↓こんな感じ。長くなって来たからソースをアップロード。

・ソース

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

2008年5月12日 21:34

ずっと物理エンジンに手を出そうと思ってて手が着かなかったけど、最近ようやく触ったからメモ。
物理エンジンと言っても色々種類があってどれが良いのか迷った。
最終候補として「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 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.*;
	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 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の世界を生成。

};
			//まずは動く円形オブジェクト
			{
				
				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);
		}
	}
}

最近知った便利なこと

2008年5月 6日 22:01

ASを書いていて、長くなってくるとだんだんと見づらくなってくる。
コメントアウトで区切ったりするのが普通だったけど、functionの中のプログラムの塊を「{}」で括れることが判明。

こりゃ良いや。見やすい！

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

2008年5月アーカイブ

Box2DFlashAS3（2.0.0）を使ってみる - その3（マウス操作編）

Box2DFlashAS3（2.0.0）を使ってみる - その2（図形編）

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

最近知った便利なこと

Search

Calender

Categories

Latest Posts

Archives