Construye la Start Screen en Unity

Curso de Creación de Interfaces de Usuario con Unity

Contenido del curso

Introducción y configuración inicial

El sistema de UI de Unity

Haciendo interfaces para el juego

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0012:31

Construye la Start Screen en Unity

Curso de Creación de Interfaces de Usuario con Unity

Clase 16 de 29

Clase 16 / 29

Recursos

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:

En el Sprite Renderer, cambia Draw Mode de Simple a Tiled.
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.

Resumen

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?

¿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.

¿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.

¿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:

En el Sprite Renderer, cambia Draw Mode de Simple a Tiled.
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.

Introducción y configuración inicial

Transforma la UI de tu juego Match 3 en Unity

Cargando el proyecto

Unity UI vs UI Toolkit: cuál usar en 2022

El sistema de UI de Unity

Canvas y sus modos de renderizado en Unity

El Rect Transform

Componente de imagen

Máscaras y efectos

Texto en Unity con Text Mesh Pro

Creando botones en nuestra interfaz

Otros elementos de UI

Auto layout

Scroll views

Controla grupos de UI con Canvas Group

Haciendo interfaces para el juego

Pantallas de UI para Safari Match en Unity

Importar y configurar sprites UI en Unity

Construye la Start Screen en Unity

Animando el fondo con shader graph

Agregando lógica a la pantalla de título

Scroll view de selección de niveles en Unity

Genera lista de niveles con prefabs en Unity

Corrige bugs de UI antes de añadir más features

Contador de puntos y pausa en Unity HUD

Anima iconos con DOTween en Unity

Pantalla de pausa en Unity con Layout Group

Pantalla de pausa con reseteo de escena en Unity

Rediseño visual de la pantalla Game Over en Unity

Pantalla de opciones con layouts en Unity

Implementación de la pantalla de configuración

Interfaces de Unity que parecen juegos profesionales

Construye la Start Screen en Unity

Progreso del curso

Introducción y configuración inicial

El sistema de UI de Unity

Haciendo interfaces para el juego

Recursos

Recursos