Introducing Box2dWeb: create Box2D projects in HTML5

If you are following the blog looking for Box2D projects, but aim to try something different than AS3, I tested various javascript portings and found http://code.google.com/p/box2dweb/ is the best around now.

This is the most updated library and the whole package is stored in a single file.

So we are going to create some boxes with a mouse click, and as you can see the library works almost in the same way as AS3 version:

And this is what you’ll get:

Click on the stage/canvas to create random boxes.

Next time I’ll show you how to create a mobile game using this concept.

  • MC

    nice, but how can you attach textures to the objects?

  • Cade

    Looks to me like there is significant performance reduction (running Chrome Win7)… any word on optimization?

  • MC

    Any chance to have a basic HTML5 game anatomy tutorial? (menu_screen, gameplay_screen, gameover_screen)
    Regards

  • Thank you for this.. I’ve been wondering if box2d for HTML would be just a easy as the AS3 version.. i a quick tutorial on skinning box2d shapes in the canvas would awesome. =)

  • The world acceleration in this line

    var world = new b2World(new b2Vec2(0, 10),true);

    should be (0,-10) for downwards.

    If that is done, bodies would appear moving upwards, since for box2d y axis increases upwards, but for canvas it increases downwards, so the canvas must be flipped and made to look like a cartesian coordinate graph.

    ctx.save();
    ctx.translate(0 , canvas_height);
    ctx.scale(1 , -1);
    world.DrawDebugData();
    ctx.restore();

    Example here

    http://www.binarytides.com/javascript-box2d-tutorial/

  • MiloŇ°

    Nice, thanks!

  • keran

    Hi,

    do you have any sample for creating a chain using an edgeshape ?Or using an edgeshape?

    thanks!
    keran