davidbau.com Box2D Web

Box2D Web

I am very excited by the latest port of Box2D to javascript. It is called box2dweb, and it is Uli Hecht's Javascript translation of version 2.1a of Box2dFlash, which is in turn the ActionScript port of Erin Catto's C++ Box2D physics engine.

I have modified it a bit to keep the global namespace cleaner here. My version just hangs everything off a single global variable Box2D and avoids modifying things like the the global function prototype object. (This way plays more nicely with frameworks like jquery.) I did the cleanup by hand, but it might be nice to write a script that automates the cleanup and further normalizes the javascript idioms, so we can keep up with new box2d versions.

It's smooth on Chrome and a little jittery on Firefox (sorry IE users). Here is a demo:

In the example above, the balls are bouncier and lighter than the blocks, and the triangles are heavier and slipperier. Fifty objects are dropped on Chrome, and 20 on other browsers.

Posted by David at November 26, 2010 12:32 PM

Hi David,

This is pretty neat. It runs reasonably well in Safari : 60fps with 20 objects.

Looks like it might almost be usable on the iPad too, though here the limitation is really Apple's appallingly slow Canvas rendering.

Full-screen (portrait, 980x1144 pixels) I get 2/2 FPS.
Full-screen (landscape, 980x613 pixels) I get 10/10 FPS.

If I set the canvas size to 300x300 pixels, I get roughly 13/27 FPS, and this can be improved slightly by decreasing the target FPS or the number of objects. I'm thinking it might be good enough for a simple physics game, though as I've found before it probably needs to use SVG rendering rather than Canvas to get decent animation rates.

Cheers,
Stewart

Posted by: Stewart Greenhill at December 3, 2010 11:58 PM

Hi,

you are right, the Function.prototype.inherit is absolutely not necessary. I'll fix that soon.

By the way, I released a new version yesterday.

Note that you cannot really test the framerate in browsers except Firefox 4b7. Here's why: http://weblogs.mozillazine.org/roc/archives/2010/11/measuring_fps.html

@David, thanks for testing anyways. A comparison between 2.1a.1 and 2.1a.2 would be great.

I'm currently working on version 2 of my converter which should improve performance and allow support of IE.

Thanks for the nice post about my port.
Uli

Posted by: Uli Hecht at December 10, 2010 06:47 PM