Drawing boxes on the fly in Box2D

Box2D is getting more and more popular among Flash developers, but it still lacks of adeguate tutorials and documentation about making games with it.

Andrew McGrath from Gamersgarden released a great tutorial about drawing boxes on the fly on Box2D.

Every detail of the script is fully commented, so you won’t miss anything, and you will get something like this:

Click and drag with the mouse to draw boxes on the fly.

This is the source code:

package {
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.MouseEvent;
 
	import Box2D.Dynamics.*;
	import Box2D.Collision.*;
	import Box2D.Collision.Shapes.*;
	import Box2D.Common.Math.*;
 
	public class andrew extends Sprite {
		public var m_dbgSprite;
		public var m_world:b2World;
		public var m_phys_scale:Number = 30.0;
		public var m_timestep:Number = 1.0/30.0;
		public var m_iterations:Number = 10.0;
 
		//initial box coordinates when we first press mouse down
		public var initX:Number = 0.0;
		public var initY:Number = 0.0;
		public var drawing:Boolean = false;
		public function andrew() {
			/*
			A Box2D world needs three parameters: a b2AABB, gravity
			and a Booleand deciding whether or not to let bodies sleep
			when they are not being simulated.
			This saves CPU so should always be left on :)
			*/
 
			var gravity:b2Vec2 = new b2Vec2(0,9.8);
			var worldAABB:b2AABB = new b2AABB();
			worldAABB.lowerBound.Set(-1000,-1000);
			worldAABB.upperBound.Set(1000,1000);
			m_world = new b2World(worldAABB,gravity,true);
 
			//Setup Debug Draw - So that Box2D draws the shapes for us
			m_dbgSprite = new Sprite();
			addChild(m_dbgSprite);
			SetDebugDraw();
 
			//Add Our Ground
			AddStaticBox(300/m_phys_scale,440/m_phys_scale,300/m_phys_scale,50/m_phys_scale);
 
			addEventListener(Event.ENTER_FRAME,Update);
			stage.addEventListener(MouseEvent.MOUSE_DOWN,mousePressed);
			stage.addEventListener(MouseEvent.MOUSE_MOVE,mouseMoved);
			stage.addEventListener(MouseEvent.MOUSE_UP,mouseReleased);
		}
		public function mousePressed(e:MouseEvent) {
			//Store initial X and Y position
			initX = e.localX;
			initY = e.localY;
			drawing = true;
		}
		public function mouseMoved(e:MouseEvent) {
			if (drawing) {
				//Simply draw the "ghost" of the box we are about to add
				graphics.clear();
				graphics.beginFill(0xFF0000,0.5);
				graphics.drawRect(initX,initY,e.localX-initX,e.localY-initY);
			}
		}
		public function mouseReleased(e:MouseEvent) {
			graphics.clear();
			drawing = false;
 
			//Coordinates of bottom-right of box (when drawing from left to right)
			var finalX:Number = e.localX;
			var finalY:Number = e.localY;
 
			//Correct if drawing from right to left
			if (finalX < initX) {
				//If so, swap initX and finalX
				var tempX:Number = initX;
				initX = finalX;
				finalX = tempX;
			}
			if (finalY < initY) {
				//If so, swap initY and finalY
				var tempY:Number = initY;
				initY = finalY;
				finalY = tempY;
			}
			//Work out the half-width and height of the box
			var boxHalfWidth:Number = Math.abs((finalX-initX)/2);
			var boxHalfHeight:Number = Math.abs((finalY-initY)/2);
			if (boxHalfWidth > 0 && boxHalfHeight > 0) {
				AddBox((finalX-boxHalfWidth)/m_phys_scale,(finalY-boxHalfHeight)/m_phys_scale,boxHalfWidth/m_phys_scale,boxHalfHeight/m_phys_scale);
			}
		}
		/*
		NOTE: AddBox takes the _x,_y and halfwidth and halfheight parameters
		in METRES not PIXELS. This means when you call this function, always
		DIVIDE a pixel size by m_phys_scale to get it in meteres.
		*/
		public function AddBox(_x:Number,_y:Number,_halfwidth:Number,_halfheight:Number) {
			var bodyDef:b2BodyDef = new b2BodyDef();
			bodyDef.position.Set(_x,_y);
			var boxDef:b2PolygonDef = new b2PolygonDef();
			boxDef.SetAsBox(_halfwidth,_halfheight);
			boxDef.density = 1.0;
			boxDef.friction = 0.3;
			boxDef.restitution = 0.2;
			var body:b2Body = m_world.CreateBody(bodyDef);
			body.CreateShape(boxDef);
			body.SetMassFromShapes();
		}
		public function AddStaticBox(_x:Number,_y:Number,_halfwidth:Number,_halfheight:Number) {
			var bodyDef:b2BodyDef = new b2BodyDef();
			bodyDef.position.Set(_x,_y);
			var boxDef:b2PolygonDef = new b2PolygonDef();
			boxDef.SetAsBox(_halfwidth,_halfheight);
			boxDef.density = 0.0;
			var body:b2Body = m_world.CreateBody(bodyDef);
			body.CreateShape(boxDef);
			body.SetMassFromShapes();
		}
		public function Update(e:Event) {
			//We need to do this to simulate physics
			m_world.Step(m_timestep,m_iterations);
		}
		public function SetDebugDraw() {
			//Set Debug Draw (hidden here to reserve space in constructor.)
			var dbgDraw:b2DebugDraw = new b2DebugDraw();
			dbgDraw.m_sprite = m_dbgSprite;
			dbgDraw.m_drawScale = m_phys_scale;
			dbgDraw.m_fillAlpha = 0.8;
			dbgDraw.m_lineThickness = 2.0;
			dbgDraw.m_drawFlags = 0x0001 | 0x0002;
			m_world.SetDebugDraw(dbgDraw);
		}
	}
}

