Website URL

Twitter

Skype

Location

Interests

Hello,
I am using a DisplacementFilter to create a water ripple effect (the source & maps kindly borrowed from some other posts on this forum). I would like to be able to have the ripples 'fade' out, i.e. reduce the intensity/magnitude of the displacement.
The only way I can think of doing this is by slowly reducing the intensity of the colour in the displacement map (reducing the saturation?), and replacing the filter with the new sprite.
Is there a cleaner/easier way of achieving this?
This is a snippet of the code I am using: http://jsfiddle.net/fgm6c2j5/3/
Thanks for your help.

Hey there, I've been trying to get a DisplacementFilter to work for my Phaser game. The idea is to create a shockwave effect using a donut-shaped displacement map image that grows over time. The issue I've been encountering is, I can't seem to get the PIXI.DisplacementFilter to statically (no growing/ no animation) render correctly for a given displacement map image My game is 320 x 240 pixels high - and my displacement map image is 64 x 64. So I'd expect for the shockwave to fill up a small portion of the screen in the middle - but instead, the filter keeps stretching to fill the entire screen. The following three images should demonstrate this (Credits for wood texture to help illustrate the shockwave better): How the game looks without any filters How the game looks like, but with the displacement map image aded as a sprite to game just for a scale comparison How the game looks like with the DIsplacementFilter applied to game.world.filters. My questions are: How can I make the DisplacementFilter not stretch to fit the viewport, but to respect the dimensions of the displacement map image. How can I "move" the "DisplacementFilter" around (supposing I want the shockwave to begin at a specific location, rather than the center)var preload = function() { this.game.load.image("displacement", "res/displacement.png"); this.game.load.script('displacement', 'lib/phaser/filters/pixi/DisplacementFilter.js');}var create = function() { this.displacementSprite = this.game.add.sprite(0,0,"displacement"); this.displacementSprite.anchor.set(0.5, 0.5); this.displacementFilter = new PIXI.DisplacementFilter(this.displacementSprite.texture); this.stage.filters = [this.displacementFilter];}I've scoured all around and found this post on DisplacementFilters and Phaser, and also this post on ripple effects using DisplacementFilters and PIXI, and this PIXI3 Displacement Filter ripple effect which I also tried to replicate, but ended up with the same problem of the displacement image filling the entire screen. The PIXI3 example also doesn't work for me as moving the displacementSprite around doesn't work. Thank you so much for your help!

Hello, after doing some search about how the new DisplacementFilter works on v3; I couldn't make it work. From the docs: Currently the r property of the texture is used offset the x and the g property of the texture is used to offset the y. Is there any working example on how to do this with v3?. Thanks!