iio with Box2D

Download Box2DWeb

The iio Engine integrates with Box2dWeb by providing a graphics engine and an application deployment framework.

Box2dWeb is a JavaScript port of Box2DFlash. The libraries are almost identical, so the Box2DFlash Documentation page can be used as a coding reference.

You can find a lot of resources and help at the main Box2D Forums. JavaScript specific discussions can be found at their JS Forums.

Using Box2D with iio is very straightforward. First, make sure you load the Box2DWeb JS file before the iioEngine JS file:

<!doctype html>
  <body>
    <script type="text/javascript" src="Box2dWeb-2.1.a.3.js"></script>
    <script type="text/javascript" src="iioEngine-1.2.1.js"></script>
    <!-- application script -->
  </body>
</html>

The iio Engine attaches functions to classes in the Box2D libraries, so the Box2D framework needs to loaded first.

You will now have access to the Box2D framework in your iio Application script.

Similar to iio Objects, you need to access Box2D classes through a package structure.

Box2D has a lot of packages, so you'll want to load local variables for them before you do anything else:

//load some common classes
var b2Vec2 = Box2D.Common.Math.b2Vec2
   ,b2BodyDef = Box2D.Dynamics.b2BodyDef
   ,b2Body = Box2D.Dynamics.b2Body
   ,b2FixtureDef = Box2D.Dynamics.b2FixtureDef
   ,b2World = Box2D.Dynamics.b2World
   ,b2PolygonShape = Box2D.Collision.Shapes.b2PolygonShape
   ,b2CircleShape = Box2D.Collision.Shapes.b2CircleShape;

As always, the first step in creating content for a Box2D application is to create a world object.

//create a box2d world
var world = new b2World(
        new b2Vec2(0, 10) //gravity
       ,true              //allow sleep
    );

The next thing that is good to do is to pass the new world object to your AppManager:

//give io a reference to the world
io.addB2World(world);

This will allow the AppManager to control the world's step function. You can set your world's FPS and define a custom update script by using the setB2Framerate function:

//start the update loop
io.setB2Framerate(60, function(){
  //code called 60x a second
}

The process for creating objects is unaltered:

//Define a fixture
var fixDef = new b2FixtureDef;
fixDef.density = 1.0;
fixDef.friction = 0.3;
fixDef.restitution = 0.5;

//Set the shape
fixDef.shape = new b2PolygonShape;
fixDef.shape.SetAsBox(2,2);

//Define a body
var bodyDef = new b2BodyDef;
bodyDef.type = b2Body.b2_dynamicBody;
bodyDef.position.Set(5,5);

//Create the body
var body = world.CreateBody(bodyDef);

//Create the fixture
var fixture = body.CreateFixture(fixDef);

After you create the object though, you must pass the new body object to your AppManager, so that it can render its fixture(s):

//give new bodies to your AppManager
io.addObj(body);

Images and styles can be applied to a fixture's shape property just like any iio Object, but you must call the prepGraphics function with your b2Scale variable (which is auto set by the AppManager to 30) before hand:

fixture.GetShape()
       .prepGraphics(io.b2Scale)
       .setStrokeStyle('black', 2)
       .addImage('path/image.png');

The next section documents exactly which graphics functions are added to which Box2D classes.

Two B2D demo applications are available to view and download. Visit the extensions or demos pages to find them.