Box2D orientation for the JavaScript developer
Box2D is an open source 2D physics engine with a strong community, numerous ports, and has been tested and deployed in many games (such as Rolando and Angry Birds). HTML5 games are an exciting new platform, and with modern JavaScript engines and hardware accelerated graphics, browsers are now capable of running more demanding gaming experiences complete with physics emulations.
Upcoming Box2D presentations
I will be presenting an overview of Box2D for HTML5 games at onGameStart, the first HTML5 game conference, in September, 2011. Shortly after that, I will present the same material at HTML5 Dev Conf in San Francisco. So September is Box2D physics month for me!
Brief History
Box2D is written and maintained by its original author, Erin Catto. Erin, who works for Blizzard Entertainment, built the library for a physics tutorial at GDC back in March 2006. It appears that the library was publicly released in Sept 2007, and a version 2.0 landed in March 2008. The 2.1 release from April 2010 included some sweeping changes. The lastest version of Box2D, 2.2, was just released in August 2011, and included performance improvements for large worlds, new joint types like wheel and rope, and many bug fixes (see the release notes).
Ports
Originally written in C, it has since been ported to numerous languages, including (but not limited to) Java, JavaScript, and ActionScript.
There are at least two ports of Box2D to JavaScript, however you should probably try Box2D-Web. This version is seemingly kept up to date, as it tracks another up to date Box2DFlash port via automatic source code translation.
Simulation
Box2D can simulate convex, rigid body objects interacting with properties such as restitution, gravity, and friction, and with sizes ranging from approximately 0.1 meters to 10 meters. Let's break all of that down.
 |
| From the Box2D Manual |
The engine can't natively handle concave objects, however it is possible to simulate them by joining two convex objects together via a joint.
Rigid body means, to Box2D, that each object is treated like it is as hard as "a diamond." In other words, the distance between each bit of matter inside of the object is constant.
Restitution is the "bounciness" of the object. You can control this for each object.
Gravity is simulated, and does not have to be the standard 9.8/s/s we all learned back in school. Nor does gravity need to always go down, it's a vector you can define. Interestingly, you can define gravity per object for greater control.
Friction can also be controlled per object.
Box2D was built with Meters/Kilograms/Seconds units in mind, and is optimized for objects that are approximately 0.1 meters (think Blackberry) to 10 meters (think schoolbus). Box2D can't handle a skyscraper or specks of dust. This implies that Box2D has a different size and position scale than your game will. Your game will probably deal with pixels as you draw to the screen, and you should provide a scale between pixels and Box2D size units. It appears that a scale of 30 is fairly common, which implies a range of 3 pixels on the small end to 300 pixels on the large end.
Summary
Box2D is a well tested, open source 2D physics engine with an active community and many ports. If you are looking to write an HTML5 game that requires physics simulations, you should give Box2D a try.
Next Steps
The next blog post will show you how to get started with the library, and how to get some blocks and balls bouncing on screen.