Jump to content

can't set blendmode with filters..?


Recommended Posts



there seems like dark blue water,


it set with displacement filter on tilingsprite


tilingsprite set blendmode with PIXI.BLEND_MODES.SCREEN;

this image is it..



and i set filter with displacement and then blendmode is gone...

(ignore clipping water. it's because of masking problem.  that is all clear on other post.
 this result is image'sreusing ^^)



it seems blendmode is gone when filters use..


could you tell me, what's wrong with me?

thx ..

  var texture = PIXI.Texture.fromImage(properties.properties.wave);                            var texture = PIXI.Texture.fromImage('./data/image/displacement_map.jpg');                            var texture = PIXI.Texture.fromImage('./data/image/00.png');                            //set tiling                            var wave = new PIXI.extras.TilingSprite(texture, poly_rect.width, poly_rect.height);                            wave.blendMode = PIXI.BLEND_MODES.SCREEN;                            wave.added_valueX = parseFloat(properties.properties.x) || 1;                            wave.added_valueY = parseFloat(properties.properties.y) || 1;                            wave.alpha = 1.0;                            this.waves.push(wave);                            //mask                            var masking = new PIXI.Graphics();                            masking.position.set(-poly_range.min.x, -poly_range.min.y);                            masking.beginFill(0xff0000, 1);                            masking.drawShape(polygon);                            this.wave_container = new PIXI.Container();                            //기준 좌표 재설정정                            this.wave_container.position.set(properties.x + poly_range.min.x, properties.y + poly_range.min.y);                            this.wave_container.addChild(wave);                            this.wave_container.addChild(masking);                            this.wave_container.mask = masking;                            this.bgContainer.addChild(this.wave_container);                            if(1){                                if(1){                                    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.filters = [displacementFilter];                            }                        }
Link to comment
Share on other sites

Sorry, I forgot to notify you about changes in blendMode. It applies to filter, not to container. Its completely different behaviour.


You need to set "filterBlendMode" for container that have that filter.

//wave.blendMode = PIXI.BLEND_MODES.SCREEN;wave.filters = [displacementFilter];wave.filterBlendMode = PIXI.BLEND_MODES.SCREEN;
Link to comment
Share on other sites

oh.. i tested again with "filterBlendMode" and then i can looked good image like this


it looks good.. 




i have one question about displacementFilter..


i set like this code 

wave.displacementFilter.scale.x = 50; wave.displacementFilter.scale.y = 50; 

i can look displacement effect.  if change size  to small or big..


displacementFilter effect to strong or week..


so i change my code like this

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

and then  i can look more great  .. but not same effect


i want to look same displacementFilter effect always..

how can i control scale value?


Link to comment
Share on other sites

Actually, displacement filter uses two scale components : 


1) displacementFilter.scale


that's scale of the effect, how far your displacement applies.


2) displacementSprite.worldMatrix 


that's texture position: when you change your camera scale or position, it automatically changes displacementSprite.worldMatrix (because sprite belongs to your map)  and that's how displacementFilter knows how to apply the displacement. MAKE SURE YOU DONT REMOVE THAT SPRITE FROM WAVE!!! 


I had the same problem, and your solution looks correct, BUT I dont know what is Def.Camera.Zoom in your case. How do you calculate your root element scale based on that Def.Camera.Zoom?


Are you sure you are changing displacementFilter scale and not displacementSprite scale?

Link to comment
Share on other sites

Yes, because filter will be applied and calculated even if your object is offscreen. Culling algorithm is not a part of pixi, it depends on the game. You have to check every object getBounds() or whatever variables you have for it (Camera.Zoom and stuff), and calculate whether the object is seen or not. "renderable" field is just for that cause.


Notice: dont apply that to "displacementSprite", it must be always not renderable.

Link to comment
Share on other sites

Culling is not part of pixi.js. Yet. Imagine how many bugs will be there if we implement it and switch it on by default ;)

For example, things in ParticleContainer cant be culled at all.

However, we can make plugin for it. If you make an algorithm for your game, it can be the part of new "pixi-culling" library ;)


Another example - If map is big, only some part of it must appear in the scene, and for exterior I wont even load textures and spine objects (I have about ~2000 of those). Most of that part will be culled so only those objects which intersects with the screen will be rendered.

Link to comment
Share on other sites

  • 2 weeks later...

i'm using own culling


when i use filter i can look frame drop when filter set..


for example. 


   mouseover : set outline filter

   mouseout   : delete outline filter


in this case when i set filter with mouseover i can look frame drop about 5-10 frame


is this normal?



second question.!

I understoodd texture is redrawn when filter set! so i  rewrite code like this

if(filters.length === 0) {        this.aniContainer.filters = null;        this.aniContainer.renderable = true;    }    else {        this.aniContainer.filters = filters;        this.aniContainer.renderable = false;    }

and then character was disappeared.... 


Am I misunderstanding about 'renderable parameter' with filter?



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...