Good practice for using almost identical sprites in phaser. Alternatives to using more sprites

user_6799857 0
Viewed 822

So, I have been working in Unity but I've decided it's time to change to something I know better: JavaScript. I've been considering switching to Phaser.js but I have some questions regarding an issue I've been having even in Unity and that I found no solution to at the moment while searching on the internet. I have no code to provide as I haven't yet started actually programming in Phaser, so I'll try to be explicit.

My game idea basically revolves around some lights that change colors. The sprites I have for the lights look identical, but just with different colors, but not entirely (only parts of them are colored differently). The problem is that my game has many different colored lights and it has to change between them. Like, if one light is red and you click on it, it becomes green, for example. Creating and loading so many sprites that look almost the same seems like a bad practice, and I wonder if there is a way to change the color of a sprite or a part of the sprite by code. I know that Phaser doesn't support svg and that svg in games is a bad idea in general because of performance issues but it would have saved me a lot of time to just add the generated svg code of the sprites I use and just change the fill of the parts I want.

So, my question is: what are the best alternatives (if any) to using multiple sprites or how can you change the color of specific parts of them?

phaser-framework sprite
2 Answers

Another alternative, depending upon your light sprites, is to use Phaser's tinting capabilities.

Both sprites and images in Phaser can be tinted, and since Phaser supports sprite grouping, even if you wanted to change only a part of the image you could easily have each displayed object consist of two sprites, one of which is the same for all lights (the part that doesn't change) and another that is also shared, but tinted.

Phaser 3 example of tinting an image:

this.add.image(300, 300, 'pixel').setTint(0xff0000);

Phaser 3's setTint() documentation.

Phaser 2 CE example of tinting a sprite, in case you're looking at using this version:

sprite = game.add.sprite(game.world.centerX, game.world.centerY, 'atlas', 'greenJellyfish0000');
sprite.tint = Math.random() * 0xffffff;
user_119120

If the lights don’t have to move, then you can just have a few images and change their src’s. Alternatively, I believe you could have it so that when the sprite is clicked it changes to a different looking animation. That is, after all, the point of a spritesheet, isn’t it?

user_115846870
Related