Character multiple images layers with canvas group fade overlap

Hello,
I've been struggling all day long with something that might be considered trivial and I'd like to ask for help.

My 2D characters are prefabs with a canvas group, inside which there are multiple PNG images (one for each expression of the face that can change).
My problem is that when fading in and out, the layers are not merged together.

I tried to play with masks but couldn't make it work.
I also found some good proposals to use custom shaders (like this: https://gamedev.stackexchange.com/q...for-a-sprite-that-ignores-transparent-sprites) but my best attempt to make it work ended up with black instead of transparent (I'm pretty new with shaders and don't understand everything with it).

I have the feeling there's something I'm doing wrong.
Any clue for solving this?

Thanks.

 

its unfortunate but unity does not have a feature to support this

I handled this problem by merging every png using texture2d.setpixels so you end up with 1 renderer and you can just fade that one image

 

Thanks for your answer.
For now, I'll just do single sprite for each animation. I'd be curious to see the part of your code that loop and merge each layer keeping the transparency.

 

texture2d.getpixel gives you color rgba.

a = alpha value = transparency
when a = 0 its transparent color

then when you do texture2d.setpixel you set that color

 

That's such a missed feature. A different engine starting with a G (i wont name because I don't want to get banned) recently added this feature that renders an image and all child images as one.