Make sprite a lighter (in color)

Hi everyone,

I’m making a game using Phaser 3, and the way it works is, when you click on another player’s sprite they get stunned for a second and can’t move. When a player is stunned I’d like the player’s sprite to turn a lighter/whiter color to indicate that they’re stunned.

To do this I thought that I could use sprite.tint but I found that it could only decrease certain color channels, making the sprite as a whole darker.

Do any of you guys know how I can achive this effect?

GitLab repo

There is an alternative type of tint, a fill-tint, which replaces all visible pixels of a sprite with the tint’s color. This is likely not the exact effect you’re going for, however, you can apply it to a copy of the sprite, then lower the copy’s alpha to make the original sprite visible underneath. This may not be easy to do depending on how complex your sprite is.

Alternatively, you could use a custom fragment shader and apply it to your sprite through a pipeline (you could also turn your sprite into a Shader game object, but I’m not sure how clean that’d be). In a shader, you can easily brighten a color - for example, by multiplying the final gl_FragColor by a constant higher than 1.

Both of these solutions come with performance downsides (duplicating the sprite requires you to re-create and then render it twice, whereas changing the shader will cause a batch flush) and both of them will only work with the WebGL renderer. If you need support for the Canvas renderer, the only solution I can think of it is something involving a Render Texture game object or a Canvas Texture.