Emanuele Feronato » Box2D

Understanding Box2D’s one-way platforms, aka CLOUDS

Emanuele Feronato — Mon, 01 Mar 2010 23:24:20 +0000

One of the new features introduced with Box2D 2.1a is the improved contact listener class which comes in hand when we want to create one-way platforms, or “clouds”.

This can be made thanks to a function called before the contact is processed… something like “hey, two bodies are about to collide, what should I do?”… so you can decide to disable the contact for every collision you want.

The function used to do this task is PreSolve, working for all awake bodies that aren’t sensors.

If you don’t know what is a Box2D sensor, check Box2D Flash game creation tutorial – part 2.

So the concept is: listen for collisions, if a collision involves the cloud wall and the player, then check if the player is higher or lower than the cloud. If it’s lower, don’t process the collision and let the player fly through the cloud.

Let’s see the script, directly taken from Box2D Flash game creation tutorial – part 2:

package {
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.KeyboardEvent;
	import Box2D.Dynamics.*;
	import Box2D.Collision.*;
	import Box2D.Collision.Shapes.*;
	import Box2D.Common.Math.*;
	public class ball02 extends Sprite {
		// world creation
		public var world:b2World=new b2World(new b2Vec2(0,10.0),true);
		public var world_scale:int=30;
		// the player
		public var player:b2Body;
		// force to apply to the player
		public var force:b2Vec2;
		// variables to store whether the keys are pressed or not
		// true = pressed;
		// false = unpressed
		public var left,right,up,down:Boolean=false;
		// declaring my custom contact listener class
		public var contact_listener=new custom_contact_listener();
		public function ball02():void {
			// assigning the contact listener to the world
			world.SetContactListener(contact_listener);
			// calling debug draw function
			debug_draw();
			// drawing the boundaries
			draw_box(250,400,500,10,false,"ground");
			draw_box(0,200,10,400,false,"left");
			draw_box(500,200,10,400,false,"right");
			draw_box(250,0,500,10,false,"roof");
			draw_box(250,200,300,10,false,"middle");
			// adding the player at 250,200
			add_player(250,350);
			// adding some coins
			for (var i:int = 1; i<=5; i++) {
				draw_coin(Math.random()*400+50,Math.random()*150+25,Math.random()*3+2);
			}
			// listeners needed for the game to work
			addEventListener(Event.ENTER_FRAME, update);
			stage.addEventListener(KeyboardEvent.KEY_DOWN,on_key_down);
			stage.addEventListener(KeyboardEvent.KEY_UP,on_key_up);
		}
		// according to the key pressed, set the proper variable to "true"
		public function on_key_down(e:KeyboardEvent):void {
			switch (e.keyCode) {
				case 37 :
					left=true;
					break;
				case 38 :
					up=true;
					break;
				case 39 :
					right=true;
					break;
				case 40 :
					down=true;
					break;
			}
		}
		// according to the key released, set the proper variable to "false"
		public function on_key_up(e:KeyboardEvent):void {
			switch (e.keyCode) {
				case 37 :
					left=false;
					break;
				case 38 :
					up=false;
					break;
				case 39 :
					right=false;
					break;
				case 40 :
					down=false;
					break;
			}
		}
		// function to draw a coin
		public function draw_coin(px,py,r):void {
			var my_body:b2BodyDef= new b2BodyDef();
			my_body.position.Set(px/world_scale, py/world_scale);
			var my_circle:b2CircleShape=new b2CircleShape(r/world_scale);
			var my_fixture:b2FixtureDef = new b2FixtureDef();
			my_fixture.shape=my_circle;
			// look! it's a sensor!!
			my_fixture.isSensor=true;
			var world_body:b2Body=world.CreateBody(my_body);
			world_body.CreateFixture(my_fixture);
		}
		// simple function to draw a box
		public function draw_box(px,py,w,h,d,ud):void {
			var my_body:b2BodyDef= new b2BodyDef();
			my_body.position.Set(px/world_scale, py/world_scale);
			if (d) {
				my_body.type=b2Body.b2_dynamicBody;
			}
			var my_box:b2PolygonShape = new b2PolygonShape();
			my_box.SetAsBox(w/2/world_scale, h/2/world_scale);
			var my_fixture:b2FixtureDef = new b2FixtureDef();
			my_fixture.shape=my_box;
			var world_body:b2Body=world.CreateBody(my_body);
			world_body.SetUserData(ud);
			world_body.CreateFixture(my_fixture);
		}
		// function to add the player
		public function add_player(px,py):void {
			var my_body:b2BodyDef= new b2BodyDef();
			my_body.position.Set(px/world_scale, py/world_scale);
			my_body.type=b2Body.b2_dynamicBody;
			var my_circle:b2CircleShape=new b2CircleShape(10/world_scale);
			var my_fixture:b2FixtureDef = new b2FixtureDef();
			my_fixture.shape=my_circle;
			player=world.CreateBody(my_body);
			player.SetUserData("player");
			player.CreateFixture(my_fixture);
		}
		// debug draw
		public function debug_draw():void {
			var debug_draw:b2DebugDraw = new b2DebugDraw();
			var debug_sprite:Sprite = new Sprite();
			addChild(debug_sprite);
			debug_draw.SetSprite(debug_sprite);
			debug_draw.SetDrawScale(world_scale);
			debug_draw.SetFlags(b2DebugDraw.e_shapeBit);
			world.SetDebugDraw(debug_draw);
		}
		// function to be executed at every frame
		public function update(e:Event):void {
			// setting the force to null
			force=new b2Vec2(0,0);
			// according to the key(s) pressed, add the proper vector force
			if (left) {
				force.Add(new b2Vec2(-10,0));
			}
			if (right) {
				force.Add(new b2Vec2(10,0));
			}
			if (up) {
				force.Add(new b2Vec2(0,-20));
			}
			if (down) {
				force.Add(new b2Vec2(0,5));
			}
			// if there is any force, then apply it
			if (force.x||force.y) {
				player.ApplyForce(force,player.GetWorldCenter());
			}
			world.Step(1/30,10,10);
			world.ClearForces();
			// scanning through all bodies
			for (var worldbody:b2Body = world.GetBodyList(); worldbody; worldbody = worldbody.GetNext()) {
				// if a body is marked as "remove"...
				if (worldbody.GetUserData()=="remove") {
					// ... just remove it!!
					world.DestroyBody(worldbody);
				}
			}
			world.DrawDebugData();
		}
	}
}

Line 34: with the old function introduced at Understanding Box2D applicable forces I create a box marked as “middle”.

No other changes on the main file, now let’s see the custom_contact_listener.as file

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.*;
	class custom_contact_listener extends b2ContactListener {
		override public function BeginContact(contact:b2Contact):void {
			// getting the fixtures that collided
			var fixtureA:b2Fixture=contact.GetFixtureA();
			var fixtureB:b2Fixture=contact.GetFixtureB();
			// if the fixture is a sensor, mark the parent body to be removed
			if (fixtureB.IsSensor()) {
				fixtureB.GetBody().SetUserData("remove");
			}
			if (fixtureA.IsSensor()) {
				fixtureA.GetBody().SetUserData("remove");
			}
		}
		override public function PreSolve(contact:b2Contact, oldManifold:b2Manifold):void {
			// getting the fixtures that collided
			var fixtureA:b2Fixture=contact.GetFixtureA();
			var fixtureB:b2Fixture=contact.GetFixtureB();
			// variable to handle bodies y position
			var player_y_position:Number;
			var platform_y_position:Number;
			// checking if the collision bodies are the ones marked as "middle" and "player"
			if ((fixtureA.GetBody().GetUserData()=="middle" && fixtureB.GetBody().GetUserData()=="player")||(fixtureA.GetBody().GetUserData()=="player" && fixtureB.GetBody().GetUserData()=="middle")) {
				// determining if the fixtureA represents the platform ("middle") or the player
				switch (fixtureA.GetBody().GetUserData()) {
					case "middle" :
						// determining y positions
						player_y_position=fixtureB.GetBody().GetPosition().y*30;
						platform_y_position=fixtureA.GetBody().GetPosition().y*30;
						break;
					case "player" :
						// determining y positions
						player_y_position=fixtureA.GetBody().GetPosition().y*30;
						platform_y_position=fixtureB.GetBody().GetPosition().y*30;
<strong>						break;
				}
				// checking distance between bodies
				var distance = player_y_position-platform_y_position;
				// if the distance is greater than player radius + half of the platform height...
				if (distance>-14.5) {
					// don't manage the contact
					contact.SetEnabled(false);
				}
			}
		}
	}
}

Line 22: beginning of the PreSolve function, the core of this example

Lines 24-25: getting the fixtures that generated the contact

Lines 27-28: declaring two variables to store y position of both bodies

Line 30: here I am checking if the fixtures are the one associated to the player and the one associated to the cloud

Lines 32-43: according to the fixture associated to the player and the one associated to the cloud, I am saving in the variables declared at lines 27-28 the y position of both bodies. I am multiplying directly by 30 without passing the right world_scale value declared at line 13 of the main class because it’s not the purpose of this tutorial.

Line 45: Determining the vertical distance from the player and the cloud

Lines 47-50: If the player is not at least 14.5 pixels higher than the cloud, then disable the contact. Why 14.5? It’s the sum of the ball radius (10) and half the cloud height (5)… and I am not using 15 because I found sometimes the distance when the ball falls on the cloud is 14.93, so the cloud won’t “hold” the ball, letting it fall down. With 14.5, I am sure this won’t happen.

And this is the result…

Move the ball by tapping arrow keys and watch the static object in the center of the stage act as a cloud… you can fly through it from bottom to top, but you can’t do it from top to bottom.

Download the source code.

Box2D Flash game creation tutorial – part 2

Emanuele Feronato — Thu, 25 Feb 2010 09:56:23 +0000

After seeing the character creation in Box2D Flash game creation tutorial – part 1, it’s time to add some coins to collect.

This process will involve some interesting Box2D features, like sensors and custom collision management.

I would suggest to read the basics of sensors at Erase Box: the tutorial and custom collision management at Creation of a Flash Stabilize! clone using Box2D – part 4.

Although they are both referred to an older Box2D version, they’ll introduce you to sensor and collisions.

Now the concept is simple: we are placing some circular sensors around the stage (the coins), then we’ll create a custom contact listener class to check whether the player is over a coin or not. If it’s over, we’ll remove the coin.

So this is the main script:

