I started working on a UI today and wanted to fade in some objects I am creating during runtime from a base object which I copy and modify. The object consists of multiple elements: images, text, buttons.
I could not find a way to change the opacity for this group at one single point, but only fade their individual opacities. However fading a button which is active = false doesn’t do anything. Inactive Tint has alpha and overrides whatever you’ve set in opacity. :-//
The only solution I could think of is to attach more functions to the buttons and handle the color switch for active, hover, inactive and the not use the active bool on the button script but rather disable the component.
Seems like a lot of writing to me, not even complicated but just a lot of work.
Is there a better way to do this that I am not seeing? (lol maybe I’ll just render the main camera to an image before activating the 2d screen, push the render texture to a screen sized image and fade that one out instead xD)
aaaaaand well… wouldn’t it make sense to use opacity as a multiplier on whatever is set as colors in the button component … and just give the element color alpha too (because currently its only rgb)?
I made a new friend request widget before, where a widget would consist of image elements, text and accept/reject buttons. I animated the appearence of the main widget body, which is a simple image element, with a tween library. Tween library allows to act on transform completion events, so when one element is finsihed moving, I could start fading in or moving in another one. This effectively allows to chain animations of image elements. Fade ins / fade outs are done on the parent’s opacity, which affects all children inside the widget.
It was a while ago, so can’t remember exactly, but I think I slided the buttons out of the view, disabled them so they become hidden and then fade out the rest of the widget. Perhaps I could make an example.
fadeTest.js animates an elements opacity using a tween from the initialize function.
It works on the “FadePerfectlyOnItsOwn” Image element
it works on the Image part of the Button “ButtonShouldFadeItsTextToo” but not for the child Text element part of the button (changing the image elements opacity doesn’t change the text’s opacity when doing it from the inspector either, but it should?)
it does entirely not work on the Element Group “ThisShouldFadeAllChildrenButDoesnt”. There is no error since the component obviously has the property but it is not exposed and children do not inherit it either.
fading does not work at all on inactive buttons because opacity is overwritten by the button component
Right, thank you @fleity for making a sample project.
So, as I remember how I did it before. As I mentioned, I slided the buttons under a full opacity image, and disabled them while they are hidden away from the view. Once hidden, I fade out the opacity of the image.
The buttons do not support a change of opacity. The only ones that do support are image and text elements. It is a valid request though, so I would recommend creating a github feature request. The closest you can get is probably changing the button transition mode from tint to sprite change and then fade the opacity of it.
The opacity not changing on children image and text elements is probably a bug, and I encourage you to make a github issue in the engine repo for it.
I use custom script for animate color/alpha on Image and second script for enable/disable entity. Second script listens event for animate script. Chain animation works. If needed - can share this two scripts. Supports image and text mode. They are required tween.js library.
Also creating an element of group type add with and height constraint which are not needed in this specific use case. Maybe creating a specific component I like the Canvas Group in Unity Canvas Group | Unity UI | 1.0.0
