Category: Flash

In my previous post I update the “Hello world” for box2D so that you can see something visual interesting.
You can find the original here: AS3: Hello Box2D.

Today I will post the same code but now how it should be.
Keeping the coding conventions in mind and making it easier to reuse code.

Still keeping in mind the original Hello world

[as]
package {

import flash.display.*;
import flash.events.*;
// Box2D Classes used in this “Hello world”
import Box2D.Dynamics.*;
import Box2D.Collision.*;
import Box2D.Collision.Shapes.*;
import Box2D.Common.Math.*;

//[SWF(width=”640″, height=”480″, backgroundColor=”#000000″, frameRate=”60″)]
public class HelloWorld extends MovieClip {

public var world:b2World;
public var iterations:int = 10;
public var timeStep:Number = 1.0 / 60.0;
public var worldScale:Number = 30.0;

// to see what you have created
private var debugDraw:b2DebugDraw;
private var isDebugDrawing:Boolean = true; // change to false and there is no debugDraw

// constructor
public function HelloWorld() {
//trace( “HelloWorld.HelloWorld” );
init();
}

/**
* lets start building our “Hello world” box2D program
*/
private function init():void {
trace( “HelloWorld.init” );

createWorld();
creatingGroundBox();
creatingDynamicBody();

setupDebugDraw();

// Add event for main loop
addEventListener(Event.ENTER_FRAME, onUpdateHandler, false, 0, true);
}

/**
* http://www.box2d.org/wiki/index.php?title=Manual/AS3#Creating_a_World
*/
private function createWorld():void {
// Creat world AABB
var worldAABB:b2AABB = new b2AABB();
worldAABB.lowerBound.Set(-100.0, -100.0);
worldAABB.upperBound.Set(100.0, 100.0);

// Define the gravity vector
var gravity:b2Vec2 = new b2Vec2 (0.0, -10.0);

// Allow bodies to sleep
var doSleep:Boolean = true;

// Construct a world object
world = new b2World(worldAABB, gravity, doSleep);
}

/**
* http://www.box2d.org/wiki/index.php?title=Manual/AS3#Creating_a_Ground_Box
*/
private function creatingGroundBox():void {
var groundBodyDef:b2BodyDef = new b2BodyDef();
groundBodyDef.position.Set(0.0, -9.0);

var groundBody:b2Body = world.CreateBody(groundBodyDef);

var groundShapeDef:b2PolygonDef = new b2PolygonDef();
groundShapeDef.SetAsBox(50.0, 10.0);

groundBody.CreateShape(groundShapeDef);
}

/**
* http://www.box2d.org/wiki/index.php?title=Manual/AS3#Creating_a_Dynamic_Body
*/
private function creatingDynamicBody ():void {
var bodyDef:b2BodyDef = new b2BodyDef();
bodyDef.position.Set(10.0, 10.0);
var body:b2Body = world.CreateBody(bodyDef);

var shapeDef:b2PolygonDef = new b2PolygonDef();
shapeDef.SetAsBox(1.0, 1.0);
shapeDef.density = 1.0;
shapeDef.friction = 0.3;
shapeDef.restitution = 0.8;
body.CreateShape(shapeDef);
body.SetMassFromShapes();

}

// extra to visualize
private function setupDebugDraw():void {
if(isDebugDrawing) {
debugDraw = new b2DebugDraw();
debugDraw.m_sprite = new Sprite();

addChild(debugDraw.m_sprite);

debugDraw.m_drawScale = 30;
debugDraw.m_fillAlpha = .25;
debugDraw.m_lineThickness = 1;
debugDraw.m_drawFlags = b2DebugDraw.e_shapeBit | b2DebugDraw.e_jointBit ;
world.SetDebugDraw (debugDraw);
}
}

/**
* http://www.box2d.org/wiki/index.php?title=Manual/AS3#Simulating_the_World_.28of_Box2D.29
*/
public function onUpdateHandler(e:Event):void{
world.Step(timeStep, iterations);
}

} // end class

} // end package
[/as]

