Contador de puntos y pausa en Unity HUD

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:0011:06

Contador de puntos y pausa en Unity HUD

Curso de Creación de Interfaces de Usuario con Unity

Clase 22 de 29

Clase 22 / 29

Recursos

Mejorar la interfaz de gameplay en Unity implica crear un contenedor principal, añadir un contador de puntos con icono de estrella y un botón de pausa funcional. Si estás desarrollando un match 3 o cualquier juego 2D, esta guía te muestra cómo organizar elementos de UI usando anchors, pivots y el componente UI Screen para que tu HUD se vea profesional y se active solo cuando el jugador está en partida.

¿Cómo crear un contenedor principal para la interfaz de gameplay?

Antes de añadir elementos sueltos, necesitas un contenedor que agrupe toda la UI del gameplay. Esto te permite mostrar y ocultar el HUD completo según el estado del juego.

Dentro del Canvas, crea un nuevo objeto de tipo Image y nómbralo UI In Game. Configúralo con un stretch completo y distancia cero en todas las direcciones para que ocupe toda la pantalla. Luego elimina el componente Image porque no necesitas que pinte nada, solo que actúe como contenedor lógico [01:00].

El objeto UI Points que ya existía debe pasar a ser hijo de UI In Game. Así, todo lo que pertenece al HUD queda agrupado bajo un mismo padre.

¿Para qué sirve un contenedor vacío en Unity UI? Funciona como agrupador lógico. Te permite mover, mostrar u ocultar varios elementos hijos a la vez sin afectar su posicionamiento individual.

¿Cómo armar el contador de puntos con estrella en Unity?

El contador necesita tres piezas: un contenedor, el texto numérico y el icono de estrella. Cada uno con su propio rol visual.

Configuración del Points Container y el texto

Dentro de UI In Game, crea un objeto Image llamado Points Container. Alinéalo a la esquina inferior izquierda y coloca su pivot en 0,0 con posición 0,0, de modo que quede anclado abajo a la izquierda [02:10]. Dale un poco más de ancho y elimina el componente Image.

Mueve UI Points como hijo de Points Container y ajusta el componente Text:

Coloca cinco ceros como placeholder.
Usa la fuente Kenny Blocks.
Desactiva auto size y fija un tamaño manual.
Aplica un color amarillo para que destaque sobre el fondo.

Añadir el icono de estrella con efecto de profundidad

Dentro de Points Container, agrega un objeto Image llamado Star y asígnale el sprite de estrella que ya estaba importado. Activa Preserve Aspect para que no se deforme y aplica el mismo color amarillo del texto copiándolo desde UI Points.

Para dar profundidad visual, duplica la estrella con Ctrl+D (o Cmd+D), conviértela en hija de la primera y reduce su tamaño manteniendo Alt+Shift presionado mientras escalas. Cambia su color a un tono más oscuro para que se vea como una estrella interna [04:00].

¿Cómo configurar el componente UI Screen para mostrar el HUD solo en partida?

El HUD no debe aparecer en el menú principal ni en la selección de niveles. Para controlar esto, UI In Game necesita su propio UI Screen.

Agrega el componente UI Screen a UI In Game y configura el Visible State como In Game. Pon el Transition Time en 0.1 segundos para una aparición casi instantánea y deja el Visible Alpha en 1.

El componente requiere referencias a Container Rect, Container Canvas y Background, pero en este caso no quieres un fondo visible. La solución consiste en:

Volver a añadir un componente Image (necesario por dependencia).
Configurar su Visible Alpha en 0 para que sea totalmente transparente.
Agregar un componente Canvas Group al mismo objeto.

Ahora asigna Container Rect al Rect Transform, Container Canvas al Canvas Group y Background a la Image transparente [05:30]. Con esto, el HUD aparece y desaparece automáticamente según el estado del juego.

¿Qué hace el Canvas Group en Unity? Permite controlar la opacidad, interactividad y bloqueo de raycasts de un grupo de elementos UI con un solo componente, sin tocar cada hijo por separado.

¿Cómo agregar un botón de pausa reutilizando un prefab existente?

En lugar de crear el botón desde cero, copia el botón Start Game que ya está en Start Screen. Selecciónalo, presiona Ctrl+C (o Cmd+C) y pégalo dentro de UI In Game [07:00].

Una vez pegado, ajusta su posicionamiento:

Pivot en X=1, Y=0 para anclarlo a la esquina inferior derecha.
Anchors alineados a la parte inferior derecha.
Posición X=0, Y=0 respecto a ese anclaje.

Elimina el texto del botón porque la pausa solo necesita icono. En el componente Image del botón, cambia el Source Image al icono de pausa que ya tienes importado. Reduce el tamaño del botón y el icono hasta que se vea proporcional al resto del HUD.

¿Cómo arreglar la selección de niveles cuando los botones se salen del contenedor?

Al ajustar el Scale Size del Canvas, los botones de selección de niveles empezaron a desbordarse hacia la derecha. La causa está en el ancho del container y en el tamaño del prefab del botón.

Primero edita el prefab del botón en la carpeta Prefabs > UI y reduce su tamaño. Guarda el prefab y vuelve a la escena. Si los botones siguen descentrados, ajusta el width del Container dentro de Level List.

Un detalle importante: si modificas el width mientras Unity está en modo Play, los cambios se pierden al detenerlo. La técnica correcta es:

Estando en Play, encuentra el valor que funciona, por ejemplo 1080.
Copia ese valor numérico.
Detén el Play.
Pega el valor en el campo width del Container.
Guarda la escena [10:00].

Con eso, los niveles quedan centrados, el HUD aparece solo durante la partida y el contador de puntos sigue funcionando correctamente al seleccionar un nivel.

¿Qué otro elemento agregarías a tu HUD de gameplay? Déjamelo en los comentarios.

Resumen

¿Cómo crear un contenedor principal para la interfaz de gameplay?

Antes de añadir elementos sueltos, necesitas un contenedor que agrupe toda la UI del gameplay. Esto te permite mostrar y ocultar el HUD completo según el estado del juego.

El objeto UI Points que ya existía debe pasar a ser hijo de UI In Game. Así, todo lo que pertenece al HUD queda agrupado bajo un mismo padre.

¿Para qué sirve un contenedor vacío en Unity UI? Funciona como agrupador lógico. Te permite mover, mostrar u ocultar varios elementos hijos a la vez sin afectar su posicionamiento individual.

¿Cómo armar el contador de puntos con estrella en Unity?

El contador necesita tres piezas: un contenedor, el texto numérico y el icono de estrella. Cada uno con su propio rol visual.

Configuración del Points Container y el texto

Mueve UI Points como hijo de Points Container y ajusta el componente Text:

Coloca cinco ceros como placeholder.
Usa la fuente Kenny Blocks.
Desactiva auto size y fija un tamaño manual.
Aplica un color amarillo para que destaque sobre el fondo.

Añadir el icono de estrella con efecto de profundidad

¿Cómo configurar el componente UI Screen para mostrar el HUD solo en partida?

El HUD no debe aparecer en el menú principal ni en la selección de niveles. Para controlar esto, UI In Game necesita su propio UI Screen.

El componente requiere referencias a Container Rect, Container Canvas y Background, pero en este caso no quieres un fondo visible. La solución consiste en:

Volver a añadir un componente Image (necesario por dependencia).
Configurar su Visible Alpha en 0 para que sea totalmente transparente.
Agregar un componente Canvas Group al mismo objeto.

¿Qué hace el Canvas Group en Unity? Permite controlar la opacidad, interactividad y bloqueo de raycasts de un grupo de elementos UI con un solo componente, sin tocar cada hijo por separado.

¿Cómo agregar un botón de pausa reutilizando un prefab existente?

En lugar de crear el botón desde cero, copia el botón Start Game que ya está en Start Screen. Selecciónalo, presiona Ctrl+C (o Cmd+C) y pégalo dentro de UI In Game [07:00].

Una vez pegado, ajusta su posicionamiento:

Pivot en X=1, Y=0 para anclarlo a la esquina inferior derecha.
Anchors alineados a la parte inferior derecha.
Posición X=0, Y=0 respecto a ese anclaje.

¿Cómo arreglar la selección de niveles cuando los botones se salen del contenedor?

Al ajustar el Scale Size del Canvas, los botones de selección de niveles empezaron a desbordarse hacia la derecha. La causa está en el ancho del container y en el tamaño del prefab del botón.

Un detalle importante: si modificas el width mientras Unity está en modo Play, los cambios se pierden al detenerlo. La técnica correcta es:

Estando en Play, encuentra el valor que funciona, por ejemplo 1080.
Copia ese valor numérico.
Detén el Play.
Pega el valor en el campo width del Container.
Guarda la escena [10:00].

Con eso, los niveles quedan centrados, el HUD aparece solo durante la partida y el contador de puntos sigue funcionando correctamente al seleccionar un nivel.

¿Qué otro elemento agregarías a tu HUD de gameplay? Déjamelo en los comentarios.

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

Contador de puntos y pausa en Unity HUD

Progreso del curso

Introducción y configuración inicial

El sistema de UI de Unity

Haciendo interfaces para el juego

Recursos

Recursos