Controla grupos de UI con Canvas Group

Curso de Creación de Interfaces de Usuario con Unity

Contenido del curso

Introducción y configuración inicial

El sistema de UI de Unity

Haciendo interfaces para el juego

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:002:58

Controla grupos de UI con Canvas Group

Curso de Creación de Interfaces de Usuario con Unity

Clase 13 de 29

Clase 13 / 29

Recursos

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.

Resumen

¿Qué hace el Canvas Group en Unity?

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?

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?

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?

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.

Introducción y configuración inicial

Transforma la UI de tu juego Match 3 en Unity

Cargando el proyecto

Unity UI vs UI Toolkit: cuál usar en 2022

El sistema de UI de Unity

Canvas y sus modos de renderizado en Unity

El Rect Transform

Componente de imagen

Máscaras y efectos

Texto en Unity con Text Mesh Pro

Creando botones en nuestra interfaz

Otros elementos de UI

Auto layout

Scroll views

Controla grupos de UI con Canvas Group

Haciendo interfaces para el juego

Pantallas de UI para Safari Match en Unity

Importar y configurar sprites UI en Unity

Construye la Start Screen en Unity

Animando el fondo con shader graph

Agregando lógica a la pantalla de título

Scroll view de selección de niveles en Unity

Genera lista de niveles con prefabs en Unity

Corrige bugs de UI antes de añadir más features

Contador de puntos y pausa en Unity HUD

Anima iconos con DOTween en Unity

Pantalla de pausa en Unity con Layout Group

Pantalla de pausa con reseteo de escena en Unity

Rediseño visual de la pantalla Game Over en Unity

Pantalla de opciones con layouts en Unity

Implementación de la pantalla de configuración

Interfaces de Unity que parecen juegos profesionales

Controla grupos de UI con Canvas Group

Progreso del curso

Introducción y configuración inicial

El sistema de UI de Unity

Haciendo interfaces para el juego

Recursos

Recursos