Tuesday, August 24th, 2010

Blow Things Up!

Category: Animation

Jonas Wagner has ported the Flash 2D physics engine Box2DFlash to JavaScript:

In his demo Jonas uses the Canvas tag to map the physics simulations on. Click on it to create explosions:

Jonas talks about the approach he used to convert the original library from ActionScript to JavaScript:

At first I thought this conversion would be trivial as both actionscript and javascript are dialects of ECMAScript. Well, I was wrong. Nevertheless I continued to follow my regex based approach, basically trying to ram my head through a wall. After a few attempts I succeeded to convert Box2DAS3 to javascript. It had a nasty bug though. Two solid cubes were able to penetrate each other when they fell on their edges. The reason? ActionScript supports ‘properties’. I didn’t know about this and the conversion script does not support it. In the end I fixed the few properties in the translated code by hand because I was too lazy to add support for getters and setters to the conversion script. Now it seems to work pretty well. Please keep in mind, this is not a generic actionscript to javascript compiler, it’s just a script that happens to work for box2dflash.

The explosions in the demo are simulated by shooting out a few tracer particles with a high density and velocity. The benefit over just applying an impulse to each object is that the strength of the impulse is proportional to the surface area. Also the force of the explosion will to some extent be redirected to the side by the floor. When using this in production code you would probably want to destroy the tracer particles after their first collision or a few seconds.

You can grab the converted JavaScript yourself. There isn’t any current documentation but you can follow the existing Flash box2dflash documentation.

Here’s what the explode function looks like in Jonas’ test demo for example:

function explode(x, y) {
var ntracer = 25;
for(var i = 0; i < ntracer; i++) { var a = Math.PI/ntracer*2*i; var vx = Math.cos(a); var vy = Math.sin(a); var bodyDef = new b2BodyDef(); bodyDef.position.Set(x+vx, y+vy); bodyDef.isBullet = true; var body = world.CreateBody(bodyDef); var shapeDef = new b2CircleDef(); shapeDef.radius = 0.1; //var shapeDef = new b2PolygonDef(); //shapeDef.SetAsBox(1.0, 1.0); shapeDef.restitution = 0.0; shapeDef.density = 5000.0/ntracer; shapeDef.friction = 0.0; body.CreateShape(shapeDef); body.SetMassFromShapes(); body.ApplyImpulse({x: vx*500, y:vy*500}, {x:x, y:y}); body.w = 1.0; body.h = 1.0; explosionParticles.push(body); } } [/javascript] This library is useful for games and fancy user interfaces using HTML5. [via Mr. Doob]

Posted by Brad Neuberg at 5:00 am

3.3 rating from 19 votes


Comments feed TrackBack URI

I can’t wait for the next wave of browser games that will be JavaScript-based rather than Flash-based. It’s going to make JavaScript speed more and more important as time goes on.

Comment by Skilldrick — August 24, 2010

This has been done before: http://box2d-js.sourceforge.net/. It would be great to have a well supported js 2d library :)

Comment by theGecko — August 24, 2010

This was ported years ago in the Box2DJS project – http://box2d-js.sourceforge.net/index2.html

I use it in my webOS game Mazer (http://developer.palm.com/webChannel/index.php?packageid=com.chofter.mazer), and yes, it’s fantastic.

Comment by sos — August 24, 2010

That’s pretty sweet.

Comment by cancelbubble — August 24, 2010

engine fails on opera.. or opera fails the engine..?

Comment by YangombiUmpakati — August 26, 2010

Leave a comment

You must be logged in to post a comment.