Simple shader for overlapping 2D images with alpha

TL;DR: I need any kind of solution to flatten a canvasGroup so that I can adjust the alpha of the group as if it's one image. I have a complicated UI with lots of moving parts and it also needs to be semi-transparent. I thought this would be super easy and common but the only solution I've found so far would be a renderTexture of a new canvas applied to a new camera. This solution would break all my current scripting for my UI.


Hopefully the image above explains clearly what I want.
I've been reading a lot about writing shaders, and I'm beginning to pull my hair out since it all still seems like jibberish. Sounds like stencil buffer is the answer but there's not a lot of novice-level tutorials on it. However, this seems like a very simple shader to me.

My implementation is a UI canvas (HUD) with images all at the same Z value in space. I want the total alpha to be adjusted by a canvasGroup. The only overlap allowed should be where individual sprite alpha is < 1 (alpha before canvasGroup alpha adjustment) so that edge blending looks nice without increasing overall alpha (see left image). End result should look as if one solid sprite with multiple colors is slightly transparent.

Any help will be much appreciated! Thank you.

 

They are not many solutions for that, the simple solution is to use a RenderTexture and work with the alpha of that sprite.

Or, you can use our last asset call Shadero Sprite ( https://www.assetstore.unity3d.com/en/#!/content/97406 ), there is a blend effect where you can add multiple sprite at one like this.



Hope it's help,
Best Regards,
Vetasoft