Box2D & Javascript

After a long break which saw me completing my semester, developing a number of HTML5 mobile games (including the one in which I'm using Box2D), planning for a new website to host all of them and finally selecting courses for the new semester, I finally manage to take out time to write this series of posts on Box2D and its use in HTML5 games along with KineticJS.

This post is an introduction to Box2D (for those who do not know) and the next in the series would cover details on how to build a game using Box2D and combining it with KineticJS library.

So what is Box2D?

Box2D started as an open source C++ library, a 2-d physics engine to be precise, to simulate 2-dimensional rigid bodies. More details can be looked up on their website. It has been used in many applications and games, and have been ported to be used in various other platforms. I came to know about it with the success of Rovio's Angry Birds franchise. Box2DFlash, the flash port of the library has been extensively used and there has been multiple ports for javascript of which the following 3 appears to be the major ones - box2d-js,  box2dweb, box2d.js.

Box2d-js was converted from Box2DFlashAS3_1.4.3.1 in an automatic manner and is very old and not up-to-date. It requires a big amount of imports to get it to work and I couldn't find much support/ samples for this.

Box2d.js is a Javascript version of Box2DFlash 2.1a and Heiko Behrens, who maintains the git repository, has mentioned that this has become a part of cocos2d-javascript. There are a number of samples available in the git repository, and here is a link to one of the useful tutorials I found using this library.

Box2dweb is also a port from Box2DFlash 2.1a generated using a ActionScript - to - Javascript compiler. Its is available as one single file and is promoted by Seth Ladd on his blog along with many examples. Here is a compilation of the posts.

Box2D Resources:

• Box2D V2.2.0 Manual - Gives details about the various objects, parameters, functions in Box2D, and their uses.
• Box2DFlash documentation - More of an API and works well with box2dweb as the later being a direct conversion from the actively maintained flash port.

In the coming posts, I'll talk about how to use box2dweb in HTML5 games in conjunction with KineticJS library.
Box2D & Javascript : Part 2