Genera lista de niveles con prefabs 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:0013:23

Genera lista de niveles con prefabs en Unity

Curso de Creación de Interfaces de Usuario con Unity

Clase 20 de 29

Clase 20 / 29

Recursos

Crear una lista de niveles dinámica con prefabs de UI en Unity te permite escalar la selección de niveles sin diseñar cada botón manualmente. Aquí aprenderás a instanciar botones, conectar eventos de clic y manejar estados de juego en el GameManager para que tu menú funcione como en un proyecto profesional.

Cómo organizar los prefabs de UI antes de generar la lista

Antes de tocar código, conviene ordenar los assets para que el flujo no se vuelva un caos cuando el proyecto crezca.

Dentro de la carpeta de prefabs, crea dos subcarpetas: una llamada Pieces y otra llamada UI. Mueve todas las piezas existentes a Pieces y reserva UI para los elementos de interfaz. Luego, toma uno de los botones del contenedor de la lista de niveles, renómbralo de BTN Options a BTN Level Option y arrástralo a la carpeta UI para convertirlo en prefab.

Una vez tengas el prefab, elimina los botones que sobran del contenedor. La idea es que la lista no exista en la escena, sino que se genere por código según la cantidad de niveles que definas. [00:30]

¿Qué es un prefab en Unity? Es una plantilla reutilizable de un GameObject que puedes instanciar muchas veces en runtime. Cualquier cambio en el prefab original se replica en todas sus instancias.

Cómo crear el script UI Level Selection para instanciar botones

El script UI Level Selection es el corazón de esta lógica: genera los botones, asigna sus textos y conecta el evento de clic.

Dentro del GameObject UI Level Selection, agrega un nuevo script con ese mismo nombre. En Visual Studio, declara tres propiedades públicas:

public GameObject levelButtonPrefab para el prefab del botón.
public GameObject levelListContainer para el contenedor donde se instancian los botones.
public int levelAmount para la cantidad de niveles a crear.

En la función Start, usa un for loop que recorra desde cero hasta levelAmount. En cada iteración instancia un nuevo objeto como hijo del contenedor:

csharp for (int i = 0; i < levelAmount; i++) { var newObject = Instantiate(levelButtonPrefab, levelListContainer.transform); newObject.GetComponentInChildren<TextMeshProUGUI>().text = "Level " + i.ToString(); newObject.GetComponent<Button>().onClick.AddListener(levelButtonClicked); }

Para que el código compile, agrega using TMPro; y using UnityEngine.UI; en la parte superior del archivo. El primer namespace habilita TextMeshProUGUI y el segundo habilita el componente Button. [02:30]

Cómo conectar el evento onClick a una función personalizada

La función levelButtonClicked se ejecuta cuando el jugador toca un botón de nivel y le indica al GameManager que arranque la partida con GameManager.Instance.StartGame().

También necesitas una función public void backButtonPressed() que llame a GameManager.Instance.Idle() para regresar a la pantalla de inicio. Esa función Idle todavía no existe, así que toca crearla.

Cómo agregar el estado Level Selection al GameManager

Hasta ahora el GameManager manejaba tres estados: idle, in game y game over. Para soportar la nueva pantalla, debes añadir un estado más llamado Level Selection y dos funciones públicas que cambien a esos estados.

Dentro del GameManager agrega:

public void levelSelection() que asigna GameState.LevelSelection y llama a OnGameStateUpdated.
public void Idle() que asigna GameState.Idle y llama a OnGameStateUpdated.

Con esto el flujo queda completo: el botón Start lleva al menú de niveles, el botón Back devuelve al menú principal y cada botón de nivel arranca el juego. [05:10]

¿Qué hace OnGameStateUpdated? Es la función que notifica a las pantallas de UI que el estado del juego cambió, para que cada una decida si mostrarse u ocultarse según su VisibleState.

Cómo configurar el componente UI Screen para animar la pantalla

El componente UI Screen ya existe en el proyecto y se encarga de las transiciones de entrada y salida. En el GameObject UI Level Selection configúralo así:

Visible State: Level Selection.
Transition Time: 0.5 segundos.
Container Ref: el LevelList.
Container Canvas: un Canvas Group dentro del mismo UI Level Selection.
Background: el componente de imagen correspondiente.

