El Canvas: donde vive toda la UI#
Todo elemento de interfaz (texto, botón, imagen) debe estar dentro de un Canvas. Cuando creas un elemento de UI (GameObject → UI → …), Unity crea el Canvas automáticamente si no existe. Los elementos de UI no usan Transform normal, sino RectTransform (con anchura, altura y anclas).
Modos de render del Canvas#
| Render Mode | Qué hace | Uso |
|---|---|---|
| Screen Space - Overlay | La UI se dibuja encima de todo, pegada a la pantalla | HUD, menús (lo más común) |
| Screen Space - Camera | Como Overlay pero a una distancia de la cámara (permite efectos, perspectiva) | UI con post-procesado |
| World Space | La UI es un objeto más del mundo 3D | Carteles, barras de vida sobre enemigos, VR |
El problema de las resoluciones#
Tu UI se ve bien en tu monitor, pero en un móvil o en 4K se descoloca. Dos herramientas lo resuelven: el Canvas Scaler y las anclas.
Canvas Scaler#
En el componente Canvas Scaler del Canvas, pon UI Scale Mode → Scale With Screen Size y define una resolución de referencia (p. ej. 1920×1080). Así la UI escala proporcionalmente en cualquier pantalla en vez de quedarse diminuta o gigante.
El deslizador Match decide si la UI escala según el ancho, el alto o una mezcla. Para juegos que giran entre orientaciones o pantallas muy distintas, ajústalo con cuidado; 0.5 suele ser un punto de partida razonable.
Anclas (anchors): la clave del responsive#
Las anclas definen a qué punto o borde del padre se "engancha" un elemento. Es lo que hace que un botón se quede pegado a una esquina aunque cambie la resolución.
- Ancla a una esquina (p. ej. arriba-derecha): el elemento mantiene su tamaño y su distancia a esa esquina. Ideal para un marcador o un botón de pausa.
- Ancla estirada (stretch): el elemento se estira con el padre. Ideal para una barra superior o un panel de fondo.
Si dejas todo anclado al centro, en una pantalla más ancha los elementos de las esquinas se juntan hacia el medio y se solapan. Ancla cada elemento a la zona a la que pertenece: el marcador arriba-izquierda, la vida arriba-derecha, los botones abajo. Es la diferencia entre una UI que aguanta cualquier pantalla y una que se rompe.
Texto: usa TextMeshPro#
Para texto usa siempre TextMeshPro (el componente TextMeshPro - Text (UI)), no el Text antiguo. Es más nítido, permite gradientes, contornos y mucho más control. La primera vez que lo uses, Unity te pedirá importar sus recursos (TMP Essentials): acéptalo.
using UnityEngine;
using TMPro;
public class Marcador : MonoBehaviour
{
[SerializeField] private TextMeshProUGUI texto;
private int puntos;
public void Sumar(int n)
{
puntos += n;
texto.text = $"Puntos: {puntos}";
}
}uGUI vs UI Toolkit#
Unity tiene dos sistemas de UI:
| uGUI (Canvas) | UI Toolkit | |
|---|---|---|
| Basado en | GameObjects y componentes | Estilos tipo web (UXML/USS) |
| Curva | Suave, muy documentado | Más abstracto |
| UI de mundo (World Space) | Sí | Limitado (a fecha de hoy) |
| Herramientas de editor | Bien | Excelente |
| Recomendado hoy para | UI de juego en general | Herramientas de editor y UI compleja |
Para empezar y para la mayoría de HUD/menús de juego, uGUI (Canvas) es la opción práctica.
Errores frecuentes#
- No usar Canvas Scaler y ver la UI diminuta/gigante en otras resoluciones.
- Anclar todo al centro y que se descoloque en pantallas anchas.
- Usar el
Textantiguo en vez de TextMeshPro. - Poner demasiados Canvas o cambiar la UI cada frame (cada cambio "ensucia" el Canvas y lo obliga a rehacer el batch: agrupa la UI dinámica en su propio Canvas).
Resumen#
Toda la UI vive en un Canvas con RectTransform. Configura Canvas Scaler → Scale With Screen Size y ancla cada elemento a su zona para que la interfaz aguante cualquier resolución. Usa TextMeshPro para el texto y uGUI como opción práctica para el HUD. Siguientes pasos: barra de vida y botones y eventos.