Use Box2d with EaselJS Shapes?

Question

I'm trying to learn Box2d and EaselJS. So far, I've been working with the "debug" shapes of Box2d. How can I make custom shapes from EaselJS, physics enabled? For example, I have the following code to spawn random balls on the screen.

var fixDef = new box2d.b2FixtureDef();
        fixDef.density = 1;
        fixDef.friction = 0.5;
        fixDef.restitution = 0.5;
        var bodyDef = new box2d.b2BodyDef();
        bodyDef.type = box2d.b2Body.b2_dynamicBody;
        bodyDef.position.x = Math.random()*800/SCALE;
        bodyDef.position.y = 0;
        fixDef.shape = new box2d.b2CircleShape(Math.random()*100/SCALE);
        world.CreateBody(bodyDef).CreateFixture(fixDef);

How can I use EaselJS shape objects?

Thanks!

Answer 1

For every DisplayObject (Shape, Bitmap, ect..) that you want to display, you need an own b2dObject. Then, every time you update the stage (or your b2dWorld) you have to retreive the position and rotation of the b2dObject and apply it to your shape -> done. You can find a very good example here: https://github.com/CreateJS/sandbox/blob/master/EaselJS_Box2dWeb

What you'll need is something like this:

var pt = body.GetPosition(); var sprite = ball.sprite; sprite.x = pt.x*WORLD_SCALE; sprite.y = pt.y*WORLD_SCALE; sprite.rotation = body.GetAngle()/Math.PI*180;