En el inspector del UI Level Selection, asigna el Level Button Prefab (BTN Level Option), el Level List Container y un Level Amount inicial de 30. Desde la pantalla de inicio, cambia el evento del botón Start para que llame a levelSelection() en vez de StartGame().

Cómo controlar la opacidad del background con visibleAlpha

Al probar el flujo aparece un detalle visual: el background del Start Screen se vuelve totalmente opaco y tapa la animación al regresar. La causa está en el script UI Screen, que normaliza el alfa a uno en hideScreen y showScreen.

La solución es agregar una variable pública public float visibleAlpha = 1f y reemplazar el valor fijo en ambas funciones por esa variable. Así cada pantalla puede definir su propio nivel de opacidad sin afectar al resto.

Para el Start Screen, ajusta visibleAlpha a 0.8 para que el fondo permanezca semitransparente. Para el Level Selection, deja su Canvas Group en cero por defecto para que no se vea al iniciar el juego. [08:40]

Cómo probar el flujo completo de selección de niveles

Al darle play, el orden esperado es: pantalla de inicio visible, clic en Start, aparece la lista con 30 botones generados dinámicamente, scroll funcional y botón Back que regresa al menú principal.

Un detalle importante: el botón Back debe estar conectado en su onClick a UI Level Selection.backButtonPressed, no al script del Start Screen. Es un error fácil de pasar por alto y rompe el regreso al menú.

Todos los botones de nivel inician el mismo juego porque comparten la misma función StartGame. ¿Cómo modificarías la lógica para que cada botón cargue un nivel distinto? Cuéntame en los comentarios tu propuesta.

Resumen

Cómo organizar los prefabs de UI antes de generar la lista

Antes de tocar código, conviene ordenar los assets para que el flujo no se vuelva un caos cuando el proyecto crezca.

¿Qué es un prefab en Unity? Es una plantilla reutilizable de un GameObject que puedes instanciar muchas veces en runtime. Cualquier cambio en el prefab original se replica en todas sus instancias.

Cómo crear el script UI Level Selection para instanciar botones

El script UI Level Selection es el corazón de esta lógica: genera los botones, asigna sus textos y conecta el evento de clic.

Dentro del GameObject UI Level Selection, agrega un nuevo script con ese mismo nombre. En Visual Studio, declara tres propiedades públicas:

public GameObject levelButtonPrefab para el prefab del botón.
public GameObject levelListContainer para el contenedor donde se instancian los botones.
public int levelAmount para la cantidad de niveles a crear.

En la función Start, usa un for loop que recorra desde cero hasta levelAmount. En cada iteración instancia un nuevo objeto como hijo del contenedor:

Cómo conectar el evento onClick a una función personalizada

La función levelButtonClicked se ejecuta cuando el jugador toca un botón de nivel y le indica al GameManager que arranque la partida con GameManager.Instance.StartGame().

Cómo agregar el estado Level Selection al GameManager

Dentro del GameManager agrega:

public void levelSelection() que asigna GameState.LevelSelection y llama a OnGameStateUpdated.
public void Idle() que asigna GameState.Idle y llama a OnGameStateUpdated.

Con esto el flujo queda completo: el botón Start lleva al menú de niveles, el botón Back devuelve al menú principal y cada botón de nivel arranca el juego. [05:10]

¿Qué hace OnGameStateUpdated? Es la función que notifica a las pantallas de UI que el estado del juego cambió, para que cada una decida si mostrarse u ocultarse según su VisibleState.

Cómo configurar el componente UI Screen para animar la pantalla

El componente UI Screen ya existe en el proyecto y se encarga de las transiciones de entrada y salida. En el GameObject UI Level Selection configúralo así:

Visible State: Level Selection.
Transition Time: 0.5 segundos.
Container Ref: el LevelList.
Container Canvas: un Canvas Group dentro del mismo UI Level Selection.
Background: el componente de imagen correspondiente.

Cómo controlar la opacidad del background con visibleAlpha

Cómo probar el flujo completo de selección de niveles

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

Genera lista de niveles con prefabs en Unity

Progreso del curso

Introducción y configuración inicial

El sistema de UI de Unity

Haciendo interfaces para el juego

Recursos

Recursos