So all you need to do is CTRL+ENTER.

And you will have something like this:

In my previous post I update the “Hello world” for box2D so that you can see something visual happening.
You can find the original here: AS3: Hello Box2D.

Today I will make it a little bit more attractive (remove trace).

First we change some settings to make it more fun to watch at!

The groundBodeDef (strange name for something that is the ceiling) is moved more down so you can see where the bodyDef is bouncing off.
[as]
//groundBodyDef.position.Set(0.0, -10.0); // [mck]: old code
groundBodyDef.position.Set(0.0, -9.0);
[/as]

The bodyDef is moved to the center and dropped a little higher
[as]
//bodyDef.position.Set(0.0, 4.0); // [mck]: old code
bodyDef.position.Set(10.0, 10.0);
[/as]

And the shapeDef is bouncy so that you can see what box2D can do:
[as]
shapeDef.restitution = 0.8; // [mck]: extra new code
[/as]

And delete the trace:
[as]
var position:b2Vec2 = body.GetPosition();
var angle:Number = body.GetAngle();
trace(position.x +’,’+ position.y +’,’+ angle);
[/as]

End result

The document class (HelloWorld.as) will look like this:

[as]
package {

import flash.display.*;
import flash.events.*;
// Box2D Classes used in this “Hello world”
import Box2D.Dynamics.*;
import Box2D.Collision.*;
import Box2D.Collision.Shapes.*;
import Box2D.Common.Math.*;

// [SWF(width=”640″, height=”480″, backgroundColor=”#000000″, frameRate=”60″)]
public class HelloWorld extends Sprite {

private var body:b2Body;
private var world:b2World;

// constructor
public function HelloWorld() {
trace( “HelloWorld.HelloWorld” );

////////////////////////////////////////////////////////////////////////////////////////////////////
// http://www.box2d.org/wiki/index.php?title=Manual/AS3#Creating_a_World
////////////////////////////////////////////////////////////////////////////////////////////////////
// Create world AABB
var worldAABB:b2AABB = new b2AABB();
worldAABB.lowerBound.Set(-100.0, -100.0);
worldAABB.upperBound.Set(100.0, 100.0);

// Define the gravity vector
var gravity:b2Vec2 = new b2Vec2 (0.0, -10.0);

// Allow bodies to sleep
var doSleep:Boolean = true;

// Construct a world object
// var world:b2World = new b2World(worldAABB, gravity, doSleep); // [mck]: old code
world = new b2World(worldAABB, gravity, doSleep);

////////////////////////////////////////////////////////////////////////////////////////////////////
// http://www.box2d.org/wiki/index.php?title=Manual/AS3#Creating_a_Ground_Box
////////////////////////////////////////////////////////////////////////////////////////////////////
var groundBodyDef:b2BodyDef = new b2BodyDef();
groundBodyDef.position.Set(0.0, -10.0);

var groundBody:b2Body = world.CreateBody(groundBodyDef);

var groundShapeDef:b2PolygonDef = new b2PolygonDef();
groundShapeDef.SetAsBox(50.0, 10.0);

groundBody.CreateShape(groundShapeDef);

////////////////////////////////////////////////////////////////////////////////////////////////////
// http://www.box2d.org/wiki/index.php?title=Manual/AS3#Creating_a_Dynamic_Body
////////////////////////////////////////////////////////////////////////////////////////////////////
var bodyDef:b2BodyDef = new b2BodyDef();
bodyDef.position.Set(0.0, 4.0);
// var body:b2Body = world.CreateBody(bodyDef); // [mck]: old code
body = world.CreateBody(bodyDef);

var shapeDef:b2PolygonDef = new b2PolygonDef();
shapeDef.SetAsBox(1.0, 1.0);
shapeDef.density = 1.0;
shapeDef.friction = 0.3;
body.CreateShape(shapeDef);
body.SetMassFromShapes();

////////////////////////////////////////////////////////////////////////////////////////////////////
// http://www.box2d.org/wiki/index.php?title=Manual/AS3#Debug_Drawing
////////////////////////////////////////////////////////////////////////////////////////////////////
var debugDraw:b2DebugDraw = new b2DebugDraw();
debugDraw.m_sprite = new Sprite();

addChild(debugDraw.m_sprite);

debugDraw.m_drawScale = 30;
debugDraw.m_fillAlpha = .25;
debugDraw.m_lineThickness = 1;
debugDraw.m_drawFlags = b2DebugDraw.e_shapeBit | b2DebugDraw.e_jointBit ;
world.SetDebugDraw (debugDraw);

//
addEventListener(Event.ENTER_FRAME, onUpdateHandler, false, 0, true);
}

////////////////////////////////////////////////////////////////////////////////////////////////////
// http://www.box2d.org/wiki/index.php?title=Manual/AS3#Simulating_the_World_.28of_Box2D.29
////////////////////////////////////////////////////////////////////////////////////////////////////
public function onUpdateHandler(e:Event):void{

var timeStep:Number = 1.0 / 60.0;
var iterations:Number = 10;

world.Step(timeStep, iterations);

}

} // end class

} // end package