package {
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.KeyboardEvent;
	import Box2D.Dynamics.*;
	import Box2D.Collision.*;
	import Box2D.Collision.Shapes.*;
	import Box2D.Common.Math.*;
	public class ball02 extends Sprite {
		// world creation
		public var world:b2World=new b2World(new b2Vec2(0,10.0),true);
		public var world_scale:int=30;
		// the player
		public var player:b2Body;
		// force to apply to the player
		public var force:b2Vec2;
		// variables to store whether the keys are pressed or not
		// true = pressed;
		// false = unpressed
		public var left,right,up,down:Boolean=false;
		// declaring my custom contact listener class
		public var contact_listener=new custom_contact_listener();
		public function ball02():void {
			// assigning the contact listener to the world
			world.SetContactListener(contact_listener);
			// calling debug draw function
			debug_draw();
			// drawing the boundaries
			draw_box(250,400,500,10,false,"ground");
			draw_box(0,200,10,400,false,"left");
			draw_box(500,200,10,400,false,"right");
			draw_box(250,0,500,10,false,"roof");
			// adding the player at 250,200
			add_player(250,200);
			// adding some coins
			for (var i:int = 1; i<=5; i++) {
				draw_coin(Math.random()*400+50,Math.random()*300+50,Math.random()*3+2);
			}
			// listeners needed for the game to work
			addEventListener(Event.ENTER_FRAME, update);
			stage.addEventListener(KeyboardEvent.KEY_DOWN,on_key_down);
			stage.addEventListener(KeyboardEvent.KEY_UP,on_key_up);
		}
		// according to the key pressed, set the proper variable to "true"
		public function on_key_down(e:KeyboardEvent):void {
			switch (e.keyCode) {
				case 37 :
					left=true;
					break;
				case 38 :
					up=true;
					break;
				case 39 :
					right=true;
					break;
				case 40 :
					down=true;
					break;
			}
		}
		// according to the key released, set the proper variable to "false"
		public function on_key_up(e:KeyboardEvent):void {
			switch (e.keyCode) {
				case 37 :
					left=false;
					break;
				case 38 :
					up=false;
					break;
				case 39 :
					right=false;
					break;
				case 40 :
					down=false;
					break;
			}
		}
		// function to draw a coin
		public function draw_coin(px,py,r):void {
			var my_body:b2BodyDef= new b2BodyDef();
			my_body.position.Set(px/world_scale, py/world_scale);
			var my_circle:b2CircleShape=new b2CircleShape(r/world_scale);
			var my_fixture:b2FixtureDef = new b2FixtureDef();
			my_fixture.shape=my_circle;
			// look! it's a sensor!!
			my_fixture.isSensor=true;
			var world_body:b2Body=world.CreateBody(my_body);
			world_body.CreateFixture(my_fixture);
		}
		// simple function to draw a box
		public function draw_box(px,py,w,h,d,ud):void {
			var my_body:b2BodyDef= new b2BodyDef();
			my_body.position.Set(px/world_scale, py/world_scale);
			if (d) {
				my_body.type=b2Body.b2_dynamicBody;
			}
			var my_box:b2PolygonShape = new b2PolygonShape();
			my_box.SetAsBox(w/2/world_scale, h/2/world_scale);
			var my_fixture:b2FixtureDef = new b2FixtureDef();
			my_fixture.shape=my_box;
			var world_body:b2Body=world.CreateBody(my_body);
			world_body.SetUserData(ud);
			world_body.CreateFixture(my_fixture);
		}
		// function to add the player
		public function add_player(px,py):void {
			var my_body:b2BodyDef= new b2BodyDef();
			my_body.position.Set(px/world_scale, py/world_scale);
			my_body.type=b2Body.b2_dynamicBody;
			var my_circle:b2CircleShape=new b2CircleShape(10/world_scale);
			var my_fixture:b2FixtureDef = new b2FixtureDef();
			my_fixture.shape=my_circle;
			player=world.CreateBody(my_body);
			player.CreateFixture(my_fixture);
		}
		// debug draw
		public function debug_draw():void {
			var debug_draw:b2DebugDraw = new b2DebugDraw();
			var debug_sprite:Sprite = new Sprite();
			addChild(debug_sprite);
			debug_draw.SetSprite(debug_sprite);
			debug_draw.SetDrawScale(world_scale);
			debug_draw.SetFlags(b2DebugDraw.e_shapeBit);
			world.SetDebugDraw(debug_draw);
		}
		// function to be executed at every frame
		public function update(e:Event):void {
			// setting the force to null
			force=new b2Vec2(0,0);
			// according to the key(s) pressed, add the proper vector force
			if (left) {
				force.Add(new b2Vec2(-10,0));
			}
			if (right) {
				force.Add(new b2Vec2(10,0));
			}
			if (up) {
				force.Add(new b2Vec2(0,-20));
			}
			if (down) {
				force.Add(new b2Vec2(0,5));
			}
			// if there is any force, then apply it
			if (force.x||force.y) {
				player.ApplyForce(force,player.GetWorldCenter());
			}
			world.Step(1/30,10,10);
			world.ClearForces();
			// scanning through all bodies
			for (var worldbody:b2Body = world.GetBodyList(); worldbody; worldbody = worldbody.GetNext()) {
				// if a body is marked as "remove"...
				if (worldbody.GetUserData()=="remove") {
					// ... just remove it!!
					world.DestroyBody(worldbody);
				}
			}
			world.DrawDebugData();
		}
	}
}

Let’s see the interesting lines:

Line 22: declaring my contact_listener variable, as custom_contact_listener type

Line 25: assigning my custom contact listener class to Box2D world

Lines 36-38: calling five times the draw_coin function passing three parameters: x position, y position and radius.

Lines 79-89: the draw_coin function… just a basic function that draw a circle… just notice at line 86 how I am declaring the circle as a sensor. This way the circle exists in the world but won’t physically collide with anything. Also, a sensor should be a static body, or it will fall down outside the stage as it won’t collide with anything.

Lines 150-156: scanning through all bodies to find, and eventually remove, bodies marked with remove. Such marker is handled by the custom contact listener class, located in the custom_contact_listener.as file:

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.*;
	class custom_contact_listener extends b2ContactListener {
		override public function BeginContact(contact:b2Contact):void {
			// getting the fixtures that collided
			var fixtureA:b2Fixture=contact.GetFixtureA();
			var fixtureB:b2Fixture=contact.GetFixtureB();
			// if the fixture is a sensor, mark the parent body to be removed
			if (fixtureB.IsSensor()) {
				fixtureB.GetBody().SetUserData("remove");
			}
			if (fixtureA.IsSensor()) {
				fixtureA.GetBody().SetUserData("remove");
			}
		}
	}
}

BeginContact function will give us the fixtures involved in the collision. Then at lines 15-17 and 18-20 I am checking if the fixture is a sensor, then eventually mark its parent body to be removed.

Important: don’t try to remove the body inside this function, because bodies have a locked status while they are in the middle of a timestep, so you should remove a body only after you performed the Step (line 147 of the main file). This gave me a little headache, so you’ve been warned!

This is the result:

Pick up all little circles moving the player tapping on arrow keys.

Download the source code.

Box2D Flash game creation tutorial – part 1

Emanuele Feronato — Fri, 19 Feb 2010 00:16:24 +0000

My first Flash game tutorial ever was Flash game creation tutorial – part 1.

It was the first of a series to create a game like jmtb’s ball games. It was an old AS2 series, and some steps have been ported in AS3 with Create a Flash ball game using AS3.

The “ball” game is so simple yet addictive and customizable that I think it’s the perfect game to start a tutorial series based on a new language.

This time I am not covering a new language but the famous Box2D library, but I am going to add all necessary features to make it an interesting game to play.

In this first chapter, I am going to create the ball and the way you control it, by tapping arrow keys.

I am using the basics of Understanding Box2D applicable forces and Box2D tutorial for the absolute beginners – revamped, which I recommend you to read.

Now this is the code:

package {
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.KeyboardEvent;
	import Box2D.Dynamics.*;
	import Box2D.Collision.*;
	import Box2D.Collision.Shapes.*;
	import Box2D.Common.Math.*;
	public class ball01 extends Sprite {
		// world creation
		public var world:b2World=new b2World(new b2Vec2(0,10.0),true);
		public var world_scale:int=30;
		// the player
		public var player:b2Body;
		// force to apply to the player
		public var force:b2Vec2;
		// variables to store whether the keys are pressed or not
		// true = pressed;
		// false = unpressed
		public var left,right,up,down:Boolean=false;
		public function ball01():void {
			// calling thebug draw function
			debug_draw();
			// drawing the boundaries
			draw_box(250,400,500,10,false,"ground");
			draw_box(0,200,10,400,false,"left");
			draw_box(500,200,10,400,false,"right");
			draw_box(250,0,500,10,false,"roof");
			// adding the player at 250,200
			// some listeners
			add_player(250,200);
			addEventListener(Event.ENTER_FRAME, update);
			stage.addEventListener(KeyboardEvent.KEY_DOWN,on_key_down);
			stage.addEventListener(KeyboardEvent.KEY_UP,on_key_up);
		}
		// according to the key pressed, set the proper variable to "true"
		public function on_key_down(e:KeyboardEvent):void {
			switch (e.keyCode) {
				case 37 :
					left=true;
					break;
				case 38 :
					up=true;
					break;
				case 39 :
					right=true;
					break;
				case 40 :
					down=true;
					break;
			}
		}
		// according to the key released, set the proper variable to "false"
		public function on_key_up(e:KeyboardEvent):void {
			switch (e.keyCode) {
				case 37 :
					left=false;
					break;
				case 38 :
					up=false;
					break;
				case 39 :
					right=false;
					break;
				case 40 :
					down=false;
					break;
			}
		}
		// simple function to draw a box
		public function draw_box(px,py,w,h,d,ud):void {
			var my_body:b2BodyDef= new b2BodyDef();
			my_body.position.Set(px/world_scale, py/world_scale);
			if (d) {
				my_body.type=b2Body.b2_dynamicBody;
			}
			var my_box:b2PolygonShape = new b2PolygonShape();
			my_box.SetAsBox(w/2/world_scale, h/2/world_scale);
			var my_fixture:b2FixtureDef = new b2FixtureDef();
			my_fixture.shape=my_box;
			var world_body:b2Body=world.CreateBody(my_body);
			world_body.SetUserData(ud);
			world_body.CreateFixture(my_fixture);
		}
		// function to add the player
		public function add_player(px,py):void {
			var my_body:b2BodyDef= new b2BodyDef();
			my_body.position.Set(px/world_scale, py/world_scale);
			my_body.type=b2Body.b2_dynamicBody;
			var my_circle:b2CircleShape=new b2CircleShape(10/world_scale);
			var my_fixture:b2FixtureDef = new b2FixtureDef();
			my_fixture.shape=my_circle;
			player=world.CreateBody(my_body);
			player.CreateFixture(my_fixture);
		}
		// debug draw
		public function debug_draw():void {
			var debug_draw:b2DebugDraw = new b2DebugDraw();
			var debug_sprite:Sprite = new Sprite();
			addChild(debug_sprite);
			debug_draw.SetSprite(debug_sprite);
			debug_draw.SetDrawScale(world_scale);
			debug_draw.SetFlags(b2DebugDraw.e_shapeBit);
			world.SetDebugDraw(debug_draw);
		}
		// functiojn to be executed at every frame
		public function update(e:Event):void {
			// setting the force to null
			force=new b2Vec2(0,0);
			// according to the key(s) pressed, add the proper vector force
			if (left) {
				force.Add(new b2Vec2(-10,0));
			}
			if (right) {
				force.Add(new b2Vec2(10,0));
			}
			if (up) {
				force.Add(new b2Vec2(0,-20));
			}
			if (down) {
				force.Add(new b2Vec2(0,5));
			}
			// if there is any force, then apply it
			if (force.x||force.y) {
				player.ApplyForce(force,player.GetWorldCenter());
			}
			world.Step(1/30,10,10);
			world.ClearForces();
			world.DrawDebugData();
		}
	}
}

