Starling + Box2d - Collision not precise

Question

I create stage walls and a box inside on my mobile app using starling + as3.

Ok, now when I test the app the box falls but it does not match the walls, as if there was an offset:

https://www.dropbox.com/s/hd4ehnfthh0ucfm/box.png

Here is how I created the boxes (walls and the box).

It seems like there is an offset hidden, what do you think?

public function createBox(x:Number, y:Number, width:Number, height:Number, rotation:Number = 0, bodyType:uint = 0):void {

            /// Vars used to create bodies
            var body:b2Body;
            var boxShape:b2PolygonShape;
            var circleShape:b2CircleShape;

               var fixtureDef:b2FixtureDef = new b2FixtureDef();
            fixtureDef.shape = boxShape;
            fixtureDef.friction = 0.3;
            // static bodies require zero density
            fixtureDef.density = 0;

             var quad:Quad;

                bodyDef = new b2BodyDef();               
                bodyDef.type = bodyType;
                bodyDef.position.x = x / WORLD_SCALE;
                bodyDef.position.y = y / WORLD_SCALE;

                // Box
                boxShape = new b2PolygonShape();
                boxShape.SetAsBox(width / WORLD_SCALE, height / WORLD_SCALE);
                fixtureDef.shape = boxShape;
                fixtureDef.density = 0;
                fixtureDef.friction = 0.5;
                fixtureDef.restitution = 0.2;

                // create the quads
                quad = new Quad(width, height, Math.random() * 0xFFFFFF);

                quad.pivotX = 0;
                quad.pivotY = 0;


                // this is the key line, we pass as a userData the starling.display.Quad
                bodyDef.userData = quad;

                //
                body = m_world.CreateBody(bodyDef);
                body.CreateFixture(fixtureDef);

                body.SetAngle(rotation * (Math.PI / 180));

                _clipPhysique.addChild(bodyDef.userData);   

        }

Answer 1

The SetAsBox method takes half width and half height as its parameters. I'm guessing your graphics don't match your box2d bodies. So either you will need to make your graphics twice as big or multiply your SetAsBox params by 0.5. Also the body pivot will be in the center of it, so offset your movieclip accordingly depending on its pivot position.

Note that box2d has a debugrenderer which can outline your bodies for you to see what's going on.