koobas.hobune.stream
Unity UI - Fading Canvas/Panel
Hello.
I have setup a canvas with a panel inside as a container. And in the panel I have 4 buttons, 1 text label and 1 image and when I press the start button I want to whole UI to fade away so that the game can start. But I have no idea on how to do that. I think I must use CanvasRenderer.SetAlpha() but the Canvas elements doesn't have it.
If you want to fade colors and alphas using the new UI system (above v4.6) these methods will help:
You can use them on any Image component. Example:
panel.GetComponent<Image>().CrossFadeColor(Color.black, 2.0f, false);
thatButton.GetComponent<Image>().CrossFadeAlpha(0.1f, 2.0f, false);
Hope this helps.
RS
Important
Note moreover that you can set the alpha of most (all?) UI components like this:
public Image im;
im.GetComponent<CanvasRenderer>().SetAlpha(0.5f);
(It's easy to forget an Image already has a CanvasRenderer by default; you don't need to wrap it into one.)
So to "fade in" an Image ...
im.GetComponent<CanvasRenderer>().SetAlpha(0.1f);
im.CrossFadeAlpha(1f,.1f,false);
Does NOT do children...
For better or worse this ONLY literally fades that image, not children.
If need to fade "everything below" ....
Would adding a Canvas group not be a simpler method to this ? https://docs.unity3d.com/Manual/class-CanvasGroup.html
I know this is an old post, but this answer is the most useful today, and needs to be up-voted. It saved me a lot of redundant code.
Go watch the new UI tutorials, they cover this in the first couple, though it is referring to the button color, but same concept, different object type.
Was just trying to figure out how to fade out just a panel. Ended up here... if anyone else is curious: you need to include 'UnityEngine.UI' at the top of your code. Then access the panel's 'Image':
using UnityEngine;
using System.Collections;
using UnityEngine.UI;
public class myFadePanelClass : MonoBehaviour
{
public Image myPanel;
float fadeTime = 3f;
Color colorToFadeTo;
void Start() {
colorToFadeTo = new Color (1f, 1f, 1f, 0f);
myPanel.CrossFadeColor (colorToFadeTo, fadeTime, true, true);
}
}
Hello Doodlemeat,
For FadeIn/Out effect you could use:-
FadeIn YourPanel.color = new Color (0.0f, 0.0f, 0.0f, Mathf.Lerp (YourPanel.color.a, 0.0f, Time.deltaTime * 1.1f));
FadeOut YourPanel.color = new Color (0.0f, 0.0f, 0.0f, Mathf.Lerp (YourPanel.color.a,235/255f, Time.deltaTime * 1.1f));
Thank You.
(45,66): error CS1526: A new expression requires () or [] after type