As you can see, I did not change that much from Understanding Box2D applicable forces and Box2D tutorial for the absolute beginners – revamped.

draw_circle function at lines 19-30 in Box2D tutorial for the absolute beginners – revamped now is called add_player (lines 86-95) and places a circle in the (px,py) coordinates.

The body is named player and is declared in the class at line 14, then is used at line 125 to have the force applied with ApplyForce explained at Understanding Box2D applicable forces.

Notice how different forces are applied according to the arrow key pressed… playing with these values will change the gameplay… which values would you use?

This is the result:

Tap arrow keys to move the ball.

Download the source code.

Understanding Box2D applicable forces

Emanuele Feronato — Tue, 16 Feb 2010 12:19:07 +0000

In Box2d, bodies aren’t only affected by gravity and collisions, but you can also apply forces to them.

Knowing the right force to apply is very important when you want to control a body, as you may want to do in a Flash game

Let’s see the forces you can apply:

Applying a force

public function ApplyForce(force:b2Vec2, point:b2Vec2):void

Apply a force at a world point. If the force is not applied at the center of mass, it will generate a torque and affect the angular velocity. This wakes up the body, so you don’t have to wake it up by yourself.

The force is applied inNewtons (N).

Applying an impulse

public function ApplyImpulse(impulse:b2Vec2, point:b2Vec2):void

Apply an impulse at a point. This immediately modifies the velocity. It also modifies the angular velocity if the point of application is not at the center of mass. This wakes up the body, so you don’t have to wake it up by yourself.

The impulse is applied in Newton-seconds or kg-m/s.

Setting a linear velocity

public function SetLinearVelocity(v:b2Vec2):void

Set the linear velocity of the center of mass. This function will not work if the body is sleeping, so you must wake it up with SetAwake before applying the velocity.

What force should I apply?

You should choose the force according to the result you want to achieve. Let’s suppose you want to apply a vertical force, to make something jump in the air, and let’s suppose you can apply the force at any time, even when you just applied it.

You will have three cases:

Applying the force when the body is not moving: this happens when you apply the force when the body lies on the ground or when it’s in the air, in the moment it finished its “jumping” speed and it’s about to fall down. In this case there aren’t any noticeable difference among applied forces.

Applying the force when the body is moving up: this happens when the body is in the air and still has “jumping” speed. In this case, applying a force or an impulse will sum the “jumping” speed to the applied force to produce a “boost”, while setting the velocity again will just apply the velocity again, no matter the “jumping speed”

Applying the force when the body is falling down: this happens when the body finished its “jumping” speed and it’s falling down. As in the previous case, applying a force or an impulse will sum the falling speed to the applied force, and according to falling speed and applied force, the body will continue falling or jump a little (how little? the difference between the falling force and the applied one). Setting the velocity will just stop the body to fall and make it jumping again, no matter of the falling speed.

The script

This script will generate three tiny boxes. The left one is moved with a force, the middle one with an impulse, and the third one with a set velocity. You will apply forces clicking the mouse

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 forces extends Sprite {
		public var world:b2World=new b2World(new b2Vec2(0,10.0),true);
		public var world_scale:int=30;
		public function forces():void {
			debug_draw();
			draw_box(250,400,500,10,false,"ground");
			draw_box(100,100,10,10,true,"left");
			draw_box(250,100,10,10,true,"middle");
			draw_box(400,100,10,10,true,"right");
			addEventListener(Event.ENTER_FRAME, update);
			stage.addEventListener(MouseEvent.CLICK,applyforces);
		}
		public function draw_box(px,py,w,h,d,ud):void {
			var my_body:b2BodyDef= new b2BodyDef();
			my_body.position.Set(px/world_scale, py/world_scale);
			if (d) {
				my_body.type=b2Body.b2_dynamicBody;
			}
			var my_box:b2PolygonShape = new b2PolygonShape();
			my_box.SetAsBox(w/2/world_scale, h/2/world_scale);
			var my_fixture:b2FixtureDef = new b2FixtureDef();
			my_fixture.shape=my_box;
			var world_body:b2Body=world.CreateBody(my_body);
			world_body.SetUserData(ud);
			world_body.CreateFixture(my_fixture);
		}
		public function debug_draw():void {
			var debug_draw:b2DebugDraw = new b2DebugDraw();
			var debug_sprite:Sprite = new Sprite();
			addChild(debug_sprite);
			debug_draw.SetSprite(debug_sprite);
			debug_draw.SetDrawScale(world_scale);
			debug_draw.SetFlags(b2DebugDraw.e_shapeBit);
			world.SetDebugDraw(debug_draw);
		}
		public function applyforces(e:MouseEvent):void {
			var force:b2Vec2;
			for (var worldbody:b2Body = world.GetBodyList(); worldbody; worldbody = worldbody.GetNext()) {
				switch (worldbody.GetUserData()) {
					case "left" :
						force=new b2Vec2(0,-450);
						worldbody.ApplyForce(force,worldbody.GetWorldCenter());
						break;
					case "middle" :
						force=new b2Vec2(0,-15);
						worldbody.ApplyImpulse(force,worldbody.GetWorldCenter());
						break;
					case "right" :
						force=new b2Vec2(0,-15);
						worldbody.SetAwake(true);
						worldbody.SetLinearVelocity(force);
						break;
				}
			}
		}
		public function update(e:Event):void {
			world.Step(1/30,10,10);
			world.ClearForces();
			world.DrawDebugData();
		}
	}
}

And this is the result:

Apply forces by clicking the mouse in various times, to see the difference among ApplyForce, ApplyImpulse and SetLinearVelocity.

Download the source code.

Create incredible particle effects with Partigen 2

Emanuele Feronato — Mon, 08 Feb 2010 10:10:12 +0000

Do you remember Partigen?

Andrew Fitzgerald from Desuade released the new version, of his amazing particle effects engine: Partigen 2.

Featuring over 120 exclusive preset effects, Partigen 2 is the first and only extension for Flash that let’s you to create complex particle effects in just a click.

The list of features is huge, so I am listing the ones I found most interesting:

Full Package XML-Serialization
Fully documented AS3 API
Emitters can be created with either the IDE component or via ActionScript
Particles can be any display object that inherits the Particle class
Renderers can be shared across multiple Emitters
Pools can handle the internal creation and storage of Particle objects in memory

You can read the full list of features here

The documentation is awesome, the best I’ve seen so far in a product like this one. You can access the full API documentation, and from this link you can access a 42 minutes long video covering the entire Partigen 2 component, and you can create beautiful effects using the component in less than a minute.

Anyway, we’re not here to talk about the component, but to test the AS3 API.

Playing with AS3 API

In this example, I am going to create a particle effect with the user interface provided in the component, then I’ll export it with XML and finally add it “on the fly” to the Box2D car example.

Playing with the presets is easy and fun, and once you’re done, just press “Copy to XML” to have the XML copied into your dashboard

Then, since we don’t want external files in our game, this is the code we need:

