Help with filters (DisplacementFilter particularly)

[chongdashu]

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):

 

1. How the game looks without any filters
2. How the game looks like, but with the displacement map image aded as a sprite to game just for a scale comparison
3. How the game looks like with the DIsplacementFilter applied to game.world.filters.

 

 

My questions are:

 

1. How can I make the DisplacementFilter not stretch to fit the viewport, but to respect the dimensions of the displacement map image.
2. 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!