Diseñar una pantalla de inicio en Unity requiere combinar elementos de UI con sprites del mundo de juego para lograr un look profesional. Aprenderás a estructurar contenedores, alinear botones y replicar fondos animables usando solo los assets ya importados.

Esta guía es para quienes ya tienen su proyecto base armado y quieren transformar la Start Screen en una pantalla pulida, lista para sumarle animaciones después.

¿Cómo estructurar el título con un contenedor en Unity UI?

Todo arranca con el fondo negro detrás del título. Dentro del elemento UI Start Screen haces clic derecho sobre el contenedor, agregas una nueva imagen y la nombras Title Container con color negro [00:25].

El truco está en mover el texto del título dentro de ese Title Container y cambiar el alineamiento. El contenedor general pasa de centrado a stretch horizontal, con cero píxeles a izquierda y derecha. Así todos los hijos heredan el ancho completo de la pantalla.

¿Qué hace el stretch alignment en Unity UI? Estira un elemento para que ocupe todo el ancho o alto de su padre, manteniendo distancias fijas en píxeles desde los bordes.

El título también va en stretch completo (cero arriba, abajo, izquierda y derecha). Como el container tiene un Vertical Layout Group, basta con poner el Title Container como primer hijo para que aparezca arriba [01:15].

¿Cómo aplicar la fuente Kenny Blocks correctamente?

Cambias el color del texto a blanco y la fuente a Kenny Blocks. Importante: con esta tipografía nunca uses Bold, porque la fuente ya tiene su propio peso visual [01:35].

Para que se vea como en la referencia, sube el Font Size máximo a 240 y reduce el Line Spacing. El espacio entre líneas comprimido le da ese aire de logo arcade.

¿Cómo crear botones con Vertical Layout Group?

El Spacer que usabas antes ahora se renombra a Button Container y recibe un componente Vertical Layout Group. Este será el padre de los botones [02:10].

Dentro del Vertical Layout Group desmarca las opciones de Force Expand tanto en width como en height. No quieres que los botones se estiren a la fuerza; quieres que mantengan su tamaño real.

• Centra los hijos con Child Alignment en Upper Center.
• Agrega Padding Top de 150 píxeles para separarlo del título.
• Ajusta Spacing para crear el espacio entre los dos botones.

En el Source Image del botón arrastras el sprite del botón azul desde Sprites UI. El texto del botón también lleva Kenny Blocks en blanco, sin negrilla.

¿Cómo agregar un ícono dentro del botón?

Clic derecho sobre el botón, creas un nuevo elemento UI tipo Imagen y lo nombras Icon. Lo alineas al punto izquierdo del padre y le asignas el sprite de la flechita [03:50].

Activa Preserve Aspect en el componente Image para que el ícono no se deforme. Con Alt + Shift puedes escalar manteniendo el aspect ratio.

¿Qué hace Preserve Aspect en Unity? Mantiene la proporción original de un sprite aunque cambies el tamaño del rectángulo que lo contiene, evitando que la imagen se vea estirada.

Para el segundo botón duplicas el de Start, lo renombras BTN Options, le cambias el sprite por el botón gris, el texto a negro con la palabra Options y el ícono por la herramienta. Como Options es más larga, reducirás un poco el Font Size [04:40].

¿Cómo replicar el fondo con sprites en modo Tiled?

Al UI Start Screen le agregas una imagen de fondo con color azul y opacidad reducida. Para ver bien el resultado, desactivas momentáneamente las otras UIs activas en escena [05:20].

En la Main Camera cambias el Background Type de Skybox a Solid Color blanco. Esto deja el lienzo limpio para las columnas de animales que irán por debajo de la UI.

Las columnas no son objetos de UI: son sprites en el mundo de juego. Arrastras un sprite desde la carpeta UI al Hierarchy como GameObject y haces dos ajustes clave:

1. En el Sprite Renderer, cambia Draw Mode de Simple a Tiled.
2. En el inspector del asset, configura Wrap Mode en Repeat y aplica.

Con estos dos pasos, al estirar verticalmente el sprite verás que se repite en lugar de deformarse. Si lo haces muy alto, empezarás a ver muchas jirafitas en cadena [06:45].

¿Cómo combinar varios sprites repetidos en columnas?

Duplicas el sprite y vas cambiando la imagen por hipopótamo, mono y panda. Cada asset necesita su propio Wrap Mode en Repeat. Sin ese ajuste, el modo Tiled no funciona bien.

Con los cuatro elementos seleccionados los rotas en conjunto y duplicas alguno extra para rellenar espacios vacíos. El offset entre columnas crea ese ritmo visual de la referencia.

El resultado final combina UI estructurada con sprites del mundo, separados por capas claras: fondo plano, columnas de animales, panel azul translúcido y encima el título y los botones.

En la siguiente clase usarás Shader Graph para sumarle movimiento y animaciones a esta pantalla. ¿Qué animación te gustaría agregarle primero a tu Start Screen? Cuéntame en los comentarios.