package {
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.KeyboardEvent;
	//
	import Box2D.Dynamics.*;
	import Box2D.Collision.*;
	import Box2D.Collision.Shapes.*;
	import Box2D.Common.Math.*;
	import Box2D.Dynamics.Joints.*;
	// partigen libraries
	import com.desuade.partigen.emitters.*;
	import com.desuade.partigen.renderers.*;
	public class partigen extends Sprite {
		public var world:b2World;
		public var car_body:b2Body;
		public var front_wheel:b2Body;
		public var rear_wheel:b2Body;
		public var front_motor:b2RevoluteJointDef = new b2RevoluteJointDef();
		public var rear_motor:b2RevoluteJointDef = new b2RevoluteJointDef();
		public var fixtureDef:b2FixtureDef = new b2FixtureDef();
		public var rear_motor_added:b2RevoluteJoint;
		public var front_motor_added:b2RevoluteJoint;
		// partigen variables
		public var the_particle:particle_mc = new particle_mc();
		var particle_emitter:Emitter = new Emitter();
		public function partigen() {
			world=new b2World(new b2Vec2(0,10.0),true);
			debug_draw();
			var body:b2Body;
			var bodyDef:b2BodyDef= new b2BodyDef();
			var boxDef:b2PolygonShape = new b2PolygonShape();
			var circleDef:b2CircleShape=new b2CircleShape(20/30);
			var revoluteJointDef:b2RevoluteJointDef = new b2RevoluteJointDef();
			bodyDef.position.Set(250/30, 200/30);
			boxDef.SetAsBox(600/30, 20/30);
			fixtureDef.shape=boxDef;
			fixtureDef.friction=1;
			fixtureDef.density=1;
			body=world.CreateBody(bodyDef);
			body.CreateFixture(fixtureDef);
			bodyDef.position.Set(0/30, 200/30);
			boxDef.SetAsBox(50/30, 50/30);
			fixtureDef.shape=boxDef;
			fixtureDef.friction=1;
			fixtureDef.density=1;
			body=world.CreateBody(bodyDef);
			body.CreateFixture(fixtureDef);
			bodyDef.position.Set(500/30, 200/30);
			boxDef.SetAsBox(50/30, 50/30);
			fixtureDef.shape=boxDef;
			fixtureDef.friction=1;
			fixtureDef.density=1;
			body=world.CreateBody(bodyDef);
			body.CreateFixture(fixtureDef);
			bodyDef.position.Set(250/30, 90/30);
			bodyDef.type=b2Body.b2_dynamicBody;
			bodyDef.userData = new Sprite();
			boxDef.SetAsBox(50/30, 10/30);
			fixtureDef.shape=boxDef;
			fixtureDef.density=1;
			fixtureDef.friction=1;
			fixtureDef.restitution=0.1;
			car_body=world.CreateBody(bodyDef);
			car_body.CreateFixture(fixtureDef);
			fixtureDef.density=1;
			fixtureDef.friction=5;
			fixtureDef.density=0.1;
			fixtureDef.shape=circleDef;
			bodyDef.allowSleep=false;
			bodyDef.position.Set(car_body.GetWorldCenter().x + 40/30, car_body.GetWorldCenter().y);
			front_wheel=world.CreateBody(bodyDef);
			front_wheel.CreateFixture(fixtureDef);
			bodyDef.position.Set(car_body.GetWorldCenter().x - 40/30, car_body.GetWorldCenter().y);
			rear_wheel=world.CreateBody(bodyDef);
			rear_wheel.CreateFixture(fixtureDef);
			front_motor.enableMotor=true;
			front_motor.maxMotorTorque=10;
			front_motor.Initialize(car_body, front_wheel, front_wheel.GetWorldCenter());
			front_motor_added=world.CreateJoint(front_motor) as b2RevoluteJoint;
			rear_motor.enableMotor=true;
			rear_motor.maxMotorTorque=1;
			rear_motor.Initialize(car_body, rear_wheel, rear_wheel.GetWorldCenter());
			rear_motor_added=world.CreateJoint(rear_motor) as b2RevoluteJoint;
			addEventListener(Event.ENTER_FRAME, update);
			stage.addEventListener(KeyboardEvent.KEY_DOWN, key_down);
			// partigen code
			var particle_container:Sprite = new Sprite();
			addChild(particle_container);
			var particle_renderer:Renderer=new StandardRenderer(particle_container,'top');
			particle_emitter.renderer=particle_renderer;
			particle_emitter.particle=particle_mc;
			var emmx:XML = 
			<IDEEmitter particle="particle_mc" eps="10" burst="2" life="1" lifeSpread="*0.5" group="GroupParticle" groupAmount="0" groupProximity="10" angle="0" angleSpread="*360">
			  <Controllers>
			    <EmitterController/>
			    <ParticleController>
			      <ParticleTweenController duration="0" property="rotation">
			        <KeyframeContainer tweenClass="BasicTween" precision="0">
			          <Keyframe position="0" ease="linear" spread="*200" label="begin"/>
			          <Keyframe position="1" ease="linear" value="0" spread="*100" label="end"/>
			        KeyframeContainer>
			      ParticleTweenController>
			      <ParticlePhysicsController duration="0" flip="false" useAngle="true" property="x">
			        <ParticleTweenController duration="0" property="velocity">
			          <KeyframeContainer tweenClass="BasicTween" precision="1">
			            <Keyframe position="0" ease="linear" value="3" spread="*0" label="begin"/>
			            <Keyframe position="1" ease="linear" spread="*0" label="end"/>
			          KeyframeContainer>
			        ParticleTweenController>
			        <ParticleTweenController duration="0" property="acceleration">
			          <KeyframeContainer tweenClass="BasicTween" precision="2">
			            <Keyframe position="0" ease="linear" spread="*0" label="begin"/>
			            <Keyframe position="1" ease="linear" spread="*0" label="end"/>
			          KeyframeContainer>
			        ParticleTweenController>
			        <ParticleTweenController duration="0" property="friction">
			          <KeyframeContainer tweenClass="BasicTween" precision="2">
			            <Keyframe position="0" ease="linear" spread="*0" label="begin"/>
			            <Keyframe position="1" ease="linear" spread="*0" label="end"/>
			          KeyframeContainer>
			        ParticleTweenController>
			      ParticlePhysicsController>
			      <ParticleTweenController duration="0" property="alpha">
			        <KeyframeContainer tweenClass="BasicTween" precision="2">
			          <Keyframe position="0" ease="linear" value="0.1" spread="*0.8" label="begin"/>
			          <Keyframe position="1" ease="linear" spread="*0" label="end"/>
			        KeyframeContainer>
			      ParticleTweenController>
			      <ParticleTweenController duration="0" property="scale">
			        <KeyframeContainer tweenClass="BasicTween" precision="2">
			          <Keyframe position="0" ease="linear" value="0.3" spread="*0.5" label="begin"/>
			          <Keyframe position="1" ease="linear" value="0" spread="*0" label="end"/>
			        KeyframeContainer>
			      ParticleTweenController>
			      <ParticlePhysicsController duration="0" flip="true" useAngle="true" property="y">
			        <ParticleTweenController duration="0" property="velocity">
			          <KeyframeContainer tweenClass="BasicTween" precision="1">
			            <Keyframe position="0" ease="linear" value="3" spread="*0" label="begin"/>
			            <Keyframe position="1" ease="linear" spread="*0" label="end"/>
			          KeyframeContainer>
			        ParticleTweenController>
			        <ParticleTweenController duration="0" property="acceleration">
			          <KeyframeContainer tweenClass="BasicTween" precision="2">
			            <Keyframe position="0" ease="linear" spread="*0" label="begin"/>
			            <Keyframe position="1" ease="linear" spread="*0" label="end"/>
			          KeyframeContainer>
			        ParticleTweenController>
			        <ParticleTweenController duration="0" property="friction">
			          <KeyframeContainer tweenClass="BasicTween" precision="2">
			            <Keyframe position="0" ease="linear" spread="*0" label="begin"/>
			            <Keyframe position="1" ease="linear" spread="*0" label="end"/>
			          KeyframeContainer>
			        ParticleTweenController>
			      ParticlePhysicsController>
			    ParticleController>
			  Controllers>
			IDEEmitter>;
			particle_emitter.fromXML(emmx);
			particle_emitter.start();
		}
		public function key_down(event:KeyboardEvent):void {
			switch (event.keyCode) {
				case 39 :
					rear_motor_added.SetMotorSpeed(10);
					front_motor_added.SetMotorSpeed(10);
					break;
				case 37 :
					rear_motor_added.SetMotorSpeed(-10);
					front_motor_added.SetMotorSpeed(-10);
					break;
			}
		}
		public function debug_draw():void {
			var m_sprite:Sprite;
			m_sprite = new Sprite();
			addChild(m_sprite);
			var dbgDraw:b2DebugDraw = new b2DebugDraw();
			var dbgSprite:Sprite = new Sprite();
			m_sprite.addChild(dbgSprite);
			dbgDraw.SetSprite(m_sprite);
			dbgDraw.SetDrawScale(30);
			dbgDraw.SetFillAlpha(0.5);
			dbgDraw.SetLineThickness(1);
			dbgDraw.SetFlags(b2DebugDraw.e_shapeBit);
			world.SetDebugDraw(dbgDraw);
		}
		public function update(e : Event):void {
			world.Step(1/30,10,10);
			world.ClearForces();
			world.DrawDebugData();
			for (var bb:b2Body = world.GetBodyList(); bb; bb = bb.GetNext()) {
				if (bb.GetUserData()) {
					particle_emitter.x=bb.GetPosition().x*30;
					particle_emitter.y=bb.GetPosition().y*30;
				}
			}
		}
	}
}

As you can see, the partigen code is very small, the most of the code is the particle XML itself.

And this is the result: I wanted fake bodies to spread from the car’s body.

Move the car with left/right arrow keys and enjoy.

Final considerations

Partigen 2 is the most complete tool to create particle effects with Flash IDE and API, in a couple of minutes you will be able to create amazing effects, saving hours of trial and error.

Desuade is so confident that you’ll fall even more in love with Partigen 2, it comes with a 100% satisfaction, 60 day money-back guarantee. A single license costs $97, and it’s positively a must-have.

Box2D tutorial for the absolute beginners – revamped

Emanuele Feronato — Mon, 01 Feb 2010 21:55:11 +0000

About a year ago I published a Box2D tutorial for the absolute beginners.

With 2.1 release, a lot of things changed, so it’s time to publish another tutorial for the absolute beginners.

In this tutorial we’ll cover needed libraries to import, world creation, debug draw and the creation of static and dynamic boxes and circles. And obviously the simulation itself

This is the movie we are going to make:

And this is the script used to do it:

package {
	import flash.display.Sprite;
	import flash.events.Event;
	import Box2D.Dynamics.*;
	import Box2D.Collision.*;
	import Box2D.Collision.Shapes.*;
	import Box2D.Common.Math.*;
	public class absolute extends Sprite {
		public var world:b2World=new b2World(new b2Vec2(0,10.0),true);
		public var world_scale:int=30;
		public function absolute():void {
			debug_draw();
			draw_box(250,300,500,100,false);
			draw_box(250,100,100,100,true);
			draw_circle(100,100,50,false);
			draw_circle(400,100,50,true);
			addEventListener(Event.ENTER_FRAME, update);
		}
		public function draw_circle(px,py,r,d):void {
			var my_body:b2BodyDef= new b2BodyDef();
			my_body.position.Set(px/world_scale, py/world_scale);
			if (d) {
				my_body.type=b2Body.b2_dynamicBody;
			}
			var my_circle:b2CircleShape=new b2CircleShape(r/world_scale);
			var my_fixture:b2FixtureDef = new b2FixtureDef();
			my_fixture.shape=my_circle;
			var world_body:b2Body=world.CreateBody(my_body);
			world_body.CreateFixture(my_fixture);
		}
		public function draw_box(px,py,w,h,d):void {
			var my_body:b2BodyDef= new b2BodyDef();
			my_body.position.Set(px/world_scale, py/world_scale);
			if (d) {
				my_body.type=b2Body.b2_dynamicBody;
			}
			var my_box:b2PolygonShape = new b2PolygonShape();
			my_box.SetAsBox(w/2/world_scale, h/2/world_scale);
			var my_fixture:b2FixtureDef = new b2FixtureDef();
			my_fixture.shape=my_box;
			var world_body:b2Body=world.CreateBody(my_body);
			world_body.CreateFixture(my_fixture);
		}
		public function debug_draw():void {
			var debug_draw:b2DebugDraw = new b2DebugDraw();
			var debug_sprite:Sprite = new Sprite();
			addChild(debug_sprite);
			debug_draw.SetSprite(debug_sprite);
			debug_draw.SetDrawScale(world_scale);
			debug_draw.SetFlags(b2DebugDraw.e_shapeBit);
			world.SetDebugDraw(debug_draw);
		}
		public function update(e : Event):void {
			world.Step(1/30,10,10);
			world.ClearForces();
			world.DrawDebugData();
		}
	}
}

