Contenido del curso

Mecánica Principal

Sistema de UI reactivo al estado del juego

Resumen

Crear un sistema de UI en Unity que reaccione al estado del juego es la base para que pantallas como Game Over o inicio aparezcan con transiciones suaves y profesionales. Aquí aprenderás a conectar un UnityEvent con un script reutilizable que anima la entrada y salida de cualquier interfaz gráfica según el GameState activo.

¿Cómo conectar el GameManager con eventos de estado?

Todo arranca en el GameManager, que es el cerebro encargado de notificar cuándo cambia el estado del juego. La idea es que cualquier pantalla pueda suscribirse y reaccionar sin acoplarse directamente.

Dentro del script, debajo de OnPointsUpdated, declaras un nuevo evento con parámetro tipado:

csharp public UnityEvent<GameState> onGameStateUpdated;

El uso de <GameState> permite enviar el estado actual como argumento. Luego, en la función Update, justo donde el juego cambia a GameOver, invocas el evento:

csharp onGameStateUpdated?.Invoke(gameState);

El signo de pregunta evita errores si nadie está escuchando todavía. Con esto, cualquier objeto en escena puede suscribirse y responder cuando el estado cambie [02:15].

¿Qué es un UnityEvent en Unity? Es un tipo de evento que permite ejecutar funciones registradas cuando algo ocurre, sin que el emisor sepa quién lo escucha. Es la base del patrón observer dentro del motor.

¿Cómo estructurar el script UIScreen para animar pantallas?

El siguiente paso es crear el script base que cualquier pantalla heredará como comportamiento. En la carpeta de scripts, generas un nuevo C# llamado UIScreen y defines las propiedades que controlarán la animación [03:40].

Las variables públicas que necesitas son:

  • RectTransform containerRect para mover el contenedor.
  • CanvasGroup containerCanvas para controlar opacidad.
  • Image background para el fondo, importando using UnityEngine.UI.
  • GameManager.GameState visibleState para definir cuándo se muestra.
  • float transitionTime para la duración de la animación.

Cada propiedad cumple un rol específico. El CanvasGroup es clave porque permite animar la transparencia del grupo completo sin tocar cada hijo por separado.

¿Cómo definir el estado inicial de la pantalla?

En la función Start, lo primero es suscribirse al evento del GameManager:

csharp GameManager.Instance.onGameStateUpdated.AddListener(GameStateUpdated);

Luego comparas si el estado actual coincide con el visibleState configurado:

csharp bool initialState = GameManager.Instance.gameState == visibleState; background.enabled = initialState; containerRect.gameObject.SetActive(initialState);

Esto asegura que, al iniciar, la pantalla esté visible solo si su estado configurado coincide con el del juego, sin animación.

¿Cómo animar la entrada y salida con DOTween?

La magia visual viene de DOTween, la librería de animación que importas con using DG.Tweening. Con ella puedes interpolar colores, posiciones y opacidades en una sola línea.

¿Cómo funciona la función showScreen?

La entrada de la pantalla se divide en dos animaciones paralelas: el fondo y el contenedor. Primero activas los elementos para asegurarte de que estén disponibles:

csharp background.enabled = true; containerRect.gameObject.SetActive(true);

Después preparas los valores iniciales y disparas las animaciones [07:20]:

  • El background arranca en alfa 0 y sube a 1 con doColor durante el transitionTime.
  • El containerCanvas arranca en alfa 0 y sube a 1 con doFade.
  • El containerRect arranca 100 píxeles arriba (new Vector2(0, 100)) y baja a Vector2.zero con doAnchoredPos.

Esta combinación hace que la pantalla aparezca con un fade y un deslizamiento sutil hacia abajo.

¿Cómo funciona la función hideScreen?

La salida es la animación inversa, pero más rápida. Multiplicas el transitionTime por 0.5f para que desaparezca al doble de velocidad. Recuerda agregar la f al final del decimal para que C# lo reconozca como float.

El fondo pasa de alfa 1 a 0, el contenedor baja en opacidad y se mueve hacia abajo con new Vector2(0, -100). Lo más importante viene al final con el callback onComplete:

csharp .OnComplete(() => { background.enabled = false; containerRect.gameObject.SetActive(false); });

Este callback desactiva los elementos solo cuando la animación termina, evitando que queden consumiendo recursos en pantalla.

¿Qué hace OnComplete en DOTween? Ejecuta una función al finalizar la animación. Es ideal para limpiar estados, desactivar objetos o encadenar nuevas acciones.

¿Cómo conectar el UIScreen con la pantalla de Game Over?

De vuelta en Unity, seleccionas el objeto UI Game Over y le agregas el componente UIScreen. Luego asignas las referencias arrastrando desde la jerarquía:

  • containerRect y containerCanvas apuntan al contenedor principal.
  • background apunta a la imagen de fondo del UI Container.
  • visibleState se configura en Game Over.
  • transitionTime se ajusta a 1.2 segundos.

Al presionar play, la pantalla queda apagada por defecto. Cuando pasan los cinco segundos del temporizador y el estado cambia a Game Over, la pantalla aparece animada con su fade y deslizamiento [12:50].

Con esto tienes un sistema flexible donde cualquier pantalla futura, como la de inicio, solo necesita el componente UIScreen y un visibleState distinto para funcionar. ¿Qué pantalla agregarías primero a tu propio juego?