Unity tiene dos sistemas de UI#
Puede sorprender, pero Unity ofrece dos formas de hacer interfaz, y conviene saberlo para no perderte:
- uGUI (el Canvas de siempre): el que has usado en Canvas y anclas y botones. Basado en GameObjects y componentes.
- UI Toolkit: el sistema moderno, inspirado en la web (HTML/CSS), basado en archivos UXML (estructura) y USS (estilos).
No es que uno sustituya al otro de golpe: hoy conviven y cada uno tiene su terreno.
Cómo funciona UI Toolkit#
Si conoces algo de web, te sonará muchísimo:
- UXML: define la estructura de la interfaz (los elementos y su jerarquía), como el HTML.
- USS: define los estilos (colores, tamaños, márgenes, flexbox), como el CSS. Sí, usa un modelo de flexbox para el layout.
- VisualElement: el "nodo" base de todo (equivale al
div). - UI Builder: un editor visual para montar las UXML sin escribir a mano (
Window → UI Toolkit → UI Builder).
<!-- Ejemplo de UXML -->
<ui:UXML xmlns:ui="UnityEngine.UIElements">
<ui:VisualElement class="panel">
<ui:Label text="Puntuación" class="titulo" />
<ui:Button text="Jugar" name="boton-jugar" />
</ui:VisualElement>
</ui:UXML>/* USS: estilos, como CSS */
.panel { flex-direction: column; padding: 20px; background-color: #222; }
.titulo { font-size: 32px; color: white; }Y desde C# accedes a los elementos por nombre y les enganchas la lógica:
using UnityEngine;
using UnityEngine.UIElements;
public class MenuUI : MonoBehaviour
{
void OnEnable()
{
var root = GetComponent<UIDocument>().rootVisualElement;
var boton = root.Q<Button>("boton-jugar"); // Q = query, como querySelector
boton.clicked += () => Debug.Log("¡Jugar!");
}
}uGUI vs UI Toolkit: ¿cuál uso?#
| uGUI (Canvas) | UI Toolkit | |
|---|---|---|
| Base | GameObjects + componentes | UXML + USS (estilo web) |
| Layout | Anclas + Layout Groups | Flexbox |
| Integración con el mundo 3D | Fácil (world-space, billboards) | Limitada |
| Herramientas de editor | No | Sí (es su punto fuerte) |
| Reutilización de estilos | Manual | Excelente (USS compartido) |
| Madurez para runtime | Muy alta | Creciente |
- Herramientas de editor (ventanas custom, inspectores): UI Toolkit, es su terreno y el futuro claro ahí. Ver editor scripting.
- UI de juego que interactúa con el mundo 3D (barras de vida sobre enemigos, marcadores en el espacio): uGUI, sigue siendo más directo.
- UI de juego 2D "plana" (menús, HUD): cualquiera de los dos; uGUI tiene más recorrido y ejemplos, UI Toolkit gana en reutilización de estilos.
Por qué existe UI Toolkit#
Nació para el editor: las ventanas y herramientas custom de Unity necesitaban un sistema potente y reutilizable, y ahí UI Toolkit es claramente superior a lo anterior. Con el tiempo se extendió al runtime (la UI del propio juego), donde va madurando. Su modelo web hace que quien viene de front-end se sienta como en casa, y el USS compartido permite mantener un estilo coherente en toda la interfaz cambiando un solo archivo.
Errores frecuentes#
- Creer que UI Toolkit ya reemplaza a uGUI en todo (aún conviven; elige por caso).
- Intentar poner UI Toolkit "sobre" objetos 3D del mundo (uGUI world-space es más directo para eso).
- Ignorar el UI Builder y escribir todo el UXML a mano.
- No aprovechar el USS para centralizar estilos y acabar repitiéndolos.
Ponte a prueba#
Resumen#
Unity tiene dos sistemas de UI que conviven: uGUI (el Canvas de siempre, basado en GameObjects, mejor para UI ligada al mundo 3D) y UI Toolkit (moderno, UXML + USS con flexbox, estilo web, ideal para herramientas de editor y con reutilización de estilos excelente). Elige por caso: editor y UI plana → UI Toolkit gana terreno; UI en el espacio 3D → uGUI sigue siendo más directo. No hay que migrar todo: usa el que encaje.