[/as]

So all you need to do is CTRL+ENTER.

And you will have something like this:

Is this it? No, lets make it better.
Tomorrow more

In my previous post I started with a “Hello world” for box2DFlash.
You can find the original here: AS3: Hello Box2D.

When you get it working you will not be satisfied: a black swf, with only a trace in the output panel.

Today I will make the “Hello world” more visible.

Debug_Drawing

This the preferred method of drawing these physics entities for debugging, rather than accessing the data directly. The reason is that much of the necessary data is internal and subject to change.

source: Debug_Drawing

Box2D has a debugDraw class that lets you see what you have built, they call it DebugDraw.
Take the code from yesterday and place this code before Simulating_the_World code.
[as]
var debugDraw:b2DebugDraw = new b2DebugDraw();
debugDraw.m_sprite = new Sprite();

addChild(debugDraw.m_sprite);

debugDraw.m_drawScale = 30;
debugDraw.m_fillAlpha = .25;
debugDraw.m_lineThickness = 1;
debugDraw.m_drawFlags = b2DebugDraw.e_shapeBit | b2DebugDraw.e_jointBit ;
world.SetDebugDraw (debugDraw);
[/as]

So all you need to do is CTRL+ENTER.

Nice effect isn’t it? Almost? Well at least you see something although it’s not impressive…
Yeah, it’s isn’t much. Lets see how we can improve this.

Improve Debug_Drawing

The problem is that the debug window is created and executed 60 times, but because it is done in a for loop, you only see the end result (after 60 updates).
To see animation (if you follow the trace you see that something is moving) we need to update (visible) the data in dbgDraw more and we will use the frame rate to update it (yesterday set to 60 frames).
But for that there needs to be changed more than just a couple of lines

First we need to add some variables:
[as]
private var world:b2World;
private var body:b2Body;
[/as]
and change some related code:
[as]
// Construct a world object
// var world:b2World = new b2World(worldAABB, gravity, doSleep); // [mck]: old code
world = new b2World(worldAABB, gravity, doSleep);
[/as]
and
[as]
// var body:b2Body = world.CreateBody(bodyDef); // [mck]: old code
body = world.CreateBody(bodyDef);
[/as]

and remove the code add at Simulating_the_World with
[as]
addEventListener(Event.ENTER_FRAME, onUpdateHandler, false, 0, true);
[/as]

