Sign in to follow this  
GBear

can't set blendmode with filters..?

Recommended Posts

Hi.. 

 

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

post-10357-0-31745500-1449102896.png

 

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 ^^)

post-10357-0-16281400-1449102941.png

 

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];                            }                        }

Share this post


Link to post
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;

Share this post


Link to post
Share on other sites

oh.. i tested again with "filterBlendMode" and then i can looked good image like this
post-10357-0-03526900-1449513885.png

 

it looks good.. 

 

thx..

 

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?
 

thx..

Share this post


Link to post
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?

Share this post


Link to post
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.

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

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?

 

thx^^

Share this post


Link to post
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...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.