Box2D is a lot of fun: you can build cool physics-based games with very little coding. Popular games like Angry Birds were built with it. If you haven’t yet seen the awesome Seb Lee-Delisle’s live coding example of building an Angry Bird clone in 45 minutes with the Corona SDK for iOS and Android, do it now! You’ll be inspired to build your own Angry Birds clone, like I was.
- boxbox, which I haven’t tried yet. It is an open-source JS project with a simplified API that wraps both Box2D and rendering. It’s not clear whether it exposes you to the full methods and attributes of the Box2DWeb library.
Neither of these appealed to me. I ended up rolling my own integration with EaselJS. I chose EaselJS over Processing.js (which I’ve used in the past), because of its built-in functionality for mapping events (like clicking and dragging) to the shapes. So, I rolled my own EaselJS-Box2dWeb wrapper, stole the “Ghosts and Monsters” artwork (thanks, Seb!), and got something quick and dirty working in relatively short time.
There are a couple of gotchas with integrating a graphics library and Box2Dweb. For example:
- Box2D co-ordinates are all expressed in meters, while EaselJS are expressed in pixels. Have fun with all the conversions!
- Box2D object co-ordinates represent the object’s center of mass, while EaselJS co-ordinates represent the upper-left most position of the object. This is a bit of a nuisance, and don’t forget to set a EaselJS’s Bitmap’s regX and regY properties so the object rotates around its center.
Oh, and yay for CoffeeScript!