Jump to content

Is the Pixi displacement filter available in Phaser?


Recommended Posts

How would you instantiate the filter though? And set its properties?


And as for my second question - I have this "underwater" game I'm working on. I want the background and the characters to have the displacement filter, and not just one sprite.

Sort of like this Pixi example:



Can I do this in Phaser?

Link to comment
Share on other sites



I just learned this today because I noticed Pixi Filters were not available in the phaser.js and phaser.min.js. But the pixi source code for the filters is included in the phaser project in src/pixi/filters. So find the filter you want and include that code in your project, then you could just use it normally:

var colorFilter = new PIXI.ColorMatrixFilter();colorFilter.matrix = myMatrix; // defined somewhere else

For your second question - perhaps you could define a Phaser.Group that holds everything that is underwater and then apply the filter to that.

Link to comment
Share on other sites

RichPixel thanks for pointing me in the right direction.

I managed to instantiate the filter and apply it to a group! :)


Code for reference:


in preload()

game.load.script('abstracFilter', 'js/filters/AbstractFilter.js');game.load.script('filter', 'js/filters/DisplacementFilter.js');

In create()


    var displacementTexture = PIXI.Texture.fromImage("assets/displacement_map.jpg");    displacementFilter=new PIXI.DisplacementFilter(displacementTexture);

in update()


displacementFilter.offset.x = count * 10displacementFilter.offset.y = count * 10
Link to comment
Share on other sites

  • 1 year later...

  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...