arturnavi

Ok, this is the first of an tutorial series about Box2D, I'll try to keep post about this cool Physics engine.

Now let's start.

First you need to get you Box2D API, you can get it at http://box2dflash.sourceforge.net/, once you got it make sure you add it to you main API libraries or any folder where you usually put your third party Libs.

You can check the content of the zip file, you can find some fun stuff basics and advanced examples, they call hat the test bed .

Now all you need is open you Flash CS3 create a new FLA and use the follow class like document class (Make sure you have set your source folder a Library references);

Before you compile let's make clear some basics concept in Box 2D:

Box2D: is a physics engine, it will not draw movieclips for you, heroes or cars, is important to understand that Box2D main duty is to Simulate. It throws the physics and calculus numbers,is not properly a game engine, we use to buid our own game engine and supports its physics. It has a buil-in Debug draw but is just that a Debug.

Bodies and Shapes : Box2d World works with rigid physics bodies, all in Box2D is a body and it has shape associate with it, The body has the variables like the mass the force and the position, the shapes holds the geometry for collisions, friction and , Based in both Box2D build his math and throws the numbers.

Ok now you can get something like:

and lets see the code:

/**
*Author: blog@arturnavi.com
*/
package {
	import Box2D.Collision.Shapes.b2CircleDef;
	import Box2D.Collision.Shapes.b2PolygonDef;
	import Box2D.Collision.b2AABB;
	import Box2D.Common.Math.b2Vec2;
	import Box2D.Dynamics.b2Body;
	import Box2D.Dynamics.b2BodyDef;
	import Box2D.Dynamics.b2DebugDraw;
	import Box2D.Dynamics.b2World;

	import flash.display.Sprite;
	import flash.events.Event;

	//si quieres compilar esto en Flash builder remueve el siguiente comentario y coloca la clase como main application.
	//[SWF(width='400', height='500', backgroundColor='#000000', frameRate='31')]
	public class HelloWorld extends Sprite
	{
		//define nuestro mundo
		private var _worldAABB:b2World;
		//nuestros numero de iteraciones para que Box resuelve ecaciones en cada paso
		private var _iterations:Number =10;
		//El numero de pasos
		private var _timeSteps:Number =1.0/30.0;

		public function HelloWorld(){

			createWorld();
			createBodies();
		}

		private function createWorld():void{

			//crea la iteracion principal
			addEventListener(Event.ENTER_FRAME,update,false,0,true);

			//crea el box que compone el mundo principal entre mas grande mejor
			var worldBoxAABB:b2AABB = new b2AABB();
			worldBoxAABB.lowerBound.Set(-100,-100);
			worldBoxAABB.upperBound.Set(100,100);

			//variable booleana que nos indica el estado de nuestros elmentos iniciales y que define si nuestros cuerpos dormiran
			var sleep:Boolean = true;

			//crea nuestro componente de gravedad
			var gravity:b2Vec2 = new b2Vec2(0,10);

			//inicia nuestro mundo;
			_worldAABB = new b2World(worldBoxAABB,gravity,sleep);

			//inicia los shapes de debug
			var debugDraw:b2DebugDraw = new b2DebugDraw();
			var debugSprite:Sprite = new Sprite();

			//lo añadimos al stage Box2D usa el graphics api para realizar un aproximacion de la representacion fisica de nuestros cuuerpos
			addChild(debugSprite);

			debugDraw.m_sprite = debugSprite;
			debugDraw.m_fillAlpha=.5;
			debugDraw.m_lineThickness=1;
			debugDraw.m_drawScale =30.0;
			debugDraw.m_alpha=.5;
			// con los flags podemos configurar que queremos que nos muestre nuestro debug, para mas info chequea la documentacion de Box.
			debugDraw.m_drawFlags = b2DebugDraw.e_shapeBit | b2DebugDraw.e_centerOfMassBit;
			_worldAABB.SetDebugDraw(debugDraw);

		}

		private function createBodies():void{

			var body:b2Body;
			var bodyDef:b2BodyDef;
			var boxDef:b2PolygonDef;
			var cirlceDef:b2CircleDef;

			//creamos un piso

			//creamos la definición del cuerpo para definir su posición en el espacio;
			bodyDef = new b2BodyDef();
			bodyDef.position.Set(0,15);

			//definimos uss propiedades fisicas a traves de una definicion de forma;
			boxDef = new b2PolygonDef();
			boxDef.SetAsBox(40,1.5);
			boxDef.friction =0.3;
			boxDef.density=0;

			//creamos el cuerpo como tal en nuestro mundo;

			body = _worldAABB.CreateBody(bodyDef);
			body.CreateShape(boxDef);
			body.SetMassFromShapes();

			//ahora las paredes izq
			bodyDef = new b2BodyDef();
			bodyDef.position.Set(0,0);

			boxDef = new b2PolygonDef();
			boxDef.SetAsBox(1,40);
			boxDef.friction =0.3;
			boxDef.density=0;			

			body = _worldAABB.CreateBody(bodyDef);
			body.CreateShape(boxDef);
			body.SetMassFromShapes();

			//ahora las paredes der
			bodyDef = new b2BodyDef();
			bodyDef.position.Set(14,0);

			boxDef = new b2PolygonDef();
			boxDef.SetAsBox(1,40);
			boxDef.friction =0.3;
			boxDef.density=0;			

			body = _worldAABB.CreateBody(bodyDef);
			body.CreateShape(boxDef);
			body.SetMassFromShapes();						

			//creamos formas aleatoriamente
			//cubos
			for(var i:uint=0;i<5;i++){
				bodyDef = new b2BodyDef();
				bodyDef.position.x = Math.random() * 10;
				bodyDef.position.y = Math.random() * 20;

				var w:Number = Math.random() + .5;
				var h:Number = Math.random() + .5;

				boxDef = new b2PolygonDef();
				boxDef.SetAsBox(w,h);
				boxDef.density=1;
				boxDef.friction = 0.3;
				boxDef.restitution = 0.2;

				body = _worldAABB.CreateBody(bodyDef);
				body.CreateShape(boxDef);
				body.SetMassFromShapes();

			}

			//circulos
			for(var j:uint=0;j<5;j++){
				bodyDef = new b2BodyDef();
				bodyDef.position.x = Math.random() * 10;
				bodyDef.position.y = Math.random() * 20;

				var r:Number = Math.random() + .3;

				cirlceDef = new b2CircleDef();
				cirlceDef.density=1;
				cirlceDef.radius =r;
				cirlceDef.friction = 0.3;
				cirlceDef.restitution = 1;

				body = _worldAABB.CreateBody(bodyDef);
				body.CreateShape(cirlceDef);
				body.SetMassFromShapes();

			}			

		}

		private function update(evt:Event):void{
			_worldAABB.Step(_timeSteps,_iterations);
		}
	}
}

lines 61-68 : Here is where we crete our debug draw view, if you comment his you will see nothing.

lines 93-95 : Here is where we add all the definitions to our word, this is the standard way to add anything to our Box2D world. As you see we previously defined the body stats then the body shape stats. You can see how this is repeated in all the code to create the walls and the objects.

line 173: Here is our basic loop where we tell to Box iterate and calculate.

Here is the source:
basics_box2d_src

For more detailed functions API, please the Box2d documentation, I ll keep posting more specific tutorials, I hope you like.