- Home /
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.
Answer by Rs · Feb 09, 2015 at 04:03 PM
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" ....
Answer by J_Lepage · Nov 22, 2016 at 09:05 AM
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.
Answer by Landern · Aug 28, 2014 at 01:59 PM
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.
Answer by sebastiansgames · Mar 04, 2015 at 05:52 AM
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);
}
}
Answer by SeasiaInfotechind · Apr 27, 2015 at 04:57 AM
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