Phaser.io how to apply a grayscale filter [Tip]

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.

screen1

The result is the following

See the Pen Parallax with Phaser by Michael Dobekidis (@netgfx) on CodePen.

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');
  this.add.image(400,50,'border');
 
  grayscale.blendMode = 14;

Enjoy!

Tagged , , , , , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *