Scroll view de selección de niveles 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:0010:47

Scroll view de selección de niveles en Unity

Curso de Creación de Interfaces de Usuario con Unity

Clase 19 de 29

Clase 19 / 29

Recursos

Diseñar una pantalla de selección de niveles en Unity requiere combinar scroll view, layout groups y máscaras para que el resultado sea funcional y visualmente limpio. Aquí verás cómo armar esa vista paso a paso, con un panel scrollable de niveles y un botón de regreso anclado a la esquina inferior izquierda, ideal si estás construyendo la UI de un videojuego 2D.

¿Cómo se estructura la pantalla de selección de niveles?

La vista se divide en dos paneles claros: un scroll view que ocupa la mayor parte de la pantalla con la lista de niveles y un botón back alineado a la esquina inferior izquierda. Esa separación te permite que el listado crezca o se reduzca sin afectar la posición del botón de navegación.

El primer paso es desactivar los elementos de UI previos y crear una nueva imagen llamada UI Level Selection dentro del UI principal [01:00]. Esta imagen funciona como fondo y debe configurarse así:

Anchors en stretch en todas las direcciones.
Cero píxeles de distancia en cada lado.
Color de fondo azul, similar al de la referencia visual.

¿Qué es un anchor stretch en Unity UI? Es una configuración del rect transform que hace que el elemento se expanda automáticamente para llenar a su contenedor padre en las direcciones que elijas. Útil para fondos y paneles que deben adaptarse a cualquier resolución.

¿Cómo crear una lista scrollable de niveles con Vertical Layout Group?

Dentro de UI Level Selection se crea un elemento llamado Level List que actúa como viewport del scroll [02:10]. Inicia como imagen para tener el rect transform, luego puedes remover el componente de imagen si no lo necesitas. Su tamaño vertical se reduce para dejar espacio al botón inferior.

Dentro de Level List se crea un hijo llamado Container, que es donde realmente se acomodan los botones de cada nivel. Aquí entran dos componentes clave:

Vertical Layout Group: organiza los botones uno debajo del otro automáticamente.
Content Size Fitter: configurado en horizontal fit unconstrained y vertical fit preferred size para que el contenedor crezca según la cantidad de niveles [03:30].

Luego copias un botón existente, por ejemplo el botón de opciones de la pantalla de inicio, lo pegas dentro de Container y lo renombras como Level 1. Eliminas el ícono, alineas el texto en stretch con un padding left de 55 y aumentas el font size. Al duplicar este botón, el vertical layout group lo posiciona automáticamente.

¿Cómo agregar espacio y alineación entre los botones?

En el componente vertical layout group del Container cambias el alignment a upper center y configuras el spacing para que cada nivel tenga separación visual. También conviene aplicar un padding top de 200 unidades para que el primer nivel no quede pegado al borde superior [07:45].

¿Cómo aplicar una máscara para ocultar los niveles fuera del scroll?

Sin una máscara, los botones que se desplazan fuera del área visible siguen apareciendo en pantalla. Para evitarlo, en Level List agregas dos componentes:

Un componente Image, ya que las máscaras requieren una imagen base.
Un componente Mask que recorta visualmente todo lo que esté fuera del rect transform.

La máscara usa la opacidad de la imagen, así que el truco es asignarle el mismo color del fondo (UI Level Selection) en lugar de bajar el alpha. Copias el azul del fondo y se lo pegas a Level List [05:30]. Así el contenedor puede desplazarse libremente, pero los niveles solo se ven dentro del área permitida.

¿Para qué sirve el componente Mask en Unity? Recorta los hijos visuales de un elemento UI para que solo se muestren dentro del área de su rect transform. Es esencial para crear scroll views limpios donde el contenido no se desborda.

Después alineas el Container a la esquina superior izquierda con pivote en (0, 1) y posición (0, 0), de modo que crezca hacia abajo a medida que se agregan niveles.

¿Cómo configurar el componente Scroll Rect en Unity?

El componente Scroll Rect se agrega a Level List y necesita esta configuración [06:40]:

Content: el Container con los botones.
Viewport: el propio rect transform de Level List.
Horizontal: desactivado.
Vertical: activado.
Sin horizontal ni vertical scroll bar.
Mantener elastic e inertia en sus valores por defecto.

