OpherV Posted April 2, 2014 Share Posted April 2, 2014 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? Link to comment Share on other sites More sharing options...
rich Posted April 2, 2014 Share Posted April 2, 2014 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. Link to comment Share on other sites More sharing options...
OpherV Posted April 2, 2014 Author Share Posted April 2, 2014 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? Link to comment Share on other sites More sharing options...
richpixel Posted April 2, 2014 Share Posted April 2, 2014 @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 elseFor 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 More sharing options...
OpherV Posted April 2, 2014 Author Share Posted April 2, 2014 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 r00 and andrii.barvynko 2 Link to comment Share on other sites More sharing options...
jjwallace Posted March 9, 2016 Share Posted March 9, 2016 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 Link to comment Share on other sites More sharing options...
Recommended Posts