and add
[as]
////////////////////////////////////////////////////////////////////////////////////////////////////
// http://www.box2d.org/wiki/index.php?title=Manual/AS3#Simulating_the_World_.28of_Box2D.29
////////////////////////////////////////////////////////////////////////////////////////////////////
public function onUpdateHandler(e:Event):void{

var timeStep:Number = 1.0 / 60.0;
var iterations:Number = 10;

world.Step(timeStep, iterations);

var position:b2Vec2 = body.GetPosition();
var angle:Number = body.GetAngle();
trace(position.x +’,’+ position.y +’,’+ angle);
}
[/as]

End result

The document class (HelloWorld.as) will look like this:

[as]
package {

import flash.display.*;
import flash.events.*;
// Box2D Classes used in this "Hello world"
import Box2D.Dynamics.*;
import Box2D.Collision.*;
import Box2D.Collision.Shapes.*;
import Box2D.Common.Math.*;

// [SWF(width="640", height="480", backgroundColor="#000000", frameRate="60")]
public class HelloWorld3 extends Sprite {

private var body:b2Body;
private var world:b2World;

// constructor
public function HelloWorld() {
trace( "HelloWorld.HelloWorld" );

////////////////////////////////////////////////////////////////////////////////////////////////////
// http://www.box2d.org/wiki/index.php?title=Manual/AS3#Creating_a_World
////////////////////////////////////////////////////////////////////////////////////////////////////
// Create world AABB
var worldAABB:b2AABB = new b2AABB();
worldAABB.lowerBound.Set(-100.0, -100.0);
worldAABB.upperBound.Set(100.0, 100.0);

// Define the gravity vector
var gravity:b2Vec2 = new b2Vec2 (0.0, -10.0);

// Allow bodies to sleep
var doSleep:Boolean = true;

// Construct a world object
// var world:b2World = new b2World(worldAABB, gravity, doSleep); // [mck]: old code
world = new b2World(worldAABB, gravity, doSleep);

////////////////////////////////////////////////////////////////////////////////////////////////////
// http://www.box2d.org/wiki/index.php?title=Manual/AS3#Creating_a_Ground_Box
////////////////////////////////////////////////////////////////////////////////////////////////////
var groundBodyDef:b2BodyDef = new b2BodyDef();
groundBodyDef.position.Set(0.0, -10.0);

var groundBody:b2Body = world.CreateBody(groundBodyDef);

var groundShapeDef:b2PolygonDef = new b2PolygonDef();
groundShapeDef.SetAsBox(50.0, 10.0);

groundBody.CreateShape(groundShapeDef);

////////////////////////////////////////////////////////////////////////////////////////////////////
// http://www.box2d.org/wiki/index.php?title=Manual/AS3#Creating_a_Dynamic_Body
////////////////////////////////////////////////////////////////////////////////////////////////////
var bodyDef:b2BodyDef = new b2BodyDef();
bodyDef.position.Set(0.0, 4.0);
// var body:b2Body = world.CreateBody(bodyDef); // [mck]: old code
body = world.CreateBody(bodyDef);

var shapeDef:b2PolygonDef = new b2PolygonDef();
shapeDef.SetAsBox(1.0, 1.0);
shapeDef.density = 1.0;
shapeDef.friction = 0.3;
body.CreateShape(shapeDef);
body.SetMassFromShapes();

////////////////////////////////////////////////////////////////////////////////////////////////////
// http://www.box2d.org/wiki/index.php?title=Manual/AS3#Debug_Drawing
////////////////////////////////////////////////////////////////////////////////////////////////////
var debugDraw:b2DebugDraw = new b2DebugDraw();
debugDraw.m_sprite = new Sprite();

addChild(debugDraw.m_sprite);

debugDraw.m_drawScale = 30;
debugDraw.m_fillAlpha = .25;
debugDraw.m_lineThickness = 1;
debugDraw.m_drawFlags = b2DebugDraw.e_shapeBit | b2DebugDraw.e_jointBit ;
world.SetDebugDraw (debugDraw);

//
addEventListener(Event.ENTER_FRAME, onUpdateHandler, false, 0, true);
}

////////////////////////////////////////////////////////////////////////////////////////////////////
// http://www.box2d.org/wiki/index.php?title=Manual/AS3#Simulating_the_World_.28of_Box2D.29
////////////////////////////////////////////////////////////////////////////////////////////////////
public function onUpdateHandler(e:Event):void{

var timeStep:Number = 1.0 / 60.0;
var iterations:Number = 10;

world.Step(timeStep, iterations);

var position:b2Vec2 = body.GetPosition();
var angle:Number = body.GetAngle();
trace(position.x +’,’+ position.y +’,’+ angle);
}

} // end class

} // end package
[/as]

