スマートフォンやhtml5+CSS3など新技術に四苦八苦。jQuery、AjaxなどJavaScriptも難しいですね。そんなWebに悩む人のネタ帳です。

Box2DFlashAS3にも手を出してみました。何してんだか。。。

Box2DはFlashで物理的な動きを簡単に実現できるライブラリです。以下のオフィシャルサイトよりソースはダウンロードできます。
http://box2dflash.sourceforge.net/
このページのメインに設置されているswfを見ても分かるとおり、リアルで複雑な動きを表現できます。特に目的はなくとも、とりあえず物体を設置して動かすだけで見入ってしまうような、不思議な魅力がありますよね。予想外の動きから、自分のクリエイティブな発想から、プラスアルファの効果が得られそうな気さえします。





静止した長方形の物体に、丸い物体を落下させるというシンプルなサンプルです。

前準備としては、ダウンロードしたライブラリを展開し、フォルダ「Box2D」をflaファイルの同階層に置きます。flaファイルではドキュメントクラスに「Main」を指定するだけです。そのMain.asのActionscriptコードは以下のとおり。

package {
	import Box2D.Collision.*;
	import Box2D.Collision.Shapes.*;
	import Box2D.Common.Math.*;
	import Box2D.Dynamics.*;
	import flash.events.Event;
	import flash.display.Sprite;

	public class Main extends Sprite{
		private var m_world:b2World;
		private var m_width:Number;
		private var m_height:Number;

		public function Main(){

			// 初期化
			m_width = stage.stageWidth / 100;
			m_height = stage.stageHeight / 100;

			// ワールドの作成
			var world:b2AABB = new b2AABB();
			world.lowerBound.Set(0, 0);
			world.upperBound.Set(m_width, m_height);
			var gravity:b2Vec2 = new b2Vec2(0, 10);
			m_world = new b2World(world, gravity, true);

			// 静的物体
			var bdFloor:b2BodyDef = new b2BodyDef();
			bdFloor.position.Set(m_width/2, m_height * 4/5);
			var sdFloor:b2PolygonDef = new b2PolygonDef();
			sdFloor.SetAsBox(1, 0.1);
			var myFloor:b2Body = m_world.CreateBody(bdFloor);
			myFloor.CreateShape(sdFloor);

			// 動的物体
			var bdBall:b2BodyDef = new b2BodyDef();
			bdBall.position.Set(m_width/2, m_height * 1/5);
			var sdBall:b2CircleDef = new b2CircleDef();
			sdBall.radius = 0.3;
			sdBall.density = 1;
			sdBall.restitution = 0.7;
			var myBall:b2Body = m_world.CreateBody(bdBall);
			myBall.CreateShape(sdBall);
			myBall.SetMassFromShapes();

			// デバッグ用描写
			var myDD:b2DebugDraw = new b2DebugDraw();
			myDD.m_sprite = this;
			myDD.m_drawScale = 100;
			myDD.SetFlags(b2DebugDraw.e_shapeBit);
			m_world.SetDebugDraw(myDD);
			addEventListener(Event.ENTER_FRAME, mvWorld);
		}

		public function mvWorld(e:Event):void {
			m_world.Step(1/30,10);
		}
	}
}

このコードは基本中の基本で、他のサンプルサイトでも似たようなコードを見ることができます。
まずは物理的動きを表現するワールドを設定するところからです。それに対して物体を配置してゆき、イベントリスナーで処理をスタートさせます。幅、高さ、位置の指定が特殊で、単位はm(メートル)だそうで、目安としては1m=100pxのようです。

覚えておいて損はない技術だとは思いますが。。。
何かおもしろいものを作りたいですね。何にしようかな。

このエントリーをはてなブックマークに追加

Comment

Comment Form

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Monthly Archives

Search