Jump to content

Search the Community

Showing results for tags 'displacementfilter'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • HTML5 Game Coding
    • News
    • Game Showcase
    • Facebook Instant Games
    • Web Gaming Standards
    • Coding and Game Design
    • Paid Promotion (Buy Banner)
  • Frameworks
    • Pixi.js
    • Phaser 3
    • Phaser 2
    • Babylon.js
    • Panda 2
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
    • GameMonetize
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered
    • Marketplace (Sell Apps, Websites, Games)

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Website URL





Found 6 results

  1. Hi, I'm using the DisplacementFilter in Pixi.JS v5. I would like to understand exactly how displacement map images displace pixels. As they are normally grayscale, I'm wondering what the color value (0-255) denotes for a given pixel. If anyone can explain this to me or link an article explaining it, I would be very grateful. Thanks!
  2. I want to restrict the size of the applied filter on canvas. In the below codepen i have set the displacement filter and moving it according mouse position. But the problem is it's covering entire background. I want to fix the size of the filter. I'm new the Pixijs and any help is appreciated. https://codepen.io/ajitcj/pen/yWOaaY
  3. 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.
  4. 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!
  5. 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!
  • Create New...