Jump to content

V3 Displacement Filter Help


Sharpleaf
 Share

Recommended Posts

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.
eLBR4iB.png?1

 

 

That volcano is made of two images. The underlying volcano, and this image which is on top of it

p8NDKPQ.png

 

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!!
Link to comment
Share on other sites

I'd love to make a fiddle to live demo the problem I'm having. The problem is that I'd have to set up a fiddle with mouse click/drag movement, zoom, my tiled map background and all the images that it needs. And there's a cross-site-origin problem with loading the json in the asset loaders......

 

So, the only way to do that would be to go into the live view of the game on my server. Buuut, the problem is in our non public development Facebook app. 

This isn't really a problem, because I can give out test user credentials to anyone who would like to take a look. Please let me know and I'll send you some credentials.

 

Please html5gamedev-community, you're my only hope! :)

Link to comment
Share on other sites

  • 4 weeks later...

We finally solved the problem! For posterity, I'm adding my answer.

 

The problem was that we were culling the children of map1 (a container) which included the filters texture. As such, the filter could no longer update its matrix.

 

Once I added a check for filterTexture.renderable in my culling conditional so that it ignored the filter texture sprite, it worked :)

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...