UI en Unity: Canvas, Event System y texto dinámico

Construye interfaces funcionales con Canvas, botones y texto dinámico para comunicar estado, progreso y acciones del jugador.

La UI de Unity se construye sobre un Canvas, que actúa como contenedor de botones, textos, barras y paneles.

El Event System procesa interacciones (clic, teclado, gamepad) para que botones y controles respondan correctamente.

Actualizar texto por código es clave para feedback inmediato: puntuación, vida, tiempo, objetivos o estado del nivel.

TextMesh Pro mejora nitidez y control tipográfico frente a texto legacy, especialmente en resoluciones variadas.

  • Sin estructura de UI, la experiencia se vuelve confusa aunque la jugabilidad sea buena.
  • El Canvas define el espacio de render de la interfaz y puede operar en Screen Space u otros modos según necesidad.
  • Organiza paneles por responsabilidad (`HUD`, `MenuPausa`, `GameOver`) para evitar prefabs de UI monolíticos.
  • Mantener nombres claros y anclajes correctos facilita adaptar diseño a diferentes resoluciones.
  • Canvas = raíz del sistema UI.

Canvas y jerarquía de interfaz

Sin estructura de UI, la experiencia se vuelve confusa aunque la jugabilidad sea buena.

El Canvas define el espacio de render de la interfaz y puede operar en Screen Space u otros modos según necesidad.

Organiza paneles por responsabilidad (`HUD`, `MenuPausa`, `GameOver`) para evitar prefabs de UI monolíticos.

Mantener nombres claros y anclajes correctos facilita adaptar diseño a diferentes resoluciones.

  • Canvas = raíz del sistema UI.
  • Paneles por función para mantener orden.
  • Anclajes y escalado revisados desde inicio.

Event System y botones interactivos

Una UI útil responde de forma predecible y comunica claramente cada acción.

El Event System enruta entrada del usuario a controles UI activos en pantalla.

En botones puedes enlazar acciones desde Inspector o por script con `onClick.AddListener`.

Evita lógica pesada dentro de callbacks de UI; delega a clases de flujo para mantener limpieza arquitectónica.

Feedback visual y claridad para el jugador

La UI debe confirmar decisiones y estado sin saturar pantalla.

Prioriza información crítica en HUD: vida, recursos y objetivos inmediatos.

Usa cambios de color, tamaño o texto para remarcar eventos importantes (daño, objetivo cumplido, alerta).

Testea UI durante gameplay real, no solo en editor detenido: la carga cognitiva cambia en acción.

Unity
14

UI en Unity: Canvas, Event System y texto dinámico

Construye interfaces funcionales con Canvas, botones y texto dinámico para comunicar estado, progreso y acciones del jugador.

Código del tema: Canvas + EventSystem para UI interactiva

📘 Teoría

Canvas y jerarquía de interfaz

Sin estructura de UI, la experiencia se vuelve confusa aunque la jugabilidad sea buena.

El Canvas define el espacio de render de la interfaz y puede operar en Screen Space u otros modos según necesidad.

Organiza paneles por responsabilidad (`HUD`, `MenuPausa`, `GameOver`) para evitar prefabs de UI monolíticos.

Mantener nombres claros y anclajes correctos facilita adaptar diseño a diferentes resoluciones.

  • Canvas = raíz del sistema UI.
  • Paneles por función para mantener orden.
  • Anclajes y escalado revisados desde inicio.

Event System y botones interactivos

Una UI útil responde de forma predecible y comunica claramente cada acción.

1

El Event System enruta entrada del usuario a controles UI activos en pantalla.

2

En botones puedes enlazar acciones desde Inspector o por script con `onClick.AddListener`.

3

Evita lógica pesada dentro de callbacks de UI; delega a clases de flujo para mantener limpieza arquitectónica.

Feedback visual y claridad para el jugador

La UI debe confirmar decisiones y estado sin saturar pantalla.

1

Prioriza información crítica en HUD: vida, recursos y objetivos inmediatos.

2

Usa cambios de color, tamaño o texto para remarcar eventos importantes (daño, objetivo cumplido, alerta).

3

Testea UI durante gameplay real, no solo en editor detenido: la carga cognitiva cambia en acción.

🧪 Aprende probando

Ejemplo Ejemplo guiado Muestra puntos en pantalla y actualiza el texto cuando el jugador recoge una moneda.

🏁 Retos

Reto Reto práctico Implementa un botón que dispare una acción y actualice una etiqueta de estado en pantalla.

¿Qué es esto?

Soy Cristian Eslava y a veces hago webs para procrastinar yo y vosotros. culTest

La hice en febrero de 2026 para facilitar el aprendizaje de mis alumnos. La idea es aprender desarrollo web practicando y que el proyecto siga creciendo con nuevos temas, tests y retos.

Está inspirada en MDN, W3Schools, CodePen, Manz y muchos otros sitios de documentación sobre desarrollo web. Quería combinar teoría útil, ejemplos ejecutables, retos y el sistema de tests que ya tenía en culTest. culTest

Si te gustó, si no te gustó o si quieres escribirme, puedes hacerlo en cristianeslava@gmail.com