So all you need to do is CTRL+ENTER.

Now we see something moving, and we have an endless stream of trace data.

It’s better, but there is more room for improvement…
tomorrow more.

In programming the Hello world is probably the first you will ever make in a new language.
In the box2D wiki you can find a “Hello world” in box2DFlash style: AS3: Hello Box2D.

Easy as it should be … or is it?
This is not the “Hello world” I expected, so I’ll post one that helps you more on your way.

Hello_Box2D

source: Hello_Box2D

Lets start with a Flash document width 640px, height 480px, backgroundColor=”#000000″ and a framerate 60.
And add a document class: HelloWorld.
Save this .fla (for example HelloWorldBox2d.fla).

Now get your favorite code-editor (I suggest FlashDevelop) and create that document class, name it HelloWorld.as:
[as]
package {

import flash.display.Sprite;
import flash.events.Event;
// Classes used in this example
import Box2D.Dynamics.*;
import Box2D.Collision.*;
import Box2D.Collision.Shapes.*;
import Box2D.Common.Math.*;

public class HelloWorld extends Sprite{

// constructor
public function HelloWorld() {
trace( “HelloWorld.HelloWorld” );
}

} // end class

} // end package
[/as]
and save it next to the HelloWorldBox2d.fla.

You can see that I already add the import needed for Box2D.

The last thing you need to do is download the box2D classes: http://sourceforge.net/projects/box2dflash
Extract the zip file and copy the folder box2d next to the HelloWorldBox2d.fla and the HelloWorld.as

And now you are set…

Creating_a_World

Every Box2D program begins with the creation of a world object. This is the physics hub that manages memory, objects, and simulation.

source: Creating_a_World

The next piece of code can be placed in the constructor (public function HelloWorld() )
[as]
// Creat world AABB
var worldAABB:b2AABB = new b2AABB();
worldAABB.lowerBound.Set(-100.0, -100.0);
worldAABB.upperBound.Set(100.0, 100.0);

// Define the gravity vector
var gravity:b2Vec2 = new b2Vec2 (0.0, -10.0);

// Allow bodies to sleep
var doSleep:Boolean = true;

// Construct a world object
var world:b2World = new b2World(worldAABB, gravity, doSleep);
[/as]

Creating_a_Ground_Box

source: Creating_a_Ground_Box

[as]
var groundBodyDef:b2BodyDef = new b2BodyDef();
groundBodyDef.position.Set(0.0, -10.0);

var groundBody:b2Body = world.CreateBody(groundBodyDef);

var groundShapeDef:b2PolygonDef = new b2PolygonDef();
groundShapeDef.SetAsBox(50.0, 10.0);

groundBody.CreateShape(groundShapeDef);
[/as]

Creating_a_Dynamic_Body

We can use the same technique to create a dynamic body. The main difference, besides dimensions, is that we must establish the dynamic body’s mass properties.

source: Creating_a_Dynamic_Body

[as]
var bodyDef:b2BodyDef = new b2BodyDef();
bodyDef.position.Set(0.0, 4.0);
var body:b2Body = world.CreateBody(bodyDef);

var shapeDef:b2PolygonDef = new b2PolygonDef();
shapeDef.SetAsBox(1.0, 1.0);
shapeDef.density = 1.0;
shapeDef.friction = 0.3;
body.CreateShape(shapeDef);
body.SetMassFromShapes();
[/as]

