possible bug in Phaser v2.4.2

[crispy]

When running the following code, the line and the fill of the rect don't line up:

  function create() {    game.stage.backgroundColor = 0xFFFFFF;    gfx = game.add.graphics(0, 0);    gfx.scale.set(100);    gfx.lineStyle(0.1, 0xB22222, 1.0); // darkish red    gfx.beginFill(0xB0C4DE, 1); // light grey-blue    gfx.drawRect(1, 1, 1, 1);    gfx.endFill();  }

It ends up looking like this:

 

 

However, if I instead just multiply the line width and rect values by 100 and don't set the scaling, everything works fine:

  function create() {    game.stage.backgroundColor = 0xFFFFFF;    gfx = game.add.graphics(0, 0);    gfx.lineStyle(10, 0xB22222, 1.0); // darkish red    gfx.beginFill(0xB0C4DE, 1); // light grey-blue    gfx.drawRect(100, 100, 100, 100);    gfx.endFill();  }

 

Any idea what's going on? Is this a bug, or am I doing something wrong?

[crispy]

Upon further investigation, I noticed that it's offset by 0.5 in each direction, which gave it away: someone was being way too clever. :-[

 

There are already several bugs reported for this:

 

https://github.com/pixijs/pixi.js/issues/711

https://github.com/pixijs/pixi.js/issues/1620

 

The problem is in PIXI.WebGLGraphics.buildLine(), where it just adds 0.5 (not 0.5 pixels! just 0.5) to all of the points.

 

Sadly, this has been a known problem for over a year, so I don't know that it's going to be fixed any time soon.

[tips4design]

Well, can't you somehow subtract this 0.5 yourself?

[crispy]

If I subtracted the 0.5 myself, then it would be messed up in Canvas rendering.

 

Plus... kind of a pain in the ass. :-P

[in mono]

A workaround would be to use BitmapData (unless there is something you can't do with it that you can do with Graphics).