This might be outside the scope of Unity UI, but here’s my problem:
Imagine I have a UI element with two child Image objects.
The images are just solid colours. The back one is red & the front one is white. They’re both the same size, so it just looks like a single white square.
The parent object has a CanvasGroup so that I can fade the alpha of everything at once.
When I fade the parent out, the white square becomes translucent pink before it’s fully transparent.
Is there any way to keep it white without hiding/changing the red Image?
(obviously this is a simple example, but in my more complex scenario it’s incredibly difficult for me to alter the red square before fading the group)
If you were to “keep it white”, you wouldn’t be fading it out at all. The reason it turns pink is because as soon as the alpha of the image is < 1, you can begin to see the red through it, which is also < 1 alpha.
I’m not sure about that one… I’m sure there is a way, but it’s a pretty strange thing you want to do there overall I’m more interested in why you say you can’t just hide the red square when the fade begins!
Imagine you’ve got a playing card in your UI. One side is the face, and one side is the back. If you have the card face down and try to fade it out, you’ll get a glimpse of the face value.
Obviously the solution there is to hide the face completely. But my UI object is a lot more complex.
Anything with lots of layers looks really odd when you try to fade it out, which is why I’m after a simple way to ‘flatten’ my UI object when it fades in/out.
Makes a lot more sense now, but I still don’t know how it could be so complex to the point you couldn’t get a reference to the back of the card and just hide it. I would have to see the project to assess further, which I’d be happy to do.
Haha - you’ll have to take my word for it! Although here’s another simple use case:
You have a white square containing four small images loaded from Amazon.com. Two of the images are objects on a white background. Two are objects on a transparent background.
If you fade the whole thing, it looks really ugly.
Hrrm. I had actually assumed that CanvasGroup would do this for you; disappointing that it does not (although I can appreciate how difficult the problem is in 3D graphics land).
Unity devs: Any plans to get this into a future release?
Yeah I get the application - but like I said, it seems unlikely that you just can’t access what you need to access when you want to access it. Unity is all about doing just that!
Yup I understood the point, but in your situation, you actually could hide the image as a work around, but you said because your UI is complex you can’t. I have some pretty complex UIs as well, and don’t have any trouble accessing what I need to, so I just don’t get it I guess.
Right, well in that example, you have a white box with four images. When you fade it using CanvasGroup it looks weird because two of the images have alpha channels & two don’t. So you either make a two-step animation where you fade out the images first, then fade out the white background, or you’re stuck with a janky looking transition.
Point is, it’s not an issue of accessing the correct elements, it’s having an intricate layout that you want to fade out all in one go, but doing so looks rubbish.
OffTopic - Can you please tell me what blend mode did you use in flash to achieve that?
OnTopic - I believe you can achieve that with rendertexture if you have pro (that what i used to do in flash - capture bitmap before alpha fading it)
Annoyingly, it had been in Flash for years - I kicked myself when I found out about it!
Yes, I think that’s the simplest way. Any idea how to render a Canvas or UI element into a renderTexture?
Edit: A quick search seems to suggest the Unity team were unable to get rendertexture’s working with uGUI for 4.6.0. Not sure if this has been solved now, but I’ll give it a go when I’ve got a bit more time.
Yeah, at this point, I don’t even know what your exact problem is – I know what the solution that you desire is, but it doesn’t appear if that available What about if you just fade IN an image over the top to cover whatever you are trying to fade for the same effect? Again, I’m not sure exactly what your trying to accomplish in your case, so it might not apply.
My problem is that middle duck! I want that duck on the end
Seriously, thanks for contributing, it’s really helped me to think through the problem. The only reason I’m posting simple examples is to focus on solving the problem rather than working around it. I’ll post again if I get any further with a solution.
The good news is that this can be done. The bad news (or it could be) is that it would be done in a shader. A shader is what decides how your textures will blend.
As you can see there is a lot of ways you can blend. Shaders can become very complicated and are hard to debug but they will give you the results you want.
I would suggest taking a look at Unity’s built in shader and molding it to your liking.
Currently, the two elements are rendered separately with separate geometry. If one is semi-transparent, behind another is semi-transparent they will blend in some sort of blend operation (as mentioned by BMayne). To get them to blend as if they are one element, you need 1 layer of information. If it is truly as simple as the duck problem above, you could also try to use a sliced sprite to get the border to be the color you want.
This issue is caused by drawing two transparent things on top of each other. Let’s say you have a black background and draw a white box with 50% opacity, it will then draw a box with RGB 128,128,128. If you draw the same thing again then it will add 50% to the existing 50%, giving you RGB 191,191,191. This is because the shader blending is mixing the current pixel color with the new pixel color you want to add/blend, and has no knowledge of how many ‘layers’ you’ve drawn previously, or what colors they were.
To get what you want, you either need to use one layer as Ferazel suggests, or you need to somehow store this layer information, e.g. a render texture.
I’m more interested in why you say you can’t just hide the red square when the fade begins!
