Phaser P2 DebugBody - Visualizing Rotation (possible bug)

[Olliebrown]

When adding a rectangle to a p2 body you have the option to specify a rotation in radians for the shape which it appears is just passed directly on to the p2 shape constructor (hence the need for it to be in radians instead of degrees as are used elsewhere in Phaser).

I find that if I use any value other than 0 for a rotation, the shape is properly rotated however drawing of the body via the debug parameter ignores the rotation.

Here is a quick codepen illustrating the bug.  The character should have a long protrusion coming out the bottom achieved with a rotated rectangle.  The physics collision seems to indicate that the rotation has occurred correctly, however the debug shape is not drawn rotated.  Notice that he appears to sit a little ways off the ground due to the un-rotated debug visualization of the shape.

It seems to me this must be a bug (or maybe a limitation of the debugbody drawing system) but I thought I would post here first for thoughts.  I will likely dig in and see if I can find a fix / workaround for this.

Phaser P2 DebugBody rotation bug (codepen)

[samid737]

#258 still A bug, the workaround, more specifically, try if this works for drawRectangle :

    drawRectangle: function(g, x, y, angle, w, h, color, fillColor, lineWidth) {

        if (lineWidth === undefined) { lineWidth = 1; }
        if (color === undefined) { color = 0x000000; }
        c = Math.cos(angle);
        s = Math.sin(-angle);

        var oxc = w / 2 * c;
        var oxs = w / 2 * s;

        var oyc = h / 2 * c;
        var oys = h / 2 * s;

        g.lineStyle(lineWidth, color, 1);
        g.beginFill(fillColor);
        g.moveTo(x + (oxc - oys), y + (-oxs - oyc));
        g.lineTo(x - (- oxc - oys), y - (oxs - oyc));
        g.lineTo(x + (- oxc + oys), y + (oxs + oyc));
        g.lineTo(x - (oxc + oys), y - (- oxs + oyc));
    },

 

[Olliebrown]

A ha!  Perfect.  I was just looking at that exact function and noticed that it was ignoring angle.  Thank you!

[Olliebrown]

I just integrated that into the codepen to test and it seems to work for my case.

Now that it is drawn correctly, I also noticed that the placement of the rotated collision box made the 'dude' sprite rather ... um ... well endowed! 

Thanks again,

Seth B.

[samid737]

Actually Canvas api even has A rotate feature:

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

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/rotate

That could work for the old case. I am not near A pc so I cant test it...