CanvasGroup For Fading?

Unity Courses Talk
,
#1

[Editted 8/12 to replace PanelGroup or panel with the correct CanvasGroup or canvas. Hopefully it makes more sense now.]

When I looked for how to adjust the alpha I came across a CanvasGroup component for the Canvas which seems to do exactly what we require without having to create a kind of black curtain across the front of everything.

Basically changing the alpha of a CanvasGroup component appears to affect the alpha for the entire canvas, allowing the whole thing to be simply faded in. Is this a new component with Unity 5, and so not in this course? Or is it a component which is designed for something totally different and it’s purely a fluke it happens to do what I wanted on my screens?

3 Likes
Animator
#2

Do you mean the Canvas Group component?

1 Like
#3

Sorry, total brain glitch! Yes, throughout my question read ‘Canvas’ for ‘Panel’.

(In all those emojis I can’t see a single “Oops, I’m a dimbat” one - take it as implicit)

1 Like
#4

No problem, I just wanted to be sure, since I didn’t yet know the existence of such component before reading your first post. :smiley:

And you’re right, I added it directly on the Canvas object of the main menu, and it worked better than having an additional child panel, which btw “blocked” the buttons before the fade-in was over, with the Canvas Group you can use those buttons even during the fade-in animation.

No need for an animator and a clip, active buttons, simpler fade-in script. Nice catch!

Oh, I checked on my Unity 4, and the component was already there, so it’s not new in Unity 5.

2 Likes
#5

Original query corrected. Thanks, Galandil, for your reply and comments. :slight_smile:

#6

I was just about to post about my use of adding a Canvas Group to the panel and unchecking “blocks raycast” and “Interactive”. This keeps the buttons interactive during the fade. Seems I just didn’t take the whole Canvas Group thing far enough. Going to head back into my code to replace the panel with a Canvas Group. Nice tip, thanks! :slight_smile:

#7

This is amazing! I’ve tried all 3 solutions:

  1. The one in the lecture
  2. The CrossFadeAlpha method
  3. This “Canvas Group” method

The Canvas Group method is the best because:

  • It’s most intuitive to set up
  • It requires the simplest code
  • It allows the user to click around as it fades (the user doesn’t have to wait for the fade to finish in order to click)

For anyone wondering how to replicate:

  1. In Unity, in the 01a Start scene, click on Canvas

  2. Click Add Component, then add the “Canvas Group” component

  3. Set alpha to 0

  4. Add Component, make a script, code below (don’t forget to add in the UnityEngine.UI too):

     public float fadeInDelay;
 private CanvasGroup canvasGroup;

 void Start()
 {
     canvasGroup = GetComponent<CanvasGroup>();
 }

 void Update()
 {
     canvasGroup.alpha += Time.deltaTime / fadeInDelay;
 }

Hope that helps and thanks again @BlackPhi for finding this!
-Blaine

2 Likes
Why fading the alpha so...complex?

Privacy & Terms