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 (16 votes, average: 4.75 out of 5)
Loading ... Loading ...
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.
Be my fan on Facebook and follow me on Twitter! Exclusive content for my Facebook fans and Twitter followers

This post has 16 comments

  1. vitaLee

    on January 7, 2009 at 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 7, 2009 at 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 7, 2009 at 4:34 pm

    awesome!

  4. Michael J Williams

    on January 7, 2009 at 4:35 pm

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

  5. vitaLee

    on January 7, 2009 at 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 7, 2009 at 4:41 pm

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

  7. Shival

    on January 8, 2009 at 9:36 am

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

  8. fleshmaker

    on January 8, 2009 at 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. Drawing circles on the fly in Box2D : Emanuele Feronato

    on January 8, 2009 at 12:44 pm

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

  10. Martin

    on January 10, 2009 at 11:11 pm

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

  11. dhiraj

    on January 25, 2009 at 4:33 pm

    i cant find the Box 2d class Library …

  12. Joshua Barnett

    on February 27, 2009 at 4:44 pm

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

  13. Joshua Barnett

    on February 27, 2009 at 4:46 pm

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

  14. shan

    on September 18, 2009 at 1:22 am

    i cant find the Box 2d class Library …, too…

  15. Creation of a Flash Stabilize! clone using Box2D – part 1 : Emanuele Feronato

    on October 27, 2009 at 2:31 am

    [...] In this case, the script we are going to modify is Drawing boxes on the fly in Box2D. [...]

  16. Creation of a Flash Stabilize! clone using Box2D – part 2 : Emanuele Feronato

    on October 29, 2009 at 11:17 pm

    [...] you can see, the script looks less and less like the original Drawing boxes on the fly in Box2D and it’s starting to become a custom [...]