Libraries

Libraries are imported at lines 4-7. Box2D folder and your .fla and .as files must be in the same folder

World creation

The only line needed to create an empty world is line 9. The world class is b2World and you must pass two parameters:

* the first one is a vector representing the world gravity.

* the second one is a boolean that allows you to improve performance by not simulating inactive bodies. In Box2D terminology, an inactive body is called “sleeping body”.

Now the world is ready, but you must face the problem of representing meters with pixels. Box2D works with meters, and there is a rule saying 1 meter = 30pixels. That’s why at line 10 I am declaring world_scale at 30. You can find more information about pixels and meters at this post.

Debug draw

As you should know, Box2D does not render the scene, it’s up to you attaching real objects to Box2D bodies. Anyway, there is a debug environment you can see at lines 44-52. This is the simplest debug draw you can make: basically you create a sprite and assign it to a b2DebugDraw class. More theory about debug draw theory at this post.

There are more options to configure the debug draw, but at the moment we are keeping things as simpler as we can. Notice at line 49 how I am setting the debug scale at the same value of the world scale.

Creation of a box

The most basic box is defined by an origin (the centre of the box), a width and an height. We are doing it at lines 31-43.

Let’s see the anatomy of a simple Box2D box.

A box is a body that must be static or dynamic. Only dynamic boxes are affected by gravity, collisions and physics forces. Static ones remain immovable.

Once we create a body (line 32) place it into the world (line 33) and set it as dynamic or not (lines 34-36), we just created a generic body.

It’s time to create a polygon shape (line 37) and define it as a box (line 38). Notice when I define the shape as a box, both width and height are divided by the world scale and by 2. The second division is necessary because the SetAsBox function wants the half width and the half height.

Now we have a body and a polygon. It’s time to create a fixture. The fixture will hold various attributes such as density and restitution, but at the moment to keep things easy I just want to create a fixture (line 39) and assigning it the polygon shape previously created (line 40)

Then it’s time to place the generic body in the world (line 41) and to assign it the fixture previously created with the attached shape (line 42).

And finally the box is created.

Creation of a circle

The creation of a circle is very similar to the box creation, the only difference is the shape this time is a circle shape (line 25) the radius as parameter.

The simulation

We simulate the world in three steps: first we update the world (line 54) passing the amount of time to simulate (normally 1/30), the velocity constraint solver and the position constraint solver.

Constraint solvers determine how many times the engine sweeps over all the contacts and joints in the world to find the final position and velocity of each body. More iterations always yields a better simulation.

Finally we need to clear forces (line 55) to give more stability and it’s time to draw the debug data (line 56) if you are using the debug draw.

In the end…

In the end I created a large static box (line 13), a small dynamic one (line 14), a static (line 15) and a dynamic (line 16) sphere and I am updating the world at every frame (line 17).

Download the source code, library included.

Box2DFlash 2.1a released – what changed

Emanuele Feronato — Wed, 27 Jan 2010 15:21:25 +0000

Some days ago Boris the Brave released the new version of the popular physics library.

There are some critical changes that won’t make old projects run in the new environment.

The most important ones are:

It is now not necessary to specify a size for your world, it’ll always be large enough.
Improved collisions system
You must specify if a body is dynamic, no matter if its mass is greater than zero
Fixtures now determine material properties of shapes, such as density, friction and so on

But I think an example will be more explicative than a thousand words, so I created a simple vehicle you can control with left and right arrow keys. It uses revolute joints and motors.

This is the code you would need in the old Box2D version

package {
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.KeyboardEvent;
	import Box2D.Dynamics.*;
	import Box2D.Collision.*;
	import Box2D.Collision.Shapes.*;
	import Box2D.Common.Math.*;
	import Box2D.Dynamics.Joints.*;
	public class car extends Sprite {
		public var world:b2World;
		public var car_body:b2Body;
		public var front_wheel:b2Body;
		public var rear_wheel:b2Body;
		public var front_motor:b2RevoluteJointDef = new b2RevoluteJointDef();
		public var rear_motor:b2RevoluteJointDef = new b2RevoluteJointDef();
		public var rear_motor_added:b2RevoluteJoint
		public var front_motor_added:b2RevoluteJoint
		public function car():void {
			// world setup
			var worldAABB:b2AABB = new b2AABB();
			worldAABB.lowerBound.Set(-100, -100);
			worldAABB.upperBound.Set(100, 100);
			world=new b2World(worldAABB,new b2Vec2(0,10.0),true);
			debug_draw();
			// variables used for bodies and motors
			var body:b2Body;
			var bodyDef:b2BodyDef= new b2BodyDef();
			var boxDef:b2PolygonDef = new b2PolygonDef();
			var circleDef:b2CircleDef= new b2CircleDef();
			var revoluteJointDef:b2RevoluteJointDef = new b2RevoluteJointDef();
			// adding the ground
			bodyDef.position.Set(250/30, 200/30);
			boxDef.SetAsBox(600/30, 20/30);
			boxDef.friction=1;
			boxDef.density=0;
			body=world.CreateBody(bodyDef);
			body.CreateShape(boxDef);
			body.SetMassFromShapes();
			bodyDef.position.Set(0/30, 200/30);
			boxDef.SetAsBox(50/30, 50/30);
			boxDef.friction=1;
			boxDef.density=0;
			body=world.CreateBody(bodyDef);
			body.CreateShape(boxDef);
			body.SetMassFromShapes();
			bodyDef.position.Set(500/30, 200/30);
			boxDef.SetAsBox(50/30, 50/30);
			boxDef.friction=1;
			boxDef.density=0;
			body=world.CreateBody(bodyDef);
			body.CreateShape(boxDef);
			body.SetMassFromShapes();
			// adding car body
			bodyDef.position.Set(250/30, 90/30);
			car_body=world.CreateBody(bodyDef);
			boxDef.density=1;
			boxDef.friction=1;
			boxDef.restitution=0.1;
			boxDef.SetAsBox(50/30, 10/30);
			car_body.CreateShape(boxDef);
			car_body.SetMassFromShapes();
			// adding wheels
			circleDef.radius=20/30;
			circleDef.density=1;
			circleDef.friction=5;
			circleDef.restitution=0.1;
			// front wheel
			bodyDef.allowSleep = false;
			bodyDef.position.Set(car_body.GetWorldCenter().x + 40/30, car_body.GetWorldCenter().y);
			front_wheel=world.CreateBody(bodyDef);
			front_wheel.CreateShape(circleDef);
			front_wheel.SetMassFromShapes();
			// rear wheel
			bodyDef.position.Set(car_body.GetWorldCenter().x - 40/30, car_body.GetWorldCenter().y);
			rear_wheel=world.CreateBody(bodyDef);
			rear_wheel.CreateShape(circleDef);
			rear_wheel.SetMassFromShapes();
			// front joint
			front_motor.enableMotor=true;
			front_motor.maxMotorTorque=10;
			front_motor.Initialize(car_body, front_wheel, front_wheel.GetWorldCenter());
			front_motor_added=world.CreateJoint(front_motor) as b2RevoluteJoint;
			// rear joint
			rear_motor.enableMotor=true;
			rear_motor.maxMotorTorque=1;
			rear_motor.Initialize(car_body, rear_wheel, rear_wheel.GetWorldCenter());
			rear_motor_added=world.CreateJoint(rear_motor) as b2RevoluteJoint;
			//
			addEventListener(Event.ENTER_FRAME, update);
			stage.addEventListener(KeyboardEvent.KEY_DOWN, key_down);
		}
		public function key_down(event:KeyboardEvent):void {
			switch (event.keyCode) {
				case 39 :
					rear_motor_added.SetMotorSpeed(10);
					front_motor_added.SetMotorSpeed(10);
					break;
				case 37 :
					rear_motor_added.SetMotorSpeed(-10);
					front_motor_added.SetMotorSpeed(-10);
					break;
			}
		}
		public function debug_draw():void {
			var m_sprite:Sprite;
			m_sprite = new Sprite();
			addChild(m_sprite);
			var dbgDraw:b2DebugDraw = new b2DebugDraw();
			var dbgSprite:Sprite = new Sprite();
			m_sprite.addChild(dbgSprite);
			dbgDraw.m_sprite=m_sprite;
			dbgDraw.m_drawScale=30;
			dbgDraw.m_alpha=1;
			dbgDraw.m_fillAlpha=0.5;
			dbgDraw.m_lineThickness=1;
			dbgDraw.m_drawFlags=b2DebugDraw.e_shapeBit;
			world.SetDebugDraw(dbgDraw);
		}
		public function update(e : Event):void {
			world.Step(1/30, 10);
		}
	}
}

Take a look at the compiler errors…

And this is the new one. All changes are commented.

