Drawing lines, unwanted gradient effect

[mdhdev]

I am drawing a series of lines using graphics moveTo and lineTo and for some reason the last line always has a gradient effect.

Here is the code:

var cellWidth = containerWidth / 16;
var vLines = app.game.add.graphics(0, 0);
vLines.lineStyle(1, 0xffffff);

for(var i=0;i<16;i++){
  vLines.moveTo(cellWidth*i, 0);
  vLines.lineTo(cellWidth*i, containerHeight);
}

 

Here's an image with how this looks. Any idea what's causing this gradient effect on the last line?

[drhayes]

I've never really used Phaser.Graphics before, but can you try sticking a vLines.moveTo to a random position after the end of the loop? I wonder if the shape isn't getting closed in some way?

[mdhdev]

Thanks for the suggestion, I set vLines.moveTo to 0,0 once all the lines had been drawn and that has fixed the problem.

[drhayes]

¯\_(ツ)_/¯

I'm glad!