Forums » Help » Example of drawing a Box2D entity

I have a Box2D entity (polygon shape). If I turn debug on, I can see the shape/outline of the body; however, this isn't what I want in the actual game. I don't want the entity to be a green line with gray fill, I have a particular color for the fill, stroke, etc.

I've managed to hack together this to draw, based on the vertex array of the body:

draw: function() {

        ig.system.context.lineWidth = 2;
        ig.system.context.fillStyle = this.fillStyle;
        ig.system.context.strokeStyle = this.strokeStyle;
        ig.system.context.beginPath();

        var bX = this.body.GetPosition().x / Box2D.SCALE * 2;
        var bY = this.body.GetPosition().y / Box2D.SCALE * 2;

        ig.system.context.moveTo( bX + (this.vertices[1].x / Box2D.SCALE) * 2, bY + (this.vertices[1].y / Box2D.SCALE) * 2 );
        ig.system.context.lineTo( bX + (this.vertices[2].x / Box2D.SCALE) * 2, bY + (this.vertices[2].y / Box2D.SCALE) * 2 );
        ig.system.context.lineTo( bX + (this.vertices[3].x / Box2D.SCALE) * 2, bY + (this.vertices[3].y / Box2D.SCALE) * 2 );
        ig.system.context.lineTo( bX + (this.vertices[0].x / Box2D.SCALE) * 2, bY + (this.vertices[0].y / Box2D.SCALE) * 2 );

        ig.system.context.stroke();
        ig.system.context.closePath();
        ig.system.context.fill();
      },

This works; however, when the body reacts/moves to objects hitting it in the world, while the debug drawing of the object looks right, my custom drawing of the body seems to react strangely (as if it's pivoting oppositely to the debug layer).

Is there a plugin or simple way of drawing Box2D shapes? It would be nice to just duplicate the built-in debug code, but I was hoping there was something easier.

I realize now that drawing based on the current position of the body and the vertex offset isn't enough to truly represent the body. The angle of the body has to be taken into account, and the vertices have to be translated based on the angle. Back to the math drawing board...

The "opposite pivoting" I was describing was actually the body moving based on its position. The debug layer; however, appeared to rotate (as it should), but it made my drawing look like it was moving oppositely.

I'm now correctly representing the body's rotation with the draw code:

draw: function() {

        ig.system.context.save();

        var bX = ig.system.getDrawPos( this.body.GetPosition().x / Box2D.SCALE );
        var bY = ig.system.getDrawPos( this.body.GetPosition().y / Box2D.SCALE );

        ig.system.context.translate( bX, bY );
        ig.system.context.rotate( this.body.GetAngle() );

        ig.system.context.lineWidth = this.lineWidth;
        ig.system.context.fillStyle = this.fillStyle;
        ig.system.context.strokeStyle = this.strokeStyle;
        ig.system.context.beginPath();

        ig.system.context.moveTo( ig.system.getDrawPos( this.vertices[ 0 ].x / Box2D.SCALE ), ig.system.getDrawPos( this.vertices[ 0 ].y / Box2D.SCALE ) );
        for( var x = 1; x < this.vertices.length; x++ ) {
          ig.system.context.lineTo( ig.system.getDrawPos( this.vertices[ x ].x / Box2D.SCALE ), ig.system.getDrawPos( this.vertices[ x ].y  / Box2D.SCALE ) );
        }
        ig.system.context.lineTo( ig.system.getDrawPos( this.vertices[ 0 ].x / Box2D.SCALE ), ig.system.getDrawPos( this.vertices[ 0 ].y  / Box2D.SCALE ) );

        ig.system.context.stroke();
        ig.system.context.closePath();
        ig.system.context.fill();

        ig.system.context.translate( -bX, -bY );
        ig.system.context.restore();
      },

Is there a plugin or simple way of drawing Box2D shapes?

Have you tried https://github.com/Joncom/impact-box2d-sugar ?

Quote from Joncom
Have you tried https://github.com/Joncom/impact-box2d-sugar ?

Hi Joncom,

Sry to bump this old topic. I've been reading your plugin to achieve what newmicro was trying to do. Is there a way to fillrect an entity so that when it rotates the "painting" follows it, just like the debug?

Thx!

@RockLeo:

Perhaps try rotating before drawing?

http://www.w3schools.com/tags/canvas_rotate.asp

Quote from Joncom
@RockLeo:

Perhaps try rotating before drawing?

http://www.w3schools.com/tags/canvas_rotate.asp

Hi @Joncom

If I rotate the context the entire level rotates.

Thx

Use save and restore so that the rotation only affects the one draw.

/* your-entity.js */
draw: function() {
    ig.game.context.save();
    /* Now rotate/draw the entity body. */
    ig.game.context.restore();
}