Construir una interfaz de juego funcional y atractiva es fundamental para cualquier proyecto en Unity. Aquí se aborda paso a paso cómo crear un contador de puntos con un ícono de estrella y un botón de pausa, organizando correctamente la jerarquía de elementos UI y resolviendo problemas comunes de alineación.
¿Cómo organizar la jerarquía UI para el gameplay?
Antes de agregar nuevos elementos visuales, es necesario contar con un contenedor principal que agrupe toda la interfaz visible durante la partida. Para ello se crea un nuevo componente de tipo imagen llamado UI in game [0:26]. Este objeto se configura con stretch y distancia cero en todas las direcciones, lo que garantiza que ocupe toda la pantalla sin importar la resolución.
Una vez creado, se le retira el componente de imagen ya que solo funciona como contenedor lógico. Todas las demás interfaces se ocultan temporalmente para trabajar con mayor claridad. El elemento existente de UI Points pasa a ser hijo de este nuevo contenedor.
¿Cómo crear el contador de puntos con estrella?
Dentro de UI in game se genera un objeto llamado points container [1:08]. Su configuración de anchor se coloca en la esquina inferior izquierda, con el punto de pivote en coordenadas cero, cero y posición cero, cero. Se le elimina el componente de imagen y se ajusta el ancho.
El componente de texto de UI Points se modifica con estos valores:
- Texto inicial: cinco ceros como marcador.
- Fuente: Kenny Blocks.
- Se desactiva auto size y se establece un tamaño fijo.
- Color amarillo intenso.
Para el ícono, se añade una imagen hija de points container llamada star [2:00]. Se selecciona el sprite de estrella importado previamente y se activa preserve aspect para mantener las proporciones. El color de la estrella se iguala al del texto copiando directamente el valor hexadecimal.
Un detalle visual interesante: la estrella del diseño tiene una estrella interior más pequeña. Se logra duplicando el objeto con Ctrl+D (o Cmd+D), volviéndolo hijo de la estrella original, reduciendo su tamaño con Alt+Shift presionados y asignándole un color más oscuro [2:28].
¿Cómo configurar el UI screen para que aparezca solo durante el juego?
Al contenedor UI in game se le agrega un componente UI Screen [3:07]. Este se configura para ser visible únicamente durante el estado in game, con un transition time de 0.1 segundos. Se necesitan tres referencias obligatorias:
- Container rect: el propio rect transform.
- Container canvas: un componente canvas group que se añade manualmente.
- Background: una imagen sin opacidad (visible alpha en cero).
El visible state se establece como in game, asegurando que la interfaz solo se muestre cuando la partida está activa.
¿Cómo agregar un botón de pausa reutilizando componentes?
En lugar de crear un botón desde cero, se copia el botón existente de la pantalla de inicio (button start game) con Ctrl+C y se pega dentro de UI in game [4:07]. Su punto de pivote se ajusta a X=1 e Y=0 para anclarlo en la esquina inferior derecha. Las posiciones X e Y quedan en cero.
Los ajustes finales del botón de pausa incluyen:
- Eliminar el texto hijo, ya que solo muestra un ícono.
- Asignar como source image el sprite de pausa [4:39].
- Reducir el tamaño del botón y su ícono hasta lograr una proporción visual adecuada.
¿Cómo solucionar problemas de alineación en la selección de niveles?
Al probar con play, la pantalla de selección de niveles mostraba botones desplazados hacia la derecha [5:05]. El origen del problema estaba en el ancho del contenedor de la lista de niveles.
Para corregirlo se edita el prefab del botón de nivel haciéndolo más pequeño. Además, se modifica el width del contenedor level list directamente. Un dato importante: los cambios hechos en modo play se pierden al detener la ejecución [5:40]. La solución es anotar el valor correcto (en este caso, 1080 de ancho), detener el modo play y volver a aplicar el valor manualmente.
Tras guardar la escena y verificar, los niveles aparecen centrados correctamente, el contador de puntos funciona y el botón de pausa se posiciona de forma adecuada. Con estos ajustes, la interfaz de gameplay queda lista para conectarse con nuevas lógicas en futuras iteraciones.
