Grayscale in phaser3

Phaser 3
1

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.

2

This tutorial could help:

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

3

@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

Screenshot_1
Screenshot_1799×608 190 KB

4

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
5

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

1 Like
6

If using the CANVAS renderer you can just do

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