Simulating_the_World

So we have initialized the ground box and a dynamic box. Now we are ready to set Newton loose to do his thing. We just have a couple more issues to consider.

source: Simulating_the_World
[as]
var timeStep:Number = 1.0 / 60.0;
var iterations:Number = 10;

for (var i:Number = 0; i < 60; ++i) { world.Step(timeStep, iterations); var position:b2Vec2 = body.GetPosition(); var angle:Number = body.GetAngle(); trace(position.x +','+ position.y +','+ angle); } [/as]

End result

The document class (HelloWorld.as) will look like this:

[as]
package {

import flash.display.Sprite;
// Box2D Classes used in this “Hello world”
import Box2D.Dynamics.*;
import Box2D.Collision.*;
import Box2D.Collision.Shapes.*;
import Box2D.Common.Math.*;

public class HelloWorld2 extends Sprite {

// constructor
public function HelloWorld() {
trace( “HelloWorld.HelloWorld” );

////////////////////////////////////////////////////////////////////////////////////////////////////
// http://www.box2d.org/wiki/index.php?title=Manual/AS3#Creating_a_World
////////////////////////////////////////////////////////////////////////////////////////////////////
// Create world AABB
var worldAABB:b2AABB = new b2AABB();
worldAABB.lowerBound.Set(-100.0, -100.0);
worldAABB.upperBound.Set(100.0, 100.0);

// Define the gravity vector
var gravity:b2Vec2 = new b2Vec2 (0.0, -10.0);

// Allow bodies to sleep
var doSleep:Boolean = true;

// Construct a world object
var world:b2World = new b2World(worldAABB, gravity, doSleep);

////////////////////////////////////////////////////////////////////////////////////////////////////
// http://www.box2d.org/wiki/index.php?title=Manual/AS3#Creating_a_Ground_Box
////////////////////////////////////////////////////////////////////////////////////////////////////
var groundBodyDef:b2BodyDef = new b2BodyDef();
groundBodyDef.position.Set(0.0, -10.0);

var groundBody:b2Body = world.CreateBody(groundBodyDef);

var groundShapeDef:b2PolygonDef = new b2PolygonDef();
groundShapeDef.SetAsBox(50.0, 10.0);

groundBody.CreateShape(groundShapeDef);

////////////////////////////////////////////////////////////////////////////////////////////////////
// http://www.box2d.org/wiki/index.php?title=Manual/AS3#Creating_a_Dynamic_Body
////////////////////////////////////////////////////////////////////////////////////////////////////
var bodyDef:b2BodyDef = new b2BodyDef();
bodyDef.position.Set(0.0, 4.0);
var body:b2Body = world.CreateBody(bodyDef);

var shapeDef:b2PolygonDef = new b2PolygonDef();
shapeDef.SetAsBox(1.0, 1.0);
shapeDef.density = 1.0;
shapeDef.friction = 0.3;
body.CreateShape(shapeDef);
body.SetMassFromShapes();

////////////////////////////////////////////////////////////////////////////////////////////////////
// http://www.box2d.org/wiki/index.php?title=Manual/AS3#Simulating_the_World_.28of_Box2D.29
////////////////////////////////////////////////////////////////////////////////////////////////////
var timeStep:Number = 1.0 / 60.0;
var iterations:Number = 10;

for (var i:Number = 0; i < 60; ++i) { world.Step(timeStep, iterations); var position:b2Vec2 = body.GetPosition(); var angle:Number = body.GetAngle(); trace(position.x +','+ position.y +','+ angle); } } } // end class } // end package [/as] So all you need to do is CTRL+ENTER. Nice effect isn't it? No? Only some numbers in the output panel? Yeah I know that was not very useful... So next post will be a better/improved version of the Hello world box2D style >> read Hello box2d – part 2