Al entrar en play mode, el scroll funciona y los botones siguen siendo clicables. Si el primer nivel queda muy arriba, ajustas el padding top del vertical layout group del contenedor.

¿Cómo agregar el botón Back en la esquina inferior izquierda?

Reutiliza el botón Start de la pantalla de inicio copiándolo y pegándolo dentro de UI Level Selection [08:30]. Las modificaciones son:

Anchors alineados a la esquina inferior izquierda.
Pivots en (0, 0).
Posición X y Y en cero.
Renombrar a BTN Back y eliminar el texto.
Invertir el ícono cambiando la escala en X a menos uno.
Reducir el tamaño hasta que sea casi cuadrado.
Centrar el ícono en posición (0, 0), ligeramente desplazado hacia arriba.

Con esto la diagramación queda lista: una lista scrollable de niveles con máscara, vertical layout group y content size fitter, más un botón de regreso anclado de forma persistente. La pantalla aún no está conectada a la lógica del juego, pero la base visual ya soporta cualquier cantidad de niveles que quieras agregar después.

¿Has trabajado con scroll views en otros proyectos de Unity? Cuéntame qué patrones de UI sueles repetir en tus juegos.

Resumen

¿Cómo se estructura la pantalla de selección de niveles?

Anchors en stretch en todas las direcciones.
Cero píxeles de distancia en cada lado.
Color de fondo azul, similar al de la referencia visual.

¿Qué es un anchor stretch en Unity UI? Es una configuración del rect transform que hace que el elemento se expanda automáticamente para llenar a su contenedor padre en las direcciones que elijas. Útil para fondos y paneles que deben adaptarse a cualquier resolución.

¿Cómo crear una lista scrollable de niveles con Vertical Layout Group?

Dentro de Level List se crea un hijo llamado Container, que es donde realmente se acomodan los botones de cada nivel. Aquí entran dos componentes clave:

Vertical Layout Group: organiza los botones uno debajo del otro automáticamente.
Content Size Fitter: configurado en horizontal fit unconstrained y vertical fit preferred size para que el contenedor crezca según la cantidad de niveles [03:30].

¿Cómo agregar espacio y alineación entre los botones?

¿Cómo aplicar una máscara para ocultar los niveles fuera del scroll?

Sin una máscara, los botones que se desplazan fuera del área visible siguen apareciendo en pantalla. Para evitarlo, en Level List agregas dos componentes:

Un componente Image, ya que las máscaras requieren una imagen base.
Un componente Mask que recorta visualmente todo lo que esté fuera del rect transform.

¿Para qué sirve el componente Mask en Unity? Recorta los hijos visuales de un elemento UI para que solo se muestren dentro del área de su rect transform. Es esencial para crear scroll views limpios donde el contenido no se desborda.

Después alineas el Container a la esquina superior izquierda con pivote en (0, 1) y posición (0, 0), de modo que crezca hacia abajo a medida que se agregan niveles.

¿Cómo configurar el componente Scroll Rect en Unity?

El componente Scroll Rect se agrega a Level List y necesita esta configuración [06:40]:

Content: el Container con los botones.
Viewport: el propio rect transform de Level List.
Horizontal: desactivado.
Vertical: activado.
Sin horizontal ni vertical scroll bar.
Mantener elastic e inertia en sus valores por defecto.

Al entrar en play mode, el scroll funciona y los botones siguen siendo clicables. Si el primer nivel queda muy arriba, ajustas el padding top del vertical layout group del contenedor.

¿Cómo agregar el botón Back en la esquina inferior izquierda?

Reutiliza el botón Start de la pantalla de inicio copiándolo y pegándolo dentro de UI Level Selection [08:30]. Las modificaciones son:

Anchors alineados a la esquina inferior izquierda.
Pivots en (0, 0).
Posición X y Y en cero.
Renombrar a BTN Back y eliminar el texto.
Invertir el ícono cambiando la escala en X a menos uno.
Reducir el tamaño hasta que sea casi cuadrado.
Centrar el ícono en posición (0, 0), ligeramente desplazado hacia arriba.

¿Has trabajado con scroll views en otros proyectos de Unity? Cuéntame qué patrones de UI sueles repetir en tus juegos.

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

Scroll view de selección de niveles en Unity

Progreso del curso

Introducción y configuración inicial

El sistema de UI de Unity

Haciendo interfaces para el juego

Recursos

Recursos