Contenido del curso
Empezando Nuestro Proyecto
Teoría de Gameplay
Mecánica Principal
- 8

Crea la cuadrícula del juego en Unity
07:59 min - 9

Cámara ortográfica automática en Unity
13:06 min - 10

Sistema de coordenadas para piezas en Unity
05:16 min - 11

Piezas aleatorias en la cuadrícula Unity
13:39 min - 12

Mover piezas en Unity con DOTween
07:52 min - 13

Intercambio de piezas con arrays 2D en Unity
14:45 min - 14

Permitiendo solo ciertos tipos de movimientos
05:38 min - 15

Lógica de Match 3 en cuatro direcciones
16:11 min - 16

Detectar Match 3 con corrutinas en Unity
10:21 min - 17

Evitar matches por defecto en Match 3
12:29 min - 18

Colapso de columnas en un Match 3
17:31 min - 19

Combos automáticos en Match 3 con corrutinas
07:46 min - 20

Corrutinas para animar piezas en Match 3
07:35 min - 21

Mejorando la animación de las piezas
07:37 min
Publicacion
Diseño del juego
- 24

Hablemos de diseño
01:34 min - 25

Agregando un sistema de puntos
16:45 min - 26

Sistema de tiempo
07:05 min - 27

Interfaz para el sistema de tiempo
09:26 min - 28

Creando sistema de UI
06:26 min - 29

Sistema de UI reactivo al estado del juego
Viendo ahora - 30

Agregando funcionalidad a la pantalla de game over
09:16 min - 31

Cómo reiniciar board y puntos en Unity
08:39 min - 32

Agregando audio
10:05 min - 33

Terminando el juego
07:38 min
Conclusiones
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 containerRectpara mover el contenedor.CanvasGroup containerCanvaspara controlar opacidad.Image backgroundpara el fondo, importandousing UnityEngine.UI.GameManager.GameState visibleStatepara definir cuándo se muestra.float transitionTimepara 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
backgroundarranca en alfa 0 y sube a 1 condoColordurante eltransitionTime. - El
containerCanvasarranca en alfa 0 y sube a 1 condoFade. - El
containerRectarranca 100 píxeles arriba (new Vector2(0, 100)) y baja aVector2.zerocondoAnchoredPos.
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:
containerRectycontainerCanvasapuntan al contenedor principal.backgroundapunta a la imagen de fondo del UI Container.visibleStatese configura en Game Over.transitionTimese 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?