Diseñar una pantalla de configuración en Unity requiere combinar componentes de UI que organicen los elementos de forma flexible y consistente con el resto del juego. Aquí aprenderás a construirla desde cero usando vertical layout groups, horizontal layout groups y reutilizando assets como botones e íconos para mantener coherencia visual.

¿Cómo se estructura el contenedor principal de la pantalla de opciones?

La base de toda esta pantalla es un objeto UI Image llamado UI Options configurado en stretch con valores en cero para ocupar todo el espacio disponible. El color de fondo se reutiliza desde la pantalla de pausa para mantener identidad visual entre menús [01:05].

Dentro de ese fondo va un Container que actúa como panel central. Este contenedor usa el sprite gray button en modo sliced y un vertical layout group que ordena los elementos de arriba hacia abajo.

¿Qué hace un vertical layout group en Unity? Es un componente que apila automáticamente los hijos de un objeto en columna y permite controlar su tamaño, alineación y separación sin posicionar manualmente cada elemento.

¿Por qué usar Content Size Fitter junto al layout group?

Para que el contenedor se ajuste al contenido, se añade un Content Size Fitter con horizontal fit sin restricciones y vertical fit en preferred size. Así el panel crece o se reduce según los elementos internos, sin necesidad de fijar dimensiones manualmente [03:30].

En el vertical layout group se desmarca control child height pero se activa control child width, lo que permite que los textos se expandan a lo ancho mientras conservan su alto natural.

¿Cómo combinar layouts verticales y horizontales para los controles?

La pantalla mezcla dos direcciones: el título, los labels y los bloques de controles van en vertical, pero dentro de cada bloque de control hay un botón menos, un número y un botón más alineados en horizontal.

Para lograrlo, se crea un objeto Music Controls con un horizontal layout group alineado al middle center. Dentro van tres elementos:

• Un Minus Button cuadrado de 100x100 con el ícono de subtract.
• Un texto grande con el valor del volumen, dimensionado a 120x120.
• Un Plus Button idéntico al anterior pero con el ícono de plus.

En ese layout horizontal se desactivan las opciones de child force expand y se ajusta el spacing a 40 para separar los elementos sin que se peguen entre sí [07:45].

¿Cómo se ajustan los íconos pixelados de los botones?

Al usar sprites pequeños sobre botones más grandes, la imagen se ve borrosa o pixelada. La solución está en el Pixel Per Unit Multiplier, que se ajusta a valores como 1.25 para escalar el sprite manteniendo nitidez [06:20].

¿Qué es el Pixel Per Unit Multiplier? Es un parámetro del componente Image que multiplica la densidad de píxeles del sprite original, útil para escalar botones tipo 9-sliced sin perder definición.

Los íconos plus y minus se importan desde la carpeta de assets del curso y se asignan como hijos Icon dentro de cada botón.

¿Cómo agregar separaciones y reutilizar elementos existentes?

Cuando los espacios entre secciones necesitan ser mayores que el spacing general del layout, se crean objetos vacíos llamados Spacer. Funcionan como separadores controlables que se insertan entre el título y el primer label, o entre los bloques de música y efectos.

Para construir el bloque de SFX no hace falta empezar de cero. Basta con duplicar Music Label y Music Controls, renombrarlos a SFX Label y SFX Controls, y cambiar el texto. Así se acelera el flujo de trabajo y se garantiza consistencia visual.

¿Cómo reutilizar el botón de regreso desde otra pantalla?

El botón de la esquina inferior izquierda ya existe en la pantalla de selección de niveles. En lugar de crearlo otra vez, se copia el objeto Button Back desde Level Selection y se pega dentro de UI Options [12:10]. Esta práctica reduce duplicación y mantiene comportamiento idéntico entre pantallas.

El título principal Options usa la fuente Kenny Blocks con auto size máximo de 200 y un gris claro, mientras que los labels secundarios como Music y SFX usan un tono más suave para crear jerarquía visual.

El padding del contenedor cierra la composición: poco espacio arriba, pero alrededor de 100 a 120 unidades en bottom para que el panel respire visualmente.

Con la diagramación lista, el siguiente paso es darle lógica a los botones para que realmente modifiquen el volumen del juego. ¿Cómo organizas tú las pantallas de configuración en tus proyectos? Cuéntame en los comentarios.