And this is the source code to download.

Is there anyone willing to code the routine to draw circles triangles in the same way?

Thank you Andrew!

Rate this post: 1 Star2 Stars3 Stars4 Stars5 Stars (12 votes, average: 4.67 out of 5)
Loading ... Loading ...
If you found this post useful, please consider a small donation.
» Flash Templates provided by Template Monster are pre-made web design products developed using Flash technology.
They can be easily customized to meet the unique requirements of your project.

13 Responses to “Drawing boxes on the fly in Box2D”

  1. vitaLee on January 7th, 2009 3:22 pm

    ho ho ho. this is great.
    i’ve been reading the box2d forum for the last 2 days to get used to it’s rules and strangeness.
    your posts help a lot too.

  2. New on January 7th, 2009 3:45 pm

    Why is it BLANK? Help people, last 4 or so .fla’s just won’t show up anything when I test the movie..
    (All .fla’s Box2D related, do I have wrong version or what?)

  3. mrcool on January 7th, 2009 4:34 pm

    awesome!

  4. Michael J Williams on January 7th, 2009 4:35 pm

    Wow, that’s awesome! Nice one, mcgrew.

  5. vitaLee on January 7th, 2009 4:38 pm

    actually it’s much easier to draw circles.
    i’ve already tried it.
    Emanuele how and where could i send the class to you ?

  6. Emanuele Feronato on January 7th, 2009 4:41 pm

    by email: triqui[at]libero[dot]it

  7. Shival on January 8th, 2009 9:36 am

    Impressive,
    very very impressive
    Can’t wait to see the circle and triangle routines

  8. fleshmaker on January 8th, 2009 11:03 am

    I left a post on my blog fuoridalcerchio.net about the circle routine! you can find it at http://www.fuoridalcerchio.net/wordpress/2009/01/07/box2d-circles/
    Keep up the good work!

  9. Martin on January 10th, 2009 11:11 pm

    I love this. I could play it for hours. :-)

  10. dhiraj on January 25th, 2009 4:33 pm

    i cant find the Box 2d class Library …

  11. Joshua Barnett on February 27th, 2009 4:44 pm

    I’m getting a BLANK screen as well when I attempt to test this?

  12. Joshua Barnett on February 27th, 2009 4:46 pm

    Ahh fixed change the “andrew” function instance names to the same as the document class. There are to of them

Leave a Reply




Trackbacks

  1. Drawing circles on the fly in Box2D : Emanuele Feronato on January 8th, 2009 12:44 pm

    [...] a day after Drawing boxes on the fly in Box2D I got three submissions for drawing circles on the [...]

Posts