4. UI y GameManager

Introducción a la Interfaz de Usuario (UI) en Unity

Para que un videojuego se sienta como tal, necesita comunicarse con el jugador. Esto se logra a través del HUD (Heads-Up Display) o Interfaz de Usuario en pantalla.

En Unity, toda interfaz visual requiere un objeto contenedor especial llamado Canvas (Lienzo).

Haz clic derecho en la ventana Hierarchy y selecciona UI -> Canvas.
Verás que se crea automáticamente el Canvas junto con un objeto llamado EventSystem (necesario para detectar clicks en botones).
Haz clic derecho sobre el Canvas y crea tres textos seleccionando UI -> Text - TextMeshPro:
- Nombra al primero como ScoreText (ubicado arriba a la izquierda).
- Nombra al segundo como TimerText (ubicado arriba a la derecha).
- Nombra al tercero como WinLoseText (ubicado al centro de la pantalla, con tamaño de fuente grande).

Importante: Si es la primera vez que usas TextMeshPro, aparecerá una ventana emergente pidiéndote importar los assets básicos. Haz clic en el botón "Import TMP Essentials" para que los textos puedan renderizarse correctamente.

El Controlador Global: GameManager

El GameManager es un script centralizado encargado de controlar las reglas del juego: contar los puntos, llevar el reloj de tiempo y determinar si el jugador gana o pierde.

Para que cualquier script pueda acceder al GameManager de forma directa y limpia, utilizaremos el Patrón de Diseño Singleton.

Crea un script llamado GameManager y ábrelo en tu editor de código.
Reemplaza su contenido con el siguiente código:

GameManager.cs

CSHARP

  using UnityEngine; 
  using TMPro; // Libreria necesaria para manejar TextMeshPro 
    
  public class GameManager : MonoBehaviour 
  { 
      // Instancia unica (Singleton) accesible por cualquier script 
      public static GameManager Instance { get; private set; } 
    
      [Header("UI References")] 
      [SerializeField] private TextMeshProUGUI scoreText; 
      [SerializeField] private TextMeshProUGUI timerText; 
      [SerializeField] private TextMeshProUGUI winLoseText; 
    
      [Header("Game Settings")] 
      [SerializeField] private int totalCoinsToWin = 5; 
      [SerializeField] private float timeLimit = 30f; 
    
      private int score = 0; 
      private float timeRemaining; 
      private bool isGameOver = false; 
    
      void Awake() 
      { 
          // Configuracion del patron Singleton 
          if (Instance == null) { Instance = this; } 
          else { Destroy(gameObject); } 
      } 
    
      void Start() 
      { 
          timeRemaining = timeLimit; 
          UpdateUI(); 
          winLoseText.text = ""; // Limpiamos el texto al iniciar 
      } 
    
      void Update() 
      { 
          if (isGameOver) return; 
    
          // Cuenta regresiva del tiempo 
          if (timeRemaining > 0) 
          { 
              timeRemaining -= Time.deltaTime; 
              UpdateUI(); 
          } 
          else 
          { 
              GameOver(false); // Perder por tiempo 
          } 
      } 
    
      public void CollectCoin() 
      { 
          if (isGameOver) return; 
    
          score++; 
          UpdateUI(); 
    
          if (score >= totalCoinsToWin) 
          { 
              GameOver(true); // Ganar el juego 
          } 
      } 
    
      public void HitObstacle() 
      { 
          if (isGameOver) return; 
           
          GameOver(false); // Perder por chocar contra un peligro 
      } 
    
      private void UpdateUI() 
      { 
          scoreText.text = "Monedas: " + score + " / " + totalCoinsToWin; 
          timerText.text = "Tiempo: " + Mathf.Max(0, Mathf.CeilToInt(timeRemaining)) + "s"; 
      } 
    
      private void GameOver(bool won) 
      { 
          isGameOver = true; 
          if (won) 
          { 
              winLoseText.text = "¡VICTORIA! 🎉"; 
              winLoseText.color = Color.green; 
          } 
          else 
          { 
              winLoseText.text = "GAME OVER 💀"; 
              winLoseText.color = Color.red; 
          } 
      } 
  } 

Conectando los Componentes en el Editor

Para que el GameManager pueda actualizar los textos de la interfaz, debemos enlazar los objetos en el Inspector:

Crea un GameObject vacío en tu jerarquía (clic derecho -> Create Empty) y llámalo _GameManager.
Arrástrale el script GameManager.cs que acabas de programar.
Selecciona _GameManager. Verás en el Inspector los campos vacíos de UI: Score Text, Timer Text y Win Lose Text.
Arrastra tus objetos correspondientes de la jerarquía (ScoreText, TimerText, etc.) a cada uno de estos campos.

Enlazando el Jugador con el GameManager

Ahora debemos actualizar las funciones de interacción en el script PlayerController.cs para que le reporten los eventos a la instancia Singleton del GameManager:

PlayerController.cs (Actualizado)

CSHARP

  // Modificacion dentro de PlayerController.cs al interactuar con objetos 
    
  private void OnTriggerEnter(Collider other) 
  { 
      if (other.CompareTag("Coin")) 
      { 
          other.gameObject.SetActive(false); 
           
          // Reportamos al GameManager la recoleccion usando la instancia Singleton 
          GameManager.Instance.CollectCoin(); 
      } 
  } 
    
  private void OnCollisionEnter(Collision collision) 
  { 
      if (collision.gameObject.CompareTag("Obstacle")) 
      { 
          // Reportamos al GameManager que chocamos contra un peligro 
          GameManager.Instance.HitObstacle(); 
      } 
  } 

Al hacer GameManager.Instance.CollectCoin(), estamos llamando directamente al método de la única copia del GameManager que existe en memoria, sumando un punto de forma inmediata y actualizando el texto en pantalla.

Ponte a prueba

Comprueba si has asimilado la lógica del flujo de datos entre el jugador, el GameManager y el Canvas de la interfaz gráfica.

Contenido

📚 Elige un curso

4. UI y GameManager: El Estado Global del Juego 📊🖥️

Introducción a la Interfaz de Usuario (UI) en Unity

El Controlador Global: GameManager

Conectando los Componentes en el Editor

Enlazando el Jugador con el GameManager

Ponte a prueba

¡Hecho con mucho cariño! ☕