package {
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.KeyboardEvent;
	import Box2D.Dynamics.*;
	import Box2D.Collision.*;
	import Box2D.Collision.Shapes.*;
	import Box2D.Common.Math.*;
	import Box2D.Dynamics.Joints.*;
	public class car extends Sprite {
		public var world:b2World;
		public var car_body:b2Body;
		public var front_wheel:b2Body;
		public var rear_wheel:b2Body;
		public var front_motor:b2RevoluteJointDef = new b2RevoluteJointDef();
		public var rear_motor:b2RevoluteJointDef = new b2RevoluteJointDef();
		// this is new!!!
		public var fixtureDef:b2FixtureDef = new b2FixtureDef();
		public var rear_motor_added:b2RevoluteJoint;
		public var front_motor_added:b2RevoluteJoint;
		public function car():void {
			// world setup
			/*var worldAABB:b2AABB = new b2AABB();
			worldAABB.lowerBound.Set(-100, -100);
			worldAABB.upperBound.Set(100, 100);*/
			world=new b2World(new b2Vec2(0,10.0),true);// was world=new b2World(worldAABB,new b2Vec2(0,10.0),true);
			debug_draw();
			// variables used for bodies and motors
			var body:b2Body;
			var bodyDef:b2BodyDef= new b2BodyDef();
			var boxDef:b2PolygonShape = new b2PolygonShape();// was var boxDef:b2PolygonDef = new b2PolygonDef();
			var circleDef:b2CircleShape=new b2CircleShape(20/30);// was var circleDef:b2CircleDef = new b2CircleDef();
			var revoluteJointDef:b2RevoluteJointDef = new b2RevoluteJointDef();
			// adding the ground
			bodyDef.position.Set(250/30, 200/30);
			boxDef.SetAsBox(600/30, 20/30);
			// this is new!!
			fixtureDef.shape=boxDef;
			fixtureDef.friction=1;// was boxDef.friction=1;
			fixtureDef.density=1;// was boxDef.density=0;
			body=world.CreateBody(bodyDef);
			body.CreateFixture(fixtureDef);// was body.CreateShape(boxDef);
			// remove: body.SetMassFromShapes();
			bodyDef.position.Set(0/30, 200/30);
			boxDef.SetAsBox(50/30, 50/30);
			fixtureDef.shape=boxDef;
			fixtureDef.friction=1;// was boxDef.friction=1;
			fixtureDef.density=1;// was boxDef.density=0;
			body=world.CreateBody(bodyDef);
			body.CreateFixture(fixtureDef);// was body.CreateShape(boxDef);
			// remove: body.SetMassFromShapes();
			bodyDef.position.Set(500/30, 200/30);
			boxDef.SetAsBox(50/30, 50/30);
			// this is new!!
			fixtureDef.shape=boxDef;
			fixtureDef.friction=1;// was boxDef.friction=1;
			fixtureDef.density=1;// was boxDef.density=0;
			body=world.CreateBody(bodyDef);
			body.CreateFixture(fixtureDef);// was body.CreateShape(boxDef);
			// remove: body.SetMassFromShapes();
			// adding car body
			bodyDef.position.Set(250/30, 90/30);
			// this is new!!
			bodyDef.type=b2Body.b2_dynamicBody;
			boxDef.SetAsBox(50/30, 10/30);
			// this is new!!
			fixtureDef.shape=boxDef;
			fixtureDef.density=1;// was boxDef.density=1;
			fixtureDef.friction=1;// was boxDef.friction=1;
			fixtureDef.restitution=0.1;// was boxDef.restitution=0.1;
			car_body=world.CreateBody(bodyDef);
			car_body.CreateFixture(fixtureDef);// was body.CreateShape(boxDef);
			// remove: car_body.SetMassFromShapes();
			// adding wheels
			// remove: circleDef.radius=20/30;
			fixtureDef.density=1;// was circleDef.density=1;
			fixtureDef.friction=5;// was circleDef.friction=5;
			fixtureDef.density=0.1;// was circleDef.restitution=0.1;
			// this is new!!
			fixtureDef.shape=circleDef;
			// front wheel
			bodyDef.allowSleep=false;
			bodyDef.position.Set(car_body.GetWorldCenter().x + 40/30, car_body.GetWorldCenter().y);
			front_wheel=world.CreateBody(bodyDef);
			front_wheel.CreateFixture(fixtureDef);// was front_wheel.CreateShape(circleDef);
			// remove: front_wheel.SetMassFromShapes();
			// rear wheel
			bodyDef.position.Set(car_body.GetWorldCenter().x - 40/30, car_body.GetWorldCenter().y);
			rear_wheel=world.CreateBody(bodyDef);
			rear_wheel.CreateFixture(fixtureDef);// was rear_wheel.CreateShape(circleDef);
			// remove: rear_wheel.SetMassFromShapes();
			// front joint
			front_motor.enableMotor=true;
			front_motor.maxMotorTorque=10;
			front_motor.Initialize(car_body, front_wheel, front_wheel.GetWorldCenter());
			front_motor_added=world.CreateJoint(front_motor) as b2RevoluteJoint;
			// rear joint
			rear_motor.enableMotor=true;
			rear_motor.maxMotorTorque=1;
			rear_motor.Initialize(car_body, rear_wheel, rear_wheel.GetWorldCenter());
			rear_motor_added=world.CreateJoint(rear_motor) as b2RevoluteJoint;
			//
			addEventListener(Event.ENTER_FRAME, update);
			stage.addEventListener(KeyboardEvent.KEY_DOWN, key_down);
		}
		public function key_down(event:KeyboardEvent):void {
			switch (event.keyCode) {
				case 39 :
					rear_motor_added.SetMotorSpeed(10);
					front_motor_added.SetMotorSpeed(10);
					break;
				case 37 :
					rear_motor_added.SetMotorSpeed(-10);
					front_motor_added.SetMotorSpeed(-10);
					break;
			}
		}
		public function debug_draw():void {
			var m_sprite:Sprite;
			m_sprite = new Sprite();
			addChild(m_sprite);
			var dbgDraw:b2DebugDraw = new b2DebugDraw();
			var dbgSprite:Sprite = new Sprite();
			m_sprite.addChild(dbgSprite);
			dbgDraw.SetSprite(m_sprite); // was dbgDraw.m_sprite=m_sprite;
			dbgDraw.SetDrawScale(30); // was dbgDraw.m_drawScale=30;
			//dbgDraw.SetAlpha(1); // was dbgDraw.m_alpha=1;
			dbgDraw.SetFillAlpha(0.5); // was dbgDraw.m_fillAlpha=0.5;
			dbgDraw.SetLineThickness(1); // was dbgDraw.m_lineThickness=1;
			dbgDraw.SetFlags(b2DebugDraw.e_shapeBit); // was dbgDraw.m_drawFlags=b2DebugDraw.e_shapeBit;
			world.SetDebugDraw(dbgDraw);
		}
		public function update(e : Event):void {
			world.Step(1/30,10,10);// was world.Step(1/30, 10);
			// this is new!
			world.ClearForces() 
			// this is new!!
			world.DrawDebugData();
		}
	}
}

Download the source code, new library included.

Way of an Idea Box2D prototype – Step 3

Emanuele Feronato — Tue, 19 Jan 2010 16:56:26 +0000

Welcome to the 3rd part. In part 2 we allowed the player to draw the chalk track in a “paused” Box2D environment and then run the simulation.

Now it’s time to delete our chalk track.

A bit of theory: although the simulation is paused, the chalk bodies are already placed in the Box2D world. So we can easily select them with our old friend GetBodyAtMouse function.

Then we need to know whether the selected body is a chalk or not… we don’t want to delete other level assets or even the ball!!

So we must check if the userData of the selected body (that is the attached sprite) is a chalk. If true, we can remove the sprite from the stage and destroy the body.

This is the code:

package {
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import flash.events.KeyboardEvent;
	import Box2D.Dynamics.*;
	import Box2D.Collision.*;
	import Box2D.Collision.Shapes.*;
	import Box2D.Common.Math.*;
	public class draw extends Sprite {
		public var drawing:Boolean=false;
		public var canvas:Sprite = new Sprite();
		public var points_array:Array;
		public var pixel_dist:int=20;
		public var saved_x:int;
		public var saved_y:int;
		public var m_world:b2World;
		public var body:b2Body;
		public var bodyDef:b2BodyDef = new b2BodyDef();
		public var circleDef:b2CircleDef= new b2CircleDef();
		public var mousePVec:b2Vec2 = new b2Vec2();
		// radians to degrees conversion
		public var rad_to_deg:Number=57.2957795;
		// simulation timestep. We start at zero.
		public var timestep:Number=0;
		public function draw():void {
			// world creation
			var worldAABB:b2AABB = new b2AABB();
			worldAABB.lowerBound.Set(-100.0, -100.0);
			worldAABB.upperBound.Set(100.0, 100.0);
			m_world=new b2World(worldAABB,new b2Vec2(0,10),true);
			//
			// *** IMPORTANT: NOTICE THERE ISN'T ANY DEBUG DRAW ROUTINE ***
			// 
			// placing the ball
			bodyDef.position.Set(20/30,20/30);
			circleDef.radius=15/30;
			circleDef.density=1;
			circleDef.friction=0.5;
			circleDef.restitution=0.2;
			// ball's movieclip attachment
			bodyDef.userData = new sphere();
			bodyDef.userData.x=20;
			bodyDef.userData.y=20;
			bodyDef.userData.width=30;
			bodyDef.userData.height=30;
			addChild(bodyDef.userData);
			// end ball's movieclip attachment
			body=m_world.CreateBody(bodyDef);
			body.CreateShape(circleDef);
			body.SetMassFromShapes();
			//
			addChild(canvas);
			canvas.graphics.lineStyle(5);
			stage.addEventListener(MouseEvent.MOUSE_DOWN,mouse_pressed);
			stage.addEventListener(MouseEvent.MOUSE_MOVE,mouse_moved);
			stage.addEventListener(MouseEvent.MOUSE_UP,mouse_released);
			addEventListener(Event.ENTER_FRAME, Update, false, 0, true);
			stage.addEventListener(KeyboardEvent.KEY_DOWN, key_down);
 
		}
		public function mouse_pressed(e:MouseEvent):void {
			drawing=true;
			canvas.graphics.moveTo(mouseX,mouseY);
			points_array=new Array();
			saved_x=mouseX;
			saved_y=mouseY;
			points_array.push(saved_x);
			points_array.push(saved_y);
		}
		public function mouse_moved(e:MouseEvent):void {
			if (drawing) {
				var dist_x:int=mouseX-saved_x;
				var dist_y:int=mouseY-saved_y;
				if (dist_x*dist_x+dist_y*dist_y>pixel_dist*pixel_dist) {
					canvas.graphics.lineTo(mouseX,mouseY);
					saved_x=mouseX;
					saved_y=mouseY;
					points_array.push(saved_x);
					points_array.push(saved_y);
				}
			}
		}
		public function mouse_released(e:MouseEvent):void {
			drawing=false;
			var sx:int;
			var ex:int;
			var sy:int;
			var ey:int;
			var dist_x:int;
			var dist_y:int;
			var dist:Number;
			var angle:Number;
			var segments:int=points_array.length/2-1;
			for (var i:int=0; i<segments; i++) {
				sx=points_array[i*2];
				sy=points_array[i*2+1];
				ex=points_array[i*2+2];
				ey=points_array[i*2+3];
				dist_x=sx-ex;
				dist_y=sy-ey;
				dist=Math.sqrt(dist_x*dist_x+dist_y*dist_y);
				angle=Math.atan2(dist_y,dist_x);
				create_box((sx+ex)/60,(sy+ey)/60,Math.abs(dist)/60,2/30,angle);
			}
			canvas.graphics.clear();
			canvas.graphics.lineStyle(5);
		}
		// function to be called if the player presses space
		// switching timestep
		public function key_down(event:KeyboardEvent):void {
			// pressing SPACE
			if (event.keyCode==32) {
				if (timestep) {
					timestep=0;
				} else {
					timestep=1/30;
				}
			}
			// pressing "0" (zero)
			if (event.keyCode==48) {
				// finding the body under the mouse
				var body:b2Body=GetBodyAtMouse(true);
				// if there is an object under the mouse...
				if (body) {
					// if the body's userdata is a chalk
					if (body.m_userData is chalk) {
						// removing the Sprite
						removeChild(body.m_userData);
						// destroying the object
						m_world.DestroyBody(body);
					}
				}
			}
		}
		// this is our old friend GetBodyAtMouse
		public function GetBodyAtMouse(includeStatic:Boolean=false):b2Body {
			var mouseXWorldPhys = (mouseX)/30;
			var mouseYWorldPhys = (mouseY)/30;
			mousePVec.Set(mouseXWorldPhys, mouseYWorldPhys);
			var aabb:b2AABB = new b2AABB();
			aabb.lowerBound.Set(mouseXWorldPhys - 0.001, mouseYWorldPhys - 0.001);
			aabb.upperBound.Set(mouseXWorldPhys + 0.001, mouseYWorldPhys + 0.001);
			var k_maxCount:int=10;
			var shapes:Array = new Array();
			var count:int=m_world.Query(aabb,shapes,k_maxCount);
			var body:b2Body=null;
			for (var i:int = 0; i < count; ++i) {
				if (shapes[i].m_body.IsStatic()==false||includeStatic) {
					var tShape:b2Shape=shapes[i] as b2Shape;
					var inside:Boolean=tShape.TestPoint(tShape.m_body.GetXForm(),mousePVec);
					if (inside) {
						body=tShape.m_body;
						break;
					}
				}
			}
			return body;
		}
		public function create_box(px,py,w,h,a):void {
			var body:b2Body;
			var bodyDef:b2BodyDef;
			var boxDef:b2PolygonDef;
			bodyDef = new b2BodyDef();
			bodyDef.position.Set(px,py);
			bodyDef.angle=a;
			boxDef = new b2PolygonDef();
			boxDef.SetAsBox(w,h);
			boxDef.friction=0.3;
			boxDef.density=0;
			// box's movieclip attachment
			bodyDef.userData = new chalk();
			bodyDef.userData.x=px*30;
			bodyDef.userData.y=py*30;
			bodyDef.userData.width=w*60;
			bodyDef.userData.height=h*60;
			bodyDef.userData.rotation=a*rad_to_deg;
			addChild(bodyDef.userData);
			// end box's movieclip attachment
			body=m_world.CreateBody(bodyDef);
			body.CreateShape(boxDef);
			body.SetMassFromShapes();
		}
		public function Update(e:Event):void {
			// executing Step function and updating movieclips positions only 
			// if timestep != 0
			if (timestep) {
				m_world.Step(timestep, 10);
				for (var bb:b2Body = m_world.m_bodyList; bb; bb = bb.m_next) {
					if (bb.m_userData is Sprite) {
						bb.m_userData.x=bb.GetPosition().x*30;
						bb.m_userData.y=bb.GetPosition().y*30;
						bb.m_userData.rotation = bb.GetAngle() * (180/Math.PI);
					}
				}
			}
		}
	}
}

