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:

CrossFadeColor

CrossFadeAlpha

You can use them on any 3 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

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.

A way I chose to do this was to use a Material for the Panel/Button/whatever UI element, that had a Color property with an Alpha channel, such as shader UI/Unlit/Transparent. Not all shaders do, and that can be confusing.

Then create an Animation, and added the Image.Color property. Then adjusted the fade in/out curves for the Alpha, and added a Trigger, so it can fire it off at some specific time in the code.

Works good if you can get the hang of Unity3D’s peculiar animator gui.

I meet the same problem. At first, I try to fade in/out game object by DOTween plugin. But the plugin only supports fade effect with the component which has Renderer component. But my case is to fade in/out a UI panel game object which only has CanvasRender component. So I must implement it by myself…

Here is my final woking code:

using UnityEngine;
using System.Collections;

public class Fade : MonoBehaviour {
	public float alpha = 1f;
	public float targetAlpha = 0f;
	public float duration = 1f;
	public bool bDecreaseAlpha = false;

	// Use this for initialization
	void Start () {
		// do something...
		bDecreaseAlpha = (targetAlpha < alpha);
	}
	
	// Update is called once per frame
	void Update () {
		//Debug.Log ("duration: "+duration+", alpha: "+alpha+", targetAlpha: "+targetAlpha+", bDecreaseAlpha: "+bDecreaseAlpha);
		if (duration > 0f && ((bDecreaseAlpha && alpha > targetAlpha) || (!bDecreaseAlpha && alpha < targetAlpha))) {
			float value = (Time.deltaTime / duration);
			if (bDecreaseAlpha) {
				alpha -= value;
			} else {
				alpha += value;
			}

			// set alpha value
			Set(gameObject, alpha);
		} else {
			// remove component while fade effect stopped
			Destroy(this);
		}
	}

	void initAlpha() {
		Renderer render = GetComponent<Renderer> ();
		if (render != null) {
			alpha = render.material.color.a;
		} else {
			CanvasRenderer cr = GetComponent<CanvasRenderer>();
			if( cr != null ) {
				alpha = cr.GetAlpha();
			}
		}
	}

	public static void Set(GameObject obj, float alphaVal) {
		Renderer render = obj.GetComponent<Renderer> ();
		if (render != null) {
			Color c = render.material.color;
			c.a = alphaVal;
			render.material.color = c;
		} else {
			CanvasRenderer cr = obj.GetComponent<CanvasRenderer> ();
			if (cr != null) {	
				cr.SetAlpha (alphaVal);
			}
		}
	}

	public static void In(GameObject obj, float duration=1f) {
		To (obj, duration, 1f);
	}

	public static void Out(GameObject obj, float duration=1f) {
		To (obj, duration, 0f);
	}

	public static void To(GameObject obj, float duration=1f, float targetAlphaValue=0f) {
		Fade f = obj.AddComponent<Fade> ();
		f.initAlpha ();
		f.duration = duration;
		f.targetAlpha = targetAlphaValue;
	}
}

Usage:

Fade.In(healthBar);
Fade.Out(healthBar);

good luck! :slight_smile:

I used …

GameObject.Find ("myText").GetComponent<CanvasRenderer> ().SetAlpha(0.0f);

to access the alpha of a text element.