Canvas groups can centrally control certain aspects of all elements on a canvas without having to deal with each element individually. The attributes of a canvas group affect the gameobject and all its children.

Properties:

Alpha: opacity, between 0 and 1, where 0 is transparent and 1 is opaque. UI elements retain their alpha value, so in the end the actual display of elements will show the alpha property of the canvas group * the alpha value of the element itself.

Interactable: Determines whether this component receives input. If this option is not selected, interaction is disabled (the interaction function of the component itself) and the value is false.

Block Raycasts: Is this component a raycast collider? The RayCast function needs to be called on the graphical rayprojector attached to the canvas. If not checked, the collider is not used as a ray projection, and the value is false.

Ignore Parent Groups: Whether this Group is affected by the Settings of the Canvas Group component higher up in the gameObject hierarchy view. Check to receive detection, the value is true.

Test cases:

Create a Canvas and add the Canvas Group component. Add two Button components of the same color to the GameObject and set the alpha of the first Button to 146;

  • Adjust the alpha value of the Canvas Group component on Canvas, and observe that the colors of the two buttons change as follows:

  • Set the interactable of Canvas Group component on Canvas to unchecked state and observe that two buttons are unclickable state:
  • Check the Ignore Parent Group of this GameObject, change the alpha value of the Canvas Group component on the Canvas, and set the interactable of the Canvas Group component to uncheck state. The color and interaction state of the two buttons are not affected:

CanvasGroup Alpha compared to SetActive() :

  • The performance difference between Canvas Group Alpha and SetActive() is not significant.
  • When Canvas Group Alpha is set from 0 to 1, scripts on its living children do not execute Awake(), whereas SetActive(true) does.
  • Drawcall is also not called when Canvas Group Alpha is set to 0 and SetActive(false).

Common application scenarios:

  • Add a Canvas Group component to the window’s GameObject and fade in and out of the window by controlling its Alpha value.
  • Set a set of controls without interaction (gray) by adding a Canvas Group component to the parent GameObject and setting its Interactable value to false;
  • Make one or more UI elements that do not block mouse events by adding the element or a parent of the element to the Canvas Group and setting BlockRaycasts to false.

Small cases (fade in and out)

The test script hangs on the Canvas of the case

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class test : MonoBehaviour
{
    private float alphaBegin = 0.0 f;
    private float alphaSpeed = 2.0 f;
    bool isShow = false;
    private CanvasGroup ex;
    // Start is called before the first frame update
    void Start()
    {
        ex = this.transform.GetComponent<CanvasGroup>();
    }

    // Update is called once per frame
    void Update()
    {
        if(! isShow) { ex.alpha = Mathf.Lerp(ex.alpha, alphaBegin, alphaSpeed * Time.deltaTime);if (Mathf.Abs(alphaBegin - ex.alpha)<= 0.01)
            {
                isShow = true;
                ex.alpha = alphaBegin;
                alphaBegin = 1; }}else
        {
            ex.alpha = Mathf.Lerp(ex.alpha, alphaBegin, alphaSpeed * Time.deltaTime * 0.5 f);
            if(Mathf.Abs(alphaBegin - ex.alpha)<=0.01)
            {
                isShow = false;
                ex.alpha = alphaBegin;
                alphaBegin = 0; }}}}Copy the code

Refer to the reference

# Unity CanvasGroup component