Graphic line color won't change

Phaser 3
1

I would like to know what am I doing wrong here:

create ()
{
    // it will draw a green circle
    var graphics = this.add.graphics({ lineStyle: { width: 2, color: 0x00ff00 } });
    var circle = new Phaser.Geom.Circle(400, 300, 200);
    graphics.strokeCircleShape(circle);

    // from here onwards nothing happens
    // (circle stays green when it should change to red)
    graphics.lineStyle({ color: 0xff0000 });
    graphics.clear();
    graphics.strokeCircleShape(circle);
}

PS: I won’t get any error message.

2

You need to do lineStyle(…) after clear().

3

Like this?

create ()
    {
        var graphics = this.add.graphics({ lineStyle: { width: 2, color: 0x00ff00 } });
        var circle = new Phaser.Geom.Circle(400, 300, 200);
        graphics.strokeCircleShape(circle);
        graphics.clear();
        graphics.lineStyle({ color: 0xff0000 });
        graphics.strokeCircleShape(circle);
    }
4

Sorry, don’t clear at all. It’s lineStyle(…) that needs to be fixed.

// …
graphics.lineStyle(2, 0x00ff00);
graphics.strokeCircleShape(circle);
graphics.lineStyle(1, 0xff0000);
graphics.strokeCircleShape(circle);

You need to use different line widths, otherwise one stroke will just cover the other.

1 Like
5

Ohhhhhhhhh it worked perfectly now. The problem was the way as I was trying to change the parameters (did it the same way as it was passed to graphics). Funny that it didn’t raised any error…

Thank you Samme! :grinning:

1 Like