And this is the result:

Draw the track with your mouse, press SPACE to begin the simulation and delete the chalk pressing 0 (zero) and moving the mouse over the chalk.

No need to download anything since you can easily cut-paste this code on the Step 2 example

Shrink it Box2D prototype – Step 2

Emanuele Feronato — Fri, 08 Jan 2010 23:16:30 +0000

In the previous step I showed you how to shrink/expand any kind of polygon.

Anyway in the original game, you can’t expand objects as much as you want, because you need mass to do it, and this adds strategy to the gameplay, because you have to shrink objects to gather the necessary mass to expand other ones.

I suppose the required amount of mass is the difference between the final and the initial mass.

At the same time, when we shrink an object, we’ll gather mass… probably determined by the difference between the initial and the final mass.

When you want to play with masses, the first thing you must setup carefully is the expand/shrink ratio. In the previous step I used a 10% for both shrinking and expanding.

This leads to a glitchy gameplay because if I have a sphere with a radius = 100 and I shrink it by 10% I get a sphere with a radius = 90. But if I expand 90 by 10% I get a sphere with a radius = 99. I don’t get the original sphere. So I cannot use these values, because I need to get the initial object if I expand it and then shrink it or if I shrink it and then expand it.

So in this example I am using 20% shrinking and 25% expanding. This way, our object with radius = 100 shrinked by 20% will have a radius of 80… and a radius = 80 expanded by 25% returns 100 again.

It’s up to you to find a couple of compatible numbers.

About masses, this is the concept: when the player shrinks an object, there isn’t any problem, I just have to compare the old mass with the new one and add the difference to the available mass. To get a body’s mass, use GetMass().

When the player tries to expand an objects, things become a little harder because we can’t know the future mass of the body, unless we want to heavily play with geometry.

So we have to make a little trick: first we remove the original shape, then we create and attach the new, expanded shape to the body, so we can get the mass of the final body. If we have enough mass, then we render the body, otherwise we remove the new shape and restore the old one. Since we do everything before rendering the frame, it will work nicely.

This is the script:

package {
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import flash.events.KeyboardEvent;
	import flash.text.TextField;
	import Box2D.Dynamics.*;
	import Box2D.Collision.*;
	import Box2D.Collision.Shapes.*;
	import Box2D.Common.Math.*;
	public class shrink extends Sprite {
		var body:b2Body;
		public var m_world:b2World;
		public var m_iterations:int=10;
		public var m_timeStep:Number=1.0/30.0;
		public var mousePVec:b2Vec2 = new b2Vec2();
		// variable to store if the player is pressing SPACE
		public var space_pressed:Boolean=false;
		// initial available mass
		public var avail_mass:Number=20;
		// text field to display available mass
		var text_field:TextField = new TextField();
		public function shrink() {
			var worldAABB:b2AABB = new b2AABB();
			var bodyDef:b2BodyDef = new b2BodyDef();
			var polygon:b2PolygonDef = new b2PolygonDef();
			var circleDef:b2CircleDef= new b2CircleDef();
			worldAABB.lowerBound.Set(-100.0, -100.0);
			worldAABB.upperBound.Set(100.0, 100.0);
			m_world=new b2World(worldAABB,new b2Vec2(0,10),true);
			// debug draw start
			var m_sprite:Sprite;
			m_sprite = new Sprite();
			addChild(m_sprite);
			var dbgDraw:b2DebugDraw = new b2DebugDraw();
			var dbgSprite:Sprite = new Sprite();
			m_sprite.addChild(dbgSprite);
			dbgDraw.m_sprite=m_sprite;
			dbgDraw.m_drawScale=30;
			dbgDraw.m_alpha=1;
			dbgDraw.m_fillAlpha=0.5;
			dbgDraw.m_lineThickness=1;
			dbgDraw.m_drawFlags=b2DebugDraw.e_shapeBit;
			m_world.SetDebugDraw(dbgDraw);
			// debug draw end
			// ground
			bodyDef.position.Set(10, 12);
			polygon.SetAsBox(30, 3);
			polygon.density=0;
			polygon.friction=0.3;
			polygon.restitution=0.2;
			body=m_world.CreateBody(bodyDef);
			body.CreateShape(polygon);
			body.SetMassFromShapes();
			// circle
			bodyDef.position.Set(3,5);
			circleDef.radius=2;
			circleDef.density=1;
			circleDef.friction=0.5;
			circleDef.restitution=0.2;
			body=m_world.CreateBody(bodyDef);
			body.CreateShape(circleDef);
			body.SetMassFromShapes();
			// box
			bodyDef.position.Set(13, 5);
			polygon.SetAsBox(2, 2);
			polygon.density=1;
			polygon.friction=0.5;
			polygon.restitution=0.2;
			body=m_world.CreateBody(bodyDef);
			body.CreateShape(polygon);
			body.SetMassFromShapes();
			// triangle
			bodyDef.position.Set(13,3);
			polygon.vertexCount=3;
			polygon.vertices[0].Set(0,-2);
			polygon.vertices[1].Set(2,2);
			polygon.vertices[2].Set(-2,2);
			polygon.density=1;
			polygon.friction=0.5;
			polygon.restitution=0.2;
			body=m_world.CreateBody(bodyDef);
			body.CreateShape(polygon);
			body.SetMassFromShapes();
			// custom shape
			bodyDef.position.Set(8,4);
			polygon.vertexCount=5;
			polygon.vertices[0].Set(0,-2);
			polygon.vertices[1].Set(2,0);
			polygon.vertices[2].Set(1,2);
			polygon.vertices[3].Set(-1,2);
			polygon.vertices[4].Set(-2,0);
			polygon.density=1;
			polygon.friction=0.5;
			polygon.restitution=0.2;
			body=m_world.CreateBody(bodyDef);
			body.CreateShape(polygon);
			body.SetMassFromShapes();
			//
			addChild(text_field);
			text_field.text="Available mass: "+avail_mass.toString();
			text_field.y=330;
			text_field.x=20;
			text_field.width=300;
			//
			addEventListener(Event.ENTER_FRAME, Update, false, 0, true);
			stage.addEventListener(KeyboardEvent.KEY_DOWN, key_down);
			stage.addEventListener( KeyboardEvent.KEY_UP, key_up);
			stage.addEventListener(MouseEvent.MOUSE_DOWN, GetBodyAtMouse);
		}
		// detecting if the player pressed SPACE
		public function key_down(event:KeyboardEvent):void {
			if (event.keyCode==32) {
				space_pressed=true;
			}
		}
		// detecting if the player released SPACE
		public function key_up(event:KeyboardEvent):void {
			if (event.keyCode==32) {
				space_pressed=false;
			}
		}
		//
		public function GetBodyAtMouse(e:MouseEvent):b2Body {
			// scale multiplyers. Remember to choose compatible multipliers
			// in this case, 0.8*1.25=1 => compatible
			// 0.9*1.1=0.99 => not compabile. Must be 1
			var mult:Number=0.8;
			if (space_pressed) {
				mult=1.25;
			}
			var mouseXWorldPhys = (mouseX)/30;
			var mouseYWorldPhys = (mouseY)/30;
			mousePVec.Set(mouseXWorldPhys, mouseYWorldPhys);
			var aabb:b2AABB = new b2AABB();
			aabb.lowerBound.Set(mouseXWorldPhys - 0.001, mouseYWorldPhys - 0.001);
			aabb.upperBound.Set(mouseXWorldPhys + 0.001, mouseYWorldPhys + 0.001);
			var k_maxCount:int=10;
			var shapes:Array = new Array();
			var count:int=m_world.Query(aabb,shapes,k_maxCount);
			var body:b2Body=null;
			for (var i:int = 0; i < count; ++i) {
				var tShape:b2Shape=shapes[i] as b2Shape;
				var inside:Boolean=tShape.TestPoint(tShape.GetBody().GetXForm(),mousePVec);
				if (inside) {
					body=tShape.GetBody();
					break;
				}
			}
			// if I selected a STATIC body...
			if (body&&! body.IsStatic()) {
				// gettinc current mass
				var cur_mass:Number=body.GetMass();
				// variable to store new shape's mass
				var new_mass:Number;
				var s:b2Shape=body.GetShapeList();
				var type:int=s.GetType();
				switch (type) {
					case 0 :
						// I know it's a circle, so I am creating a b2CircleShape variable
						var circle:b2CircleShape=body.GetShapeList() as b2CircleShape;
						// getting the radius..
						var r=circle.GetRadius();
						// removing the circle shape from the body
						body.DestroyShape(circle);
						// creating a new circle shape
						var circleDef:b2CircleDef;
						circleDef = new b2CircleDef();
						// calculating new radius
						circleDef.radius=r*mult;
						circleDef.density=1.0;
						circleDef.friction=0.5;
						circleDef.restitution=0.2;
						// attach the shape to the body
						body.CreateShape(circleDef);
						// determine new body mass
						body.SetMassFromShapes();
						// determining new mass
						new_mass=body.GetMass();
						// calculating available mass after scaling
						avail_mass += (cur_mass-new_mass);
						// if there isn't enough mass...
						if (avail_mass<0) {
							// remove new circle shape and restore last used circle shape
							avail_mass+=new_mass-cur_mass;
							circle=body.GetShapeList() as b2CircleShape;
							body.DestroyShape(circle);
							circleDef = new b2CircleDef();
							circleDef.radius=r;
							circleDef.density=1.0;
							circleDef.friction=0.5;
							circleDef.restitution=0.2;
							body.CreateShape(circleDef);
							body.SetMassFromShapes();
						}
						// displaying mass
						text_field.text="Available mass: "+avail_mass.toString();
						break;
					case 1 :
						// now I know it's a polygon
						var poly:b2PolygonShape=body.GetShapeList() as b2PolygonShape;
						// UNIVERSAL POLYGON SCALING ROUTINE THANX TO ILYA
						var vertex_num:int=poly.GetVertexCount();
						var vertex_array:Array=poly.GetVertices();
						for each (var vert:b2Vec2 in vertex_array) {
							vert.Multiply(mult);
						}
						body.DestroyShape(poly);
						var new_shape:b2PolygonDef = new b2PolygonDef();
						new_shape.vertexCount=vertex_num;
						new_shape.vertices=vertex_array;
						new_shape.friction=0.5;
						new_shape.density=1;
						new_shape.restitution=0.2;
						body.CreateShape(new_shape);
						body.SetMassFromShapes();
						// determining new mass
						new_mass=body.GetMass();
						// calculating available mass after scaling
						avail_mass+=cur_mass-new_mass;
						// if there isn't enough mass...
						if (avail_mass<0) {
							// remove new polygon shape and restore last used polygon shape
							avail_mass+=new_mass-cur_mass;
							poly=body.GetShapeList() as b2PolygonShape;
							body.DestroyShape(poly);
							for each (vert in vertex_array) {
								vert.Multiply(1/mult);
							}
							new_shape = new b2PolygonDef();
							new_shape.vertexCount=vertex_num;
							new_shape.vertices=vertex_array;
							new_shape.friction=0.5;
							new_shape.density=1;
							new_shape.restitution=0.2;
							body.CreateShape(new_shape);
							body.SetMassFromShapes();
						}
						// displaying mass
						text_field.text="Available mass: "+avail_mass.toString();
						break;
				}
			}
			return body;
		}
		public function Update(e:Event):void {
			m_world.Step(m_timeStep, m_iterations);
		}
	}
}

