El Canvas Group es el componente de Unity que necesitas cuando varios elementos de tu interfaz deben aparecer, desaparecer o dejar de responder al clic al mismo tiempo. Si ya dominas botones e imágenes por separado, este recurso te ahorra horas de trabajo y te da control total sobre grupos completos de UI.

¿Qué hace el Canvas Group en Unity?

Imagina una escena con un botón de fondo y, encima, un contenedor con una imagen y otro botón. Cambiar el color de cada elemento uno por uno para ocultarlos es ineficiente. El Canvas Group resuelve eso aplicando una sola propiedad de transparencia a todo el grupo.

Para agregarlo, vas al objeto padre, abres Add Component y buscas Canvas Group [00:32]. A partir de ahí, controlas todos los hijos desde un solo lugar.

¿Para qué sirve el Canvas Group? Sirve para controlar transparencia, interactividad y bloqueo de clics de varios elementos de UI a la vez, tratándolos como una sola unidad.

¿Cómo funciona la propiedad Alpha?

La propiedad Alpha define la opacidad del grupo completo. En cero, todos los elementos del padre y sus hijos desaparecen visualmente. En uno, se ven al 100%. Puedes interpolar ese valor para crear transiciones suaves de aparición o desvanecimiento [00:48].

Esta es la razón principal por la que el Canvas Group existe: cambiar la visibilidad de muchos componentes con una sola variable.

¿Por qué un Canvas Group invisible sigue bloqueando clics?

Aquí está el detalle que confunde a muchos. Si pones el Alpha en cero y le das Play, los elementos desaparecen, pero si intentas hacer clic en el botón que está debajo, no responde. El Canvas Group sigue ahí, capturando los eventos de clic aunque no lo veas [01:18].

Para solucionarlo, Unity ofrece dos opciones complementarias dentro del mismo componente.

¿Qué diferencia hay entre Interactable y Block Raycasts?

Ambas propiedades controlan la interacción, pero de formas distintas:

• Interactable define si los elementos dentro del Canvas Group responden a la interacción. Si lo desactivas, los botones del grupo dejan de ser cliqueables [01:42].
• Block Raycasts controla si el grupo bloquea los rayos de detección de clics. Al desactivarlo, los clics atraviesan el grupo y llegan a los elementos que están debajo [02:00].
• Combinar ambos en false y poner Alpha en cero es como si la UI no existiera en escena.

Esa combinación es la clave cuando trabajas con interfaces en capas, donde un menú flotante no debe interferir con los botones del fondo cuando está oculto.

¿Cómo oculto un menú en Unity sin que bloquee los clics? Pon el Alpha del Canvas Group en 0, desactiva Interactable y desactiva Block Raycasts. Así el grupo deja de ser visible y permite que los clics pasen a las capas inferiores.

¿Cuándo usar Canvas Group en tus proyectos?

El Canvas Group se vuelve indispensable cuando tu UI tiene diferentes capas superpuestas: menús, paneles, popups o tutoriales que aparecen sobre la interfaz principal. En lugar de manipular cada hijo, controlas el grupo completo con tres propiedades.

Algunos casos típicos donde brilla:

• Transiciones de fade in y fade out de paneles completos.
• Bloquear temporalmente la interacción con un menú mientras se ejecuta una animación.
• Permitir que clics atraviesen una capa decorativa para llegar a botones funcionales.

Con esto cierras el recorrido por los elementos individuales de UI en Unity y tienes las herramientas para construir interfaces más profesionales. ¿Cómo aplicarías el Canvas Group en tu próximo menú? Cuéntame en los comentarios.