Well i would start by saying that Box2D Flash made my life so easy 😀 and Physics Is FUN 🙂

I have been making physics based 2D platform games in Flash ActionScript 3.0 for just one past one month. yes i am newbie in Flash world. For Physics based game i chose Box2D Flash 2.1 and why did i chose Box2D Flash ?? cuz it had a good reviews from other developers and it was the first library that i stumble into via google haha 😀
But at the end it gets my job done much easier that i thought. Its very powerful library and meets my needs till now.

So i was playing around with the library by going through many tutorials, you’l get many on the net. Many of them were very very useful to me and got me started at instant.

Well now lets come back to the subject of this post: Using Movieclip with Box2D !! Please don’t get confused with the name of the post 🙂 This post is about how i used movieclip from fla library or images with Box2D flash, at start i used to play with shapes like polygons and circles, collision between shapes and all that. But when i learned those things and wanted to make basic game simulation demo then i didn’t know how to use real Images with the library. I searched many tutorials but i didn’t get the way to use real images with the library. Then i stumbled into a forum where this topic has been discussed. So now here i am goint to tell how to use movieclip with library i.e instead of showing circle and polygons moving around and interacting, you’l be using movieclips ot bitmaps.

I’l assume that u know basic setup and use of Box2D Flash 2.1 because i won’t be explaining those things, i’l just explain how movieclip will be used. And maybe someone have better way to use it so please share it in comment.

First of all, for newbies like me, please go to this tutorial. It has good explanation of using Box2D and its concept. The Movielclip from fla that i am using here has been downloaded from here Adobe Article

1) Create the Shape definition for MovieClip that will be used (literally), its shape definition for the box2d shape.

var bodyDef:b2BodyDef=new b2BodyDef();
bodyDef.type=b2Body.b2_dynamicBody;
bodyDef.position.Set(SWF_HALF_WIDTH/PIXELS_TO_METER-1.5,4);

2) Create the body. And we are assigning the instance of Movieclip to body using SetUserData function. you could say we are associating Movieclip data to body. I don’t have other way to explain it. 🙂 here texture is the instance of my movieclip that i created in fla file. Image is shown below

Moviclip from fla

var body:b2Body=world.CreateBody(bodyDef);
body.SetUserData(texture);

3) Now we create our shape.

var dynamicBox:b2PolygonShape=new b2PolygonShape();
dynamicBox.SetAsBox(2.1,2.1);

4) We can set various properties when we create the fixture.

var fixtureDef:b2FixtureDef=new b2FixtureDef();
fixtureDef.shape=dynamicBox;
fixtureDef.density=1;
fixtureDef.friction=1.0;
body.CreateFixture(fixtureDef);

5) Set the position of movieclip relative to the position of shape body that movieclip will represent

body.GetUserData().x = body.GetPosition().x*PIXELS_TO_METER;
body.GetUserData().y = body.GetPosition().y*PIXELS_TO_METER;

6) Add the moviclip

addChild(body.GetUserData());

7) I am calling update function on ENTER_FRAME

addEventListener(Event.ENTER_FRAME,update);

8] update function where physics world will update and object will interact

private function update(event:Event):void{
    var timeStep:Number=1/30;
    var velocityIterations:int=6;
    var positionIterations:int=2;

world.Step(timeStep,velocityIterations,positionIterations);

world.ClearForces();

for(var worldbody:b2Body = world.GetBodyList(); worldbody; worldbody = worldbody.GetNext()){

if(worldbody.GetUserData()!=null){

             worldbody.GetUserData().x = worldbody.GetPosition().x*PIXELS_TO_METER;
             worldbody.GetUserData().y = worldbody.GetPosition().y*PIXELS_TO_METER;
             worldbody.GetUserData().rotation=(worldbody.GetAngle())*180/Math.PI;

In above update function, inside for loop, i am iterating through world list for bodies and in each iteration i am checking if each body in world has movieclip/userdata associated. If userdata is not null then i am updating movieclip in this case so we are setting the position values of body shape to our movieclip in general and it will behave as shapes do. I hope i haven’t made u confused . I tried my best to explain this. It works.
Download Source Files

Gracias