Is the Pixi displacement filter available in Phaser?

[OpherV]

I'd like to use the displacement filter. I see it's available in the Pixi source inside the Phaser repo (https://github.com/photonstorm/phaser/blob/master/src/pixi/filters/DisplacementFilter.js)

How would I go about doing that?

 

Also - can a filter be applied to a group of objects, rather than a single object?

[rich]

Yes any Pixi filter can be applied to a Phaser object. Just use Sprite.filter = ...

 

You will have to include the Pixi filter source code in your game.

[OpherV]

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:

http://www.goodboydigital.com/pixijs/examples/15/indexAll.html

 

Can I do this in Phaser?

[richpixel]

@OpherV

 

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.

[OpherV]

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

[jjwallace]

I tried the method OpherV mentions but have run into a error.  Is there any tricks or clues to make this work better?  

I am getting:

Uncaught ReferenceError: module is not defined

Uncaught ReferenceError: module is not defined