Actual group opacity with Canvas Group.

Hi Unity Forum,

The documentation for Canvas Group states with alpha "that elements retain their own transparency as well, so the Canvas Group alpha and the alpha values of the individual UI elements are multiplied with each other."

I have overlapping UI elements, that I want to provide a group opacity to, but because of the behavior of Canvas Group's the overlapping elements reveal the overlapping areas.

Is there any way to make Canvas Group not do this - as in apply the alpha as a whole on an object?

 

3D rendering typically will render all transparent meshes on top of each other. This also applies to UGUI canvases (which are just quad meshes + geometry). So the alpha fade that you're describing is 3D rendering accurate, even if that isn't really what you want. There are a number of ways you can explore to do this, but none of them are perfect.

The easiest recommendation IMO is to render the UGUI element to a RenderTexture and then fade that as a RawTexture as that is only made up of 1 piece of geometry and will not need to blend with any overlapping geometry but what pixel color is already in the frame buffer. You will need to create a camera space UI and have that camera render to a texture. Then use that texture in your desired UI.

It's a lot of work, but that's probably the easiest solution. Other areas to explore might be to utilize a stencil buffer or z-depth geometry, but trying to get that to work in a canvas might be tricky.

 

Thanks for your reply! That was a very appreciated and very thorough reply. Thanks!

I'm an old time senior developer, but I'm just getting into 3D, so there are some things in there I need some time to digest - but some of it I totally understand - nonetheless I'll learn.

I'll try out some of your suggestions. Thanks!