Combine low opacity sprites (shadows) into one

InkToPixelsInkToPixels Posts: 2Member
edited October 11 in Shaders

The title is probably confusing, so I will try to explain it as well as I can.

In out game we use black sprites with low opacity as shadows. However, when multiple "shadows" stack on top of each other, they combine resulting into a darker color, which in certain cases makes everything look weird, like in the picture below.

Is there technically possible, maybe through shaders, to combine the opacity of these sprites into one, so that they don't become increasingly darker as more are stacked on top? How could I start doing that? Any resources I could read?

Thank you in advance for the suggestions!


Tags :

Comments

  • TwistedTwiglegTwistedTwigleg Posts: 3,525Admin

    Welcome to the forums @InkToPixels!

    I am not sure how feasible this would be, but you could have all of your shadows on a single Viewport, remove the transparency from all the shadows so overlapping shadows will not blend (which is the issue you are seeing in the OP picture), and then use the Viewport texture as a transparently overlay.

  • InkToPixelsInkToPixels Posts: 2Member

    @TwistedTwigleg said:
    Welcome to the forums @InkToPixels!

    I am not sure how feasible this would be, but you could have all of your shadows on a single Viewport, remove the transparency from all the shadows so overlapping shadows will not blend (which is the issue you are seeing in the OP picture), and then use the Viewport texture as a transparently overlay.

    Would that mean that we have to manually place each shadow in the scene?

    Right now, each elements (like fences or characters) have their shadows placed in their own node, with a lower z-index. This means that it is fast and easy to set each element in the scene, which is important to us since we are a small team.

  • TwistedTwiglegTwistedTwigleg Posts: 3,525Admin

    No, not necessarily. Each shadow would need to be a child of a Viewport node, but you could automate this process or even have it done automatically via a script. Then you could use the resulting viewport texture for shadows as mentioned in my previous post.

    The only thing that I am not sure with this method, having thought more about it, is visual layering/culling. For example, if you have a set of boxes placed on the same diagonal line, then you would not want the shadow of the box in front to cover the box right behind it on the diagonal line, since that would visually make the box look small. In other words, the shadows would not necessarily have any way to know what was in front or behind, potentially leading to the shadows being drawn on top of everything...
    Maybe the viewport idea is not the way to go. I'm not sure on what another potential solution would be right off, but I will keep thinking about it and will let you know if I think of something.

Leave a Comment

BoldItalicStrikethroughOrdered listUnordered list
Emoji
Image
Align leftAlign centerAlign rightToggle HTML viewToggle full pageToggle lights
Drop image/file