So I was looking for a smart/quick/light way to apply grayscale filter to my images but not by using WebGL.
What I found is that by using Image.blendMode = PIXI.blendModes.SATURATION I could simply create an image in Photoshop and apply that blend to it. This way you don’t have to create multiple grayscale versions of the images but simply add one grayscale and re-apply it when you want.
And here’s how you can do it.
First we create an image in Photoshop (or other image manipulation application) in the correct dimentions and apply the following properties as shown below.
The result is the following
The basic code that makes this happen is this
var card = this.add.image(100, 50, 'card');
var grayscale = this.add.image(400, 50, 'grayscale');
grayscale.blendMode = 14;