La interfaz de usuario (UI) es todo lo que el jugador ve en pantalla: el puntaje, los menús y los mensajes como "Game Over".
¿Alguna vez descargaste un juego y lo cerraste en los primeros 30 segundos? Casi siempre es culpa de una mala UI. Una interfaz clara y atractiva puede ser la diferencia entre un juego que la gente disfruta y uno que borra al instante. Hoy vas a aprender a construir la tuya en Unity.
El sistema UI de Unity: Canvas y sus componentes
Unity usa un objeto especial llamado Canvas para mostrar toda la interfaz. Piénsalo como un lienzo invisible que flota frente a la cámara. Todo botón, texto o imagen de tu UI vive dentro del Canvas.
Cuando creas cualquier elemento de UI, Unity genera el Canvas automáticamente. Solo necesitas ir al menú GameObject → UI y elegir lo que quieres: Text, Button, Image, etc.
Existen tres componentes básicos que vas a usar en esta lección:
- Text (TextMeshPro): muestra texto en pantalla, como el puntaje.
- Button: un botón que el jugador puede presionar.
- Panel: un rectángulo de fondo, ideal para pantallas de inicio o de game over.
Cómo Andrés construyó su pantalla de inicio
Andrés tiene 19 años y vive en Monterrey. Lleva tres semanas aprendiendo Unity y quiere terminar un juego sencillo de naves espaciales.
Su primer problema: el juego empezaba directo al nivel, sin ningún menú. Los amigos que lo probaron no sabían ni qué hacer.
Andrés siguió estos pasos para crear una pantalla de inicio:
Paso 1 — Crear el Panel de inicio:
En Unity, hizo clic en GameObject → UI → Panel. Esto creó un rectángulo que cubre toda la pantalla. Le cambió el color a azul oscuro desde el componente Image en el Inspector.
Paso 2 — Agregar el título del juego:
Dentro del Panel, agregó un GameObject → UI → Text - TextMeshPro. Escribió "Invasión Galáctica" en el campo de texto. Aumentó el tamaño de fuente a 60 y centró el texto.
Paso 3 — Agregar el botón de inicio:
Agregó un GameObject → UI → Button - TextMeshPro. Cambió el texto del botón a "Jugar". Luego, en el componente Button, buscó la sección On Click() y asignó la función que carga la escena del juego.
Ese botón usa una línea de código muy simple:
using UnityEngine.SceneManagement;
public class MenuPrincipal : MonoBehaviour
{
public void IniciarJuego()
{
SceneManager.LoadScene("NivelUno");
}
}
Andrés adjuntó este script a un GameObject vacío en la escena del menú. Luego arrastró ese objeto al campo On Click() del botón y seleccionó la función IniciarJuego. Al presionar el botón, el juego carga la escena "NivelUno" al instante.
Resultado: sus amigos ahora saben exactamente cómo empezar a jugar.
Cómo Valeria agregó un contador de puntos
Valeria estudia en la Ciudad de México y trabaja medio tiempo en una tienda de conveniencia. Desarrolla juegos como pasatiempo y quiere que su juego de colección de monedas muestre el puntaje en tiempo real.
Ella creó un contador de puntos en tres pasos:
Paso 1 — Crear el texto del puntaje:
Agregó un Text - TextMeshPro en la esquina superior derecha del Canvas. Lo llamó "TextoPuntaje". El texto inicial decía "Puntaje: 0".
Paso 2 — Crear el script de puntaje:
using TMPro;
using UnityEngine;
public class ControladorPuntaje : MonoBehaviour
{
public TextMeshProUGUI textoPuntaje;
private int puntaje = 0;
public void AgregarPuntos(int cantidad)
{
puntaje += cantidad;
textoPuntaje.text = "Puntaje: " + puntaje;
}
}
Paso 3 — Conectar el texto al script:
Valeria adjuntó ControladorPuntaje a un GameObject vacío llamado "GestorJuego". Luego arrastró el objeto "TextoPuntaje" al campo textoPuntaje en el Inspector.
Cada vez que el personaje recoge una moneda, otro script llama a AgregarPuntos(10). El número en pantalla sube de inmediato.
Valeria también quiso mostrar un mensaje motivador cada 50 puntos. Agregó esta lógica dentro de AgregarPuntos:
if (puntaje % 50 == 0 && puntaje > 0)
{
Debug.Log("¡Vas muy bien! Llevas " + puntaje + " puntos.");
}
Más adelante puede reemplazar el Debug.Log con un texto en pantalla. Por ahora, le sirve para verificar que la lógica funciona.
Cómo Rodrigo creó la pantalla de "Game Over"
Rodrigo vive en Guadalajara y está terminando su primer juego completo. Le faltaba la pantalla de game over: ese momento en que el jugador pierde y puede reintentar.
Él decidió que la pantalla de game over fuera un Panel oscuro semitransparente que aparece encima del juego. Así el jugador puede ver el nivel detrás, pero sabe que perdió.
Paso 1 — Crear el Panel de Game Over: Agregó un Panel al Canvas. Lo llamó "PanelGameOver". Le puso color negro con 80% de opacidad. Dentro del panel puso un texto que decía "¡Perdiste!" y dos botones: "Reintentar" y "Menú Principal".
Paso 2 — Ocultarlo al inicio: En el Inspector, desactivó el Panel desde el inicio (desmarcó la casilla junto al nombre del objeto). El panel existe, pero no se ve.
Paso 3 — Mostrarlo cuando el jugador pierde:
using UnityEngine;
using UnityEngine.SceneManagement;
public class GestorJuego : MonoBehaviour
{
public GameObject panelGameOver;
public void MostrarGameOver()
{
panelGameOver.SetActive(true);
Time.timeScale = 0f;
}
public void Reintentar()
{
Time.timeScale = 1f;
SceneManager.LoadScene(SceneManager.GetActiveScene().name);
}
public void IrAlMenu()
{
Time.timeScale = 1f;
SceneManager.LoadScene("MenuPrincipal");
}
}
Time.timeScale = 0f pausa el juego completamente. Todo se detiene, pero la UI sigue funcionando porque los botones no dependen del tiempo del juego.
Cuando el jugador hace clic en "Reintentar", la escena se recarga desde cero. Si elige "Menú Principal", regresa al menú de inicio.
Rodrigo conectó los botones igual que Andrés: arrastró el objeto "GestorJuego" al campo On Click() de cada botón y seleccionó la función correspondiente.
Errores comunes al crear la UI
Muchos principiantes cometen los mismos errores. Aquí van los más frecuentes:
Error 1 — No usar TextMeshPro:
Unity tiene dos sistemas de texto: el antiguo (Text) y TextMeshPro (TMP_Text). Usa siempre TextMeshPro. Es más nítido y flexible.
Error 2 — Olvidar agregar la escena al Build Settings:
Si llamas a SceneManager.LoadScene("NivelUno") pero esa escena no está en File → Build Settings → Scenes In Build, Unity lanza un error en tiempo de ejecución. Agrega todas tus escenas ahí antes de probar.
Error 3 — El texto no cambia en el juego: Casi siempre es porque el campo público en el Inspector quedó vacío. Revisa que hayas arrastrado el objeto de texto al script desde el Inspector.
Error 4 — El juego no se puede pausar ni reanudar correctamente:
Si usas Time.timeScale = 0f para pausar, recuerda restablecerlo a 1f antes de cargar cualquier escena. Si no lo haces, el juego nuevo empieza pausado y parece que no funciona.
Error 5 — La UI se sale de la pantalla en otros dispositivos:
Usa el modo Anchor en el componente Rect Transform para fijar cada elemento a una esquina o al centro. Así la UI se adapta a diferentes tamaños de pantalla.
Tu juego ya tiene cara
Crear una UI no es solo estética. Es comunicación. Le dice al jugador dónde está, cuántos puntos tiene y qué pasó cuando perdió.
Un juego sin UI es como una tienda Liverpool sin letreros: quizás tiene buenos productos, pero nadie sabe por dónde entrar ni qué comprar.
Tú ya sabes construir las tres pantallas más importantes: inicio, juego activo y game over. Eso es suficiente para que cualquier persona pueda jugar tu proyecto de principio a fin.
¿Listo para el siguiente paso? En la próxima lección vas a aprender a guardar el progreso del jugador para que su puntaje no desaparezca al cerrar el juego.