Box2D orientation for the JavaScript developer

Sponsor: Register today for New Game, the conference for HTML5 game developers. Learn from Mozilla, Opera, Google, Spil, Bocoup, Mandreel, Subsonic, Gamesalad, EA, Zynga, and others at this intimate and technically rich conference. Join us for two days of content from developers building HTML5 games today. Nov 1-2, 2011 in San Francisco. Register now!

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).


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.


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.


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.
1 comment

Popular posts from this blog

  • Sponsor:  Register today for  New Game, the conference for HTML5 game developers . Learn from Mozilla, Opera, Google, Spil, Bocoup, Mandreel, Subsonic, Gamesalad, EA, Zynga, and others at this intimate and technically rich conference. Join us for two days of content from developers building HTML5 games today. Nov 1-2, 2011 in San Francisco.  Register now ! This is the second article in a Box2D series, following the Box2D Orientation article. The Box2DWeb port of Box2D contains a nice example to show off the basics of integrating physics simulations into your web app. This post will provide a walkthrough of the example, explaining the high level concepts and code. First, let's see the example in action. The code for the above is open source and available on GitHub. It was adapted from Box2DWeb's example . Animating Before we look at Box2D, it's important to understand how the above simulation is animated. You might think setInterval or setTimeout is
  • In which I port a snazzy little JavaScript audio web app to Dart , discover a bug, and high-five type annotations. Here's what I learned. [As it says in the header of this blog, I'm a seasoned Dart developer. However, I certainly don't write Dart every day (I wish!). Don't interpret this post as "Hi, I'm new to Dart". Instead, interpret this post as "I'm applying what I've been documenting."] This post analyzes two versions of the same app, both the original (JavaScript) version and the Dart version. The original version is a proxy for any small JavaScript app, there's nothing particularly special about the original version, which is why it made for a good example. This post discusses the differences between the two implementations: file organization, dependencies and modules, shims, classes, type annotations, event handling, calling multiple methods, asynchronous programming, animation, and interop with JavaScript libraries. F
  • Angular and Polymer, sitting in a DOM tree, B-i-n-d-i-n-g. First comes components, Then comes elements, Then comes the interop with the node dot bind. Angular , a super heroic MVC framework, and Polymer , polyfills and enhancements for custom elements built on top of Web Components, can live harmoniously in the same app. This post shows you how to connect Angular-controlled components to Polymer-controlled elements via data binding. And we do it all in Dart . Angular and Polymer I get asked "Should I use Angular or Polymer?" a lot. My answer is, "Yes". That is, both libraries have distinct strengths, and you can use both in the same app. Polymer excels at creating encapsulated custom elements. You can use those custom elements in any web app or web page, regardless if that app is built with Angular, Ember, etc. Angular excels at application engineering, with dependency injection, end-to-end testability, routing, and services. Here are som