Search Unity

  1. Megacity Metro Demo now available. Download now.
    Dismiss Notice
  2. Unity support for visionOS is now available. Learn more in our blog post.
    Dismiss Notice

PROBLEM with 2D rendering and sorting layers

Discussion in 'Scripting' started by ouomerx26, Sep 19, 2017.

  1. ouomerx26

    ouomerx26

    Joined:
    Nov 7, 2015
    Posts:
    9
    Hi,

    I'm having a problem (which maybe only solvable using code) with sorting three sprites into three layers in a specific order.

    To introduce the problem, the image below shows a character sprite sitting on top of a flame sprite in two sorting layers:



    Things became complicated when I added the 3rd sprite which is a mask sprite. The mask sprite is an image with dark areas representing shadow (alpha areas representing lighting).

    The character sits in the shadow which is perfect. However, in reality the flame or any light source should not be masked by the shadow.


    So maybe I can move the flame to the front of all sorting layers? It worked:



    Until...until when the character walks over the flame and got masked by it, since the flame is also in front of the character.



    Fine! I'll just move the character in front of the flame:

    But this defies the purpose of the mask sprite which serves to mask out the character in shadow.


    This is just a paradox...

    The ideal lighting situation should have the mask sprite shadowing the character but not the flame, while the character should be in front of the flame:

    Yes, I photoshopped this image in desperation...


    So how can I achieve the effect of the above image in unity, maybe using code?


    The only solution I can think of, is to put the flame in front of everything as in pic 3 and pic 4. But whenever the character overlaps with the flame, put the character to the very front layer. Then give the character an unique mask with her shape and an opacity that is equal to the background mask.

    Is there any other more straightfoward solution that you guys can suggest? Any help is very much appreciated :)
     
    Last edited: Sep 19, 2017
  2. Warsymphony

    Warsymphony

    Joined:
    Sep 23, 2014
    Posts:
    43
    Would it help just adjust the alpha channel of the character instead of using a masking image?
     
  3. ouomerx26

    ouomerx26

    Joined:
    Nov 7, 2015
    Posts:
    9
    Thank you for your reply.

    The alpha channel will make the character transparent.

    What you mean I think, is to adjust the brightness? But every object in the scene has to be adjusted not just the character.

    In addition, there are lighting parts in the mask that will render objects in half lighting and half shadow. Say, the triangle shaped lighting area in my images. If the character stands on the edge of it, certain parts of the character would be in the light and certain parts in the shadow. So adjusting the brightness can't compensate for dynamic lighting scenarios.

    Thanks for the suggestion though.
     
  4. Brathnann

    Brathnann

    Joined:
    Aug 12, 2014
    Posts:
    7,186
    Is the fire animated?
     
  5. ouomerx26

    ouomerx26

    Joined:
    Nov 7, 2015
    Posts:
    9
    Yes, it's an animated sprite.
     
  6. Warsymphony

    Warsymphony

    Joined:
    Sep 23, 2014
    Posts:
    43
    That's true adjusting just the alpha won't work.

    Would it work if instead of having a mask that is so large have one that fits right over the character. Maybe a combination of small masks, sorting layers, and order in layers?
     
  7. ADNCG

    ADNCG

    Joined:
    Jun 9, 2014
    Posts:
    992
    I think you could pull it off this way. Render all your shadows in a separate camera, fully black, into a rendertexture. Create a fully white version of your fire/light sources and render them in that camera as well, above the shadows, into the rendertexture.

    This way, you would have the shadows and the fully white version of your lightsources rendered together in the rendertexture.

    Then, find a shader that turns white pixels into transparency (pretty sure that should be easy to find). Your rendertexture would basically be all shadows with light sources masked.

    Finally, render your real coloured light sources in the back, then your character, then the rendertexture on top of everything. Adjust the alpha of the component that's rendering the rendertexture to get the shadows transparency that you desire.
     
  8. ouomerx26

    ouomerx26

    Joined:
    Nov 7, 2015
    Posts:
    9
    Wouldn't that give:

    ?

    Edit:
    Layer order:
    Flame Character Mask, as you suggested
     
  9. ADNCG

    ADNCG

    Joined:
    Jun 9, 2014
    Posts:
    992
    Yes it would. I misread you.
     
  10. Warsymphony

    Warsymphony

    Joined:
    Sep 23, 2014
    Posts:
    43
    I think maybe if you make a black sprite that is an exact shape of the character and put it over it. Then when you do not need the character to be masked adjust the black sprites alpha. When you need to move the black mask sprite to one side of the character adjust its position or its scale depending on which way you want to move it.
     
  11. ouomerx26

    ouomerx26

    Joined:
    Nov 7, 2015
    Posts:
    9
    Actually, the character doesn't really need a black mask but a brightness adjustment.

    Thanks for the nice suggestion, I'll test it.