Box2D & Javascript: Part 3

In part 2: I covered a basic setup for box2d based simulations and in this long promised final installment  of the tutorial series, I will cover the integration with KineticJS library. The most important aspect of this part is how to use a framework like KineticJS and use their features for image rendering and manipulation in physics based simulations without having to write your own physics engine for it.

Press 'd' to toggle debugDraw mode

Box2d Demo - by Aniruddha Loya

Now let's break up the code and see how it works

Box2D & Javascript: Part 2

In part 1: I covered what Box2d is along with some of its application and a number of links to possible box2d resource. Now in this blog, I'm going to demonstrate a basic setup for box2d based simulations and the next one will cover the integration with KineticJS library.

Press 'd' to toggle debugDraw mode

Box2d Demo - by Aniruddha Loya

This example was adapted from the Box2dWeb example.

Now let's break up the code and see how it works

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