Jump to content

masking area is broken with displacementFilter


Recommended Posts


i draw sprite with mask.  

it's so good..


but masking area is broken when use with displacementFileter....


it looks like polygon animation 


i want to draw correct sprite including mask with displacementFilter.


would you have any idea for this?





Link to comment
Share on other sites

this image is by example15 - filters

i set only 

//pondContainer.filters = [displacementFilter];
pondContainer.mask = new PIXI.Graphics();
pondContainer.mask.beginFill(0xff0000, 1);
pondContainer.mask.moveTo(200, 0);
pondContainer.mask.lineTo(400, 200);
pondContainer.mask.lineTo(200, 200);
pondContainer.mask.lineTo(200, 200);

and then i can see waved image..



i wanna not wave image 

how can i do that..

thx ^^ alot

Link to comment
Share on other sites

?? what's the meaning? 

old js file from cache?

maybe it's not....

displacementFilter set in initializing part, and graphic set in update function for test.

and my code is recent code... becuase it running on my computer 

if you change resolution to 1280*720 from 630 410(this is original into example 15) you can see simular situation 


blue part is aninmated by displacementFilter



When i set mask on this..   mask edge area can see same situation. 



Link to comment
Share on other sites

you right..  i changed mask to parent.  and it's good..




but i have other problem with this...

i've updated  to pixi.3.0.8.. and i tested new DisplaceFilter with pixi.3.0.8

and i can look like this.....  empty space is changing with moving position or scaling 

what can i do to look good water..



this image has no filters. only use tiling.

i want to use tiling with some filter like displacement.. 


what should i do.. for this? 



Link to comment
Share on other sites


this problem happened by scale and displacmentSprite position.

so i added sprite for dispplacementSprite into container...


and control displacementFilter scale's by camera zoom... in update function


//set displacement filte

var displacementSprite = PIXI.Sprite.fromImage('./data/image/displacement_map.jpg');                             var displacementFilter = new PIXI.filters.DisplacementFilter(displacementSprite);displacementSprite.alpha = 0.0;wave.addChild(displacementSprite);displacementFilter.scale.x = 20;displacementFilter.scale.y = 20;wave.displacementFilter = displacementFilter;


wave.displacementFilter.scale.x = 20 * (Def.Camera.Zoom);wave.displacementFilter.scale.y = 20 * (Def.Camera.Zoom);

 and then it looks normal.. but not perfact.. ..   

i don't know correctly related between scale and filter's strongness

so i'm controlling values...

if somebody know this please give me a hint 


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.

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.


  • Recently Browsing   0 members

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