CanvasGroup For Fading?

[BlackPhi]

[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?

[Galandil]

Do you mean the Canvas Group component?

[BlackPhi]

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)

[Galandil]

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

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.

[BlackPhi]

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

[SirCadian]

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!

[blainelight]

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