And this is the result:

Click on a body to shrink it, click + SPACE to enlarge it, and look at your mass meter in the lower left corner.

No need to download, simply copy/paste this code in the file you can find in the previous step.

Next time, we’ll add the final gameplay.

Way of an Idea Box2D prototype – Step 2

Emanuele Feronato — Thu, 07 Jan 2010 15:17:11 +0000

It’s time to apply the concepts seen at Pausing a Box2D simulation with Way of an Idea Box2D prototype to create a paused Box2D simulation that will start only when you’ll press SPACE, and meanwhile you can draw paths, just like in the original game.

The only problem with this technique is you can’t use the debug draw to test your projects, because debug draw draws only after Step function has been executed, and since the game starts with the simulation paused, you can’t see the Box2D boxes you are drawing (and you can’t even see other assets too) until you start the simulation.

So the trick is: placing the Box2D boxes, the ones debug draw won’t draw, and attaching the movieclips to them. The movieclips will be rendered because I am adding them to stage, and they will remain in position until the simulation starts.

So the script becomes:

package {
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import flash.events.KeyboardEvent;
	import Box2D.Dynamics.*;
	import Box2D.Collision.*;
	import Box2D.Collision.Shapes.*;
	import Box2D.Common.Math.*;
	public class draw extends Sprite {
		public var drawing:Boolean=false;
		public var canvas:Sprite = new Sprite();
		public var points_array:Array;
		public var pixel_dist:int=20;
		public var saved_x:int;
		public var saved_y:int;
		public var m_world:b2World;
		public var body:b2Body;
		public var bodyDef:b2BodyDef = new b2BodyDef();
		public var circleDef:b2CircleDef= new b2CircleDef();
		// radians to degrees conversion
		public var rad_to_deg:Number=57.2957795;
		// simulation timestep. We start at zero.
		public var timestep:Number=0;
		public function draw():void {
			// world creation
			var worldAABB:b2AABB = new b2AABB();
			worldAABB.lowerBound.Set(-100.0, -100.0);
			worldAABB.upperBound.Set(100.0, 100.0);
			m_world=new b2World(worldAABB,new b2Vec2(0,10),true);
			//
			// *** IMPORTANT: NOTICE THERE ISN'T ANY DEBUG DRAW ROUTINE ***
			// 
			// placing the ball
			bodyDef.position.Set(20/30,20/30);
			circleDef.radius=15/30;
			circleDef.density=1;
			circleDef.friction=0.5;
			circleDef.restitution=0.2;
			// ball's movieclip attachment
			bodyDef.userData = new sphere();
			bodyDef.userData.x=20;
			bodyDef.userData.y=20;
			bodyDef.userData.width=30;
			bodyDef.userData.height=30;
			addChild(bodyDef.userData);
			// end ball's movieclip attachment
			body=m_world.CreateBody(bodyDef);
			body.CreateShape(circleDef);
			body.SetMassFromShapes();
			//
			addChild(canvas);
			canvas.graphics.lineStyle(5);
			stage.addEventListener(MouseEvent.MOUSE_DOWN,mouse_pressed);
			stage.addEventListener(MouseEvent.MOUSE_MOVE,mouse_moved);
			stage.addEventListener(MouseEvent.MOUSE_UP,mouse_released);
			addEventListener(Event.ENTER_FRAME, Update, false, 0, true);
			stage.addEventListener(KeyboardEvent.KEY_DOWN, key_down);
 
		}
		public function mouse_pressed(e:MouseEvent):void {
			drawing=true;
			canvas.graphics.moveTo(mouseX,mouseY);
			points_array=new Array();
			saved_x=mouseX;
			saved_y=mouseY;
			points_array.push(saved_x);
			points_array.push(saved_y);
		}
		public function mouse_moved(e:MouseEvent):void {
			if (drawing) {
				var dist_x:int=mouseX-saved_x;
				var dist_y:int=mouseY-saved_y;
				if (dist_x*dist_x+dist_y*dist_y>pixel_dist*pixel_dist) {
					canvas.graphics.lineTo(mouseX,mouseY);
					saved_x=mouseX;
					saved_y=mouseY;
					points_array.push(saved_x);
					points_array.push(saved_y);
				}
			}
		}
		public function mouse_released(e:MouseEvent):void {
			drawing=false;
			var sx:int;
			var ex:int;
			var sy:int;
			var ey:int;
			var dist_x:int;
			var dist_y:int;
			var dist:Number;
			var angle:Number;
			var segments:int=points_array.length/2-1;
			for (var i:int=0; i<segments; i++) {
				sx=points_array[i*2];
				sy=points_array[i*2+1];
				ex=points_array[i*2+2];
				ey=points_array[i*2+3];
				dist_x=sx-ex;
				dist_y=sy-ey;
				dist=Math.sqrt(dist_x*dist_x+dist_y*dist_y);
				angle=Math.atan2(dist_y,dist_x);
				create_box((sx+ex)/60,(sy+ey)/60,Math.abs(dist)/60,2/30,angle);
			}
			canvas.graphics.clear();
			canvas.graphics.lineStyle(5);
		}
		// function to be called if the player presses space
		// switching timestep
		public function key_down(event:KeyboardEvent):void {
			if (event.keyCode==32) {
				if (timestep) {
					timestep=0;
				} else {
					timestep=1/30;
				}
			}
		}
		public function create_box(px,py,w,h,a):void {
			var body:b2Body;
			var bodyDef:b2BodyDef;
			var boxDef:b2PolygonDef;
			bodyDef = new b2BodyDef();
			bodyDef.position.Set(px,py);
			bodyDef.angle=a;
			boxDef = new b2PolygonDef();
			boxDef.SetAsBox(w,h);
			boxDef.friction=0.3;
			boxDef.density=0;
			// box's movieclip attachment
			bodyDef.userData = new chalk();
			bodyDef.userData.x=px*30;
			bodyDef.userData.y=py*30;
			bodyDef.userData.width=w*60;
			bodyDef.userData.height=h*60;
			bodyDef.userData.rotation=a*rad_to_deg;
			addChild(bodyDef.userData);
			// end box's movieclip attachment
			body=m_world.CreateBody(bodyDef);
			body.CreateShape(boxDef);
			body.SetMassFromShapes();
		}
		public function Update(e:Event):void {
			// executing Step function and updating movieclips positions only 
			// if timestep != 0
			if (timestep) {
				m_world.Step(timestep, 10);
				for (var bb:b2Body = m_world.m_bodyList; bb; bb = bb.m_next) {
					if (bb.m_userData is Sprite) {
						bb.m_userData.x=bb.GetPosition().x*30;
						bb.m_userData.y=bb.GetPosition().y*30;
						bb.m_userData.rotation = bb.GetAngle() * (180/Math.PI);
					}
				}
			}
		}
	}
}

and this is the result:

draw with the mouse and press SPACE to play/pause the simulation.

Download the source code.

Next step, chalk management and goal.