Diseñar una pantalla de pausa en Unity requiere combinar elementos visuales coherentes con el resto del juego y aprovechar componentes como Vertical Layout Group y Content Size Fitter para mantener todo ordenado. Si estás creando un juego 2D y quieres que tu interfaz se vea profesional, esta guía te muestra el flujo completo para construir esa pantalla con botones funcionales y un contenedor central bien proporcionado.

¿Cómo preparar la jerarquía y el fondo de la pantalla de pausa?

Antes de añadir elementos nuevos, conviene ordenar la jerarquía actual y reutilizar estilos que ya existen en el proyecto.

Lo primero es revisar la referencia visual en UI References y abrirla en el Sprite Editor para tener clara la composición. Luego, en la vista de juego, colapsa y desactiva las interfaces existentes para trabajar con un lienzo limpio. Aquí aparece un detalle fácil de pasar por alto: la Time Bar también forma parte de la interfaz durante el juego, así que muévela como hija del contenedor de UI principal para mantener la estructura coherente [01:00].

Después, crea una nueva imagen llamada UI Pause con clic derecho en UI. Esta imagen necesita un anchor en stretch con cero en cada una de las distancias para cubrir toda la pantalla. Para el color, abre UI Start Screen, copia el color de su imagen y pégalo en UI Pause. Mantener el mismo tono entre pantallas refuerza la identidad visual del juego.

¿Qué hace el anchor stretch en Unity UI? Hace que un elemento se adapte al tamaño de su contenedor padre en ambos ejes. Con distancias en cero, la imagen ocupa toda la pantalla sin importar la resolución.

¿Cómo crear el contenedor central con Vertical Layout Group?

El panel central que agrupa el título y los botones se construye con una imagen tipo Slice y un layout vertical que ordena automáticamente sus hijos.

Dentro de UI Pause, crea una nueva imagen llamada Container. Arrastra el sprite Grey Button desde la carpeta Sprites/UI hasta el campo de imagen del contenedor. El tipo Slice viene seleccionado por defecto, lo que permite escalar la imagen sin deformar sus bordes. Con la tecla Alt presionada, puedes aumentar su tamaño manteniendo proporciones [02:30].

Para organizar los elementos internos en orden vertical, agrega dos componentes al contenedor:

• Vertical Layout Group: controla la disposición vertical de los hijos.
• Content Size Fitter: con horizontal fit en unconstrained y vertical fit en preferred size, ajusta el alto del contenedor según su contenido.

En el Vertical Layout Group, desactiva child force expand en altura pero mantenlo activo en ancho, y activa control child size width. Así los hijos se expanden al ancho del contenedor sin estirarse verticalmente.

¿Cómo añadir el título y los botones de la pantalla de pausa?

El contenedor necesita tres elementos: un título y dos botones con estilos diferenciados.

Agrega primero un texto de tipo Text Mesh Pro llamado Title con la palabra Pause, alineado al centro. Cambia su fuente a Kenny Locks, ajusta el color a un gris claro y activa auto size con un tamaño de fuente máximo de 200 para que escale solo. Luego, copia el botón Start Button Game desde UI Start Screen y pégalo dos veces dentro del contenedor [04:30].

Para los botones, sigue este flujo:

1. Renombra el primero como BTN Continue, elimina el ícono y deja solo el texto con stretch a todos los lados excepto al bottom.
2. Cambia el texto a Continue y reduce el font size para que se vea proporcionado.
3. Duplica el botón y renombra el segundo como BTN Exit, cambia su source image a Yellow Button y el color del texto a un marrón oscuro.

Este contraste de colores entre botones, gris para continuar y amarillo para salir, ayuda al jugador a distinguir acciones rápidamente.

¿Para qué sirve el padding en un Vertical Layout Group? Define el espacio entre el borde del contenedor y sus hijos. Con padding top de 60, bottom de 100 y left/right de 75, el contenido respira y se ve equilibrado.

¿Cómo afinar el espaciado y el padding del contenedor?

Los detalles de espaciado son los que separan una UI funcional de una UI pulida.

En el Vertical Layout Group del contenedor, ajusta el spacing para crear distancia entre el título y los botones. Luego añade padding en los cuatro lados: aproximadamente 60 unidades arriba, 100 abajo, y 75 a izquierda y derecha. Si los valores laterales hacen que el contenido se sienta apretado, simplemente aumenta el ancho del contenedor en lugar de reducir el padding [06:00].

Los botones también pueden necesitar ajustes de altura. En el diseño de referencia son más bajos que el botón original copiado, así que reduce su height hasta que coincidan con la proporción esperada.

¿Qué sigue después de diagramar la pantalla de pausa?

Con la pantalla visualmente lista, falta la parte funcional: conectar los botones a la lógica del juego para pausar, reanudar y salir. Esa lógica se construye con scripts que controlan el Time.timeScale y la activación del panel, y se trabaja en la siguiente clase.

¿Cómo organizas tú las pantallas de UI en tus proyectos de Unity? Cuéntame en los comentarios qué patrones usas para mantener consistencia entre menús.