Simple circle that is a dynamic part of the game

Hi,

I’m new to phaser 3. Been trying to create a “connect the dots” game. for that, I want imple dots that I can control their size, color etc, during the game (lets say the color of the dot is changing when it’s being selected, for example).

I couldn’t understand what is the best way to create those dots - using Graphics? create a sprite? Canvas texture?

thanks!

Hi @maoritzio,
Both options are valid, but I think using white sprites is easier and you get more performance. If you don’t need animations you can use images instead of sprites.
With the setTint and setScale methods you can change color and size. And with the setInteractive method you enable it for input.
Regards.

1 Like

thanks @jjcapellan! I started [laying around with the Ellipse Game Object and it seems to do the trick. Do you think white sprites is better, performance-wise?

afaik setTint isn’t available with Canvas rendering. That might prevent the usage of sprite if @maoritzio wants to use Canvas rendering.

2 Likes

This is from phaser docs:

When a Graphics object is rendered it will render differently based on if the game is running under Canvas or WebGL. Under Canvas it will use the HTML Canvas context drawing operations to draw the path. Under WebGL the graphics data is decomposed into polygons. Both of these are expensive processes, especially with complex shapes.

@theNeedle is right, setTint is not available in canvas.
Good luck!!

1 Like

If you use a bunch of Ellipse Game Object shapes then it’ll be faster than using a single Graphics object (as the shapes retain their decomposed data between frames) and you can color them without needing to use tint. For a game like this, that’s what I’d use personally. Unless you wanted them textured, or colored in a non-flat way (i.e. gradient), then I’d use a texture too.

1 Like

Thanks a lot! I’m on it :slight_smile: