Grayscale in phaser3

Hi, Can anyone help me to add grayscale to particular image/sprite in canvas.

Is that possible?. I refered too many but all of them only add grayscale to entire canvas not a particular sprite.

This tutorial could help:

Thanks to @alon for linking it in one of their threads.

@Telinc1 thanks for your reply. I have tried this one also. Its change the images into grayscale but empty spaces around the sprite become black. Please refer below screenshot

Ah, looks like the shader in the tutorial is wrong in this regard. Replace gl_FragColor = vec4(vec3(gray), 1.0); with gl_FragColor = vec4(vec3(gray), color.a); and see if it works.

1 Like

Thanks @Telinc1. Its works perfect. Thanks a lot.

1 Like

If using the CANVAS renderer you can just do

sprite.setBlendMode(Phaser.BlendModes.LUMINOSITY);
2 Likes