Search the Community

Is there already a way to make a displacement filter in p3? something like that: https://pixijs.io/examples/#/filters/displacement-map.js would like to use it for explosions (shockwave effect) any idears on implementing this effect into p3.? regards

Hi, I've long wanted to implement a neat looking invisibility effect for my game, tried using DisplacementFilter, but stumbled upon an issue with scale property. While it works correctly to displace areas under the displacement sprite I created, it also displaces entire container on which the filter is applied. I presume its from non existent knowledge about the subject and how those filters work, but I'm still hoping for either a fix or a reasonable explanation if anyone can help me with this please. Everything in my code follows DisplacementMap example on pixijs.com (one with the grass and magnifying glass). What is different is my stage tree. I have 3 containers for each layer and inside those there are separate containers for chunks that hold the map data, since it comes from the server. const playerSprite = new PIXI.Sprite(new PIXI.Texture(PIXI.utils.TextureCache['player.eyes'])); const displacementSprite = new PIXI.Sprite( new PIXI.Texture(PIXI.utils.TextureCache['player.normal']) ); let displacementFilter = new PIXI.filters.DisplacementFilter(displacementSprite); playerSprite.position.set(16 / globalScale * fs, (8 - globalScale) / globalScale * fs); playerSprite.scale.set(globalScale, globalScale) this.scene.addChild(playerSprite); this.scene.addChild(displacementSprite); displacementFilter.scale.x = 20; displacementFilter.scale.y = 20; displacementFilter.enabled = true; displacementSprite.position.set(16 / globalScale * fs, (8 - globalScale) / globalScale * fs); displacementSprite.scale.set(globalScale, globalScale) return { scene: this.scene, filter: displacementFilter }; the return value from this block is added to the main stage container, and filters are applied to bottom 2 layers. Should i perhaps look into filterArea? Here is the undesired effect on the edges. You can also see the slanted top layer on the trees. so 2 layers are moved by the filters scale property.

Having trouble implimenting Pixi in Phaser. However i run into this problem below. Files are located all correctly including core and abstractfilter and displacement filter. Uncaught ReferenceError: require is not defined(anonymous function) @ VM10606:1c.Loader.fileComplete @ phaser.js:74078c.Loader.xhrLoad.f.onload @ phaser.js:73590 Any Clues? I am using this forum for reference:

Hi, I'm trying to utialize filters to create visual-effects in my game. But when I apply the filters to my stage, It offsets the entire picture, and streatches the border pixels. The effect plays as expected. It looks like this (This is with displacementFilter.scale 200): Any ideas why this is happending?

I've seen a few posts about how offset is no longer used. And I've seen the examples page used as a reference on how it's supposed to be done now. However, I can't get it to work for me... There's a very specific effect I'm looking for. A "heat wave" coming out of a volcano. That volcano is made of two images. The underlying volcano, and this image which is on top of it That second image of just the lava has a displacement filter on it. And that filter DOES apply. when I drag around the container, I can see it deforming. What I need is for the displacement filter to "move up" by itself. Here's what I have: displacementTexture = new PIXI.Sprite.fromImage("https://monsterisland.chimeracompanygames.com/secure/images/ui/displacementmaptest.jpg");lavaDisplacementFilter = new PIXI.filters.DisplacementFilter(displacementTexture);lava = new PIXI.Sprite.fromImage("../../images/ui/iso_island_volcano_heat.png");lava.scale.x = lava.scale.y = 1;lava.position.x = 2682;lava.position.y = 170;lava.filters = [lavaDisplacementFilter]; and then in my animation loop I have displacementTexture.y += 3; now, y is constantly increasing, but there's nothing visually happening....What am I missing? Also, bonus points if you can tell me how to get the displacement filter to move along with my container. Right now it acts "global" so whenever I clickdrag the island around, the displacement filter doesnt move along with it. Thanks!!

For everyone who needs a NormalMap Generator for Windows, Mac, Linux and whatever...: I have build an online in-browser free normal map generator. http://cpetry.github.io/NormalMap-Online/ Screenshot: Please give feedback, post ideas or problems you encounter. Greetz, Christian