Jump to content

BlendMode ADD is not working on background elements


Recommended Posts

Firstly, I'd love to make a codepen on this issue but my code is way too complex to translate down as it's a heavy object orientated setup.

The render structure is very slim though, there's not a huge amount of levels to it. The screenshot shows an animation running around an avatar using BlendMode ADD, in the bottom left of the screenshot you can see it correctly calculates the alpha over the avatar (They exist in the same sprite level) but it ignores the background, which for ease I have set to solid white.

Usually the background would show many other entities of the game.

I've tried using a custom blendmode, slimming the structure till the frames are all 1 level in from everything else but still nothing.

Any idea, no matter how bizarre could help me solve this!


Screenshot from 2020-07-05 22-48-42.png

Link to comment
Share on other sites

Sorry, I probably didn't make it overly clear!

The background showing in the screenshot isn't usually there at all, my entire world map is rendered below you, I only removed that to show the issue in a clearer way.

In this case, the background is literally just the background colour from new PIXI.Application.

But the issue occurs when I have other sprites rendered behind the avatar. My actual render structure is:
Stage -> "Main Container" (everything is put inside this) -> Avatar Container -> Avatar sprites

Avatar Container is a singular avatar so 1 container exists per user online. 

After I posted this I hacked my code to add all sprites directly into the primary container (instead of using Avatar Container) and the blendmode worked as expected, but if possible I'd like to keep all the sprites for the avatar sat inside a container/sprite and have the blendmode still working as I put things like interactivity, zindex and position all on the Avatar Container instead of on each sprite that makes the whole avatar.

Link to comment
Share on other sites

add all sprites directly into the primary container 

Oh right, you have something with a mask or filter on top, right? That's when ADD cant work because its actually rendered into separate texture that has no background :) 

Remove mask/filter and it should work fine.

Because you stumbled across the problem of layering, I'm obligated to advice to look at demos https://pixijs.io/examples/#/plugin-layers/lighting.js and https://pixijs.io/examples/#/plugin-layers/bringToTop.js .

Two things you haev to consider:

1. masks and filters render all the contents of container in separate texture, then this texture is  rendered on screen with special shader. blending with background wont work there

2. zIndex works only inside containers, and in case you want it to work through the tree, you have to learn how pixi-layers plugin works, otherwise you'll have to manually put them in containers according to render order , and that will make your architecture difficult.

Link to comment
Share on other sites

Ah okay, that makes perfect sense, I do have filters included.

I will look into using the Layers, I had hoped to not need them but it seems the time has come!

Luckily I have spent enough time working with PIXI v5 to be able to easily add in the Layers plugin.

Thanks for your help and quick responses! Rarely had any issues with PIXI and generally can find the solution fairly easily. Perhaps worth noting this issue somewhere, perhaps in a v5/v4 "Gotchas" section, I have spent probably 20 hours researching this issue, pulling code apart and trying various "solutions" but failed to ever find the cause.

Also massive sidenote - I attempted to update to 5.3 from 5.2.4 and all my avatar rendering disappeared, didn't look into the problem at all (unfortunately) as I was too stressed with this issue!
Once I've moved onto using layers and got my code back to working order I will retry and see if I can replicate the problem.

Thanks once again!

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