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:

1. Estando en Play, encuentra el valor que funciona, por ejemplo 1080.
2. Copia ese valor numérico.
3. Detén el Play.
4. Pega el valor en el campo width del Container.
5. 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.