Sign in to follow this  

Help with filters (DisplacementFilter particularly)

Recommended Posts

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




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() {"displacement", "res/displacement.png");'displacement', 'lib/phaser/filters/pixi/DisplacementFilter.js');}var create = function() {    this.displacementSprite =,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!





Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.