Graphics behavior I don't understand

Phaser 3
1

Hey there,
I’m creating an isometric interactive grid with graphics (maybe there’s a more efficient way to do that, but that’s the best I’ve found so far… anyway, that’s not the matter).

In the following pen: https://codepen.io/Laegel/pen/rNaKpPv, I encountered an issue where, when trying to fill a specific graphic item, it’s applied to another one (have a look at the end of the JS file, you’ll understand what’s wrong).
Is it the normal behavior? If yes, what am I doing wrong?

Bonus question related to graphics: I had to apply an “empty” fillStyle to all my graphics

gridSquare.fillStyle(0x000000, 0);

to be able to apply another fillStyle. Why?

Thanks for reading!

2

For Graphics, fillStyle() affects all subsequent draws that use fills. So would have to repeat fillPoints() to see a change.

I don’t know exactly what causes the wrong-fill problem, but you can solve it by adding closePath in

gridSquare.fillPoints(polygon.points, true, true);

or you can remove that line altogether.

3

Hey @samme, thanks a lot for your reply.
I’m going to remove the line with the fillPoints call and chain fillStyle with fillPoints instead.
In my mind, it doesn’t look really intuitive, though. :thinking:
I don’t like when something remains unexplained, would you be willing to give me (and future people reading this) some details about the way it works, please?

4

no nn

5

So a Graphics object is just a list of drawing commands. To change its appearance, you either draw on top of what’s already there or you clear it and redraw it. In your case, if you redraw it then you probably want to save polygon somewhere.

I think you may find it more natural to use a Polygon for each grid square. You can use setFillStyle() and setStrokeStyle(). Example:

6

Oh okay, thanks @samme!
At first I thought I could do all that with a Phaser.Geom.Polygon instance only, no graphics, but it turned out I had no way to fill it. I didn’t know about Phaser.GameObjects.Polygon.
This also solves the fact that I need to apply and remove style, so Phaser.GameObjects.Polygon looks much more appropriate.
Thanks for the explanations and your time!

1 Like