El elemento Canvas en Unity es la base para construir cualquier interfaz gráfica dentro de un videojuego. Aquí vas a entender cómo configurarlo, qué hacen sus modos de renderizado y por qué el Canvas Scaler decide si tu UI se ve bien en un iPhone SE o en un iPad Pro.

Esta guía es para quienes están dando sus primeros pasos diseñando interfaces en Unity y quieren dominar la pieza fundamental sobre la que se montan botones, imágenes y paneles.

¿Qué es el Canvas en Unity y cómo se crea?

El Canvas es el contenedor principal donde viven todos los elementos de UI. Cuando lo creas desde clic derecho en la jerarquía y eliges UI > Canvas, Unity agrega automáticamente cuatro componentes en el inspector: Rect Transform, Canvas, Canvas Scaler y Graphics Raycaster [0:36].

Una buena práctica es renombrar ese game object como UI para identificarlo rápido. Dentro de él puedes anidar imágenes, textos y botones. Por ejemplo, al añadir un Image desde el submenú de UI, aparece un recuadro blanco que puedes redimensionar manteniendo presionado alt para escalar sin mover su posición [1:14].

¿Qué componentes trae un Canvas por defecto en Unity? Trae Rect Transform, Canvas, Canvas Scaler y Graphics Raycaster. Cada uno controla posición, renderizado, escalado y detección de clics respectivamente.

¿Cuáles son los modos de renderizado del Canvas?

El modo de renderizado define de dónde toma el Canvas la información para dibujar la interfaz. Unity ofrece tres opciones, y cada una sirve para escenarios distintos.

Cómo funciona Screen Space Overlay

Es el modo por defecto. La UI se dibuja encima de toda la escena y solo depende de la resolución de la pantalla [2:08]. Si cambias el game view de un iPhone 12 mini a un iPad Pro o a un iPhone SE, la misma imagen ocupa más o menos espacio según el tamaño físico del display.

Es ideal para HUDs planos, menús principales y cualquier interfaz que viva por encima del juego sin interactuar con cámaras.

Cuándo usar Screen Space Camera

Aquí necesitas asignar una referencia a la cámara desde el inspector, normalmente la Main Camera [3:23]. Al hacerlo, la UI pasa a formar parte de lo que esa cámara ve, y queda sujeta a sus configuraciones, como el size en modo ortográfico o la perspectiva.

Este modo te permite aplicar efectos de cámara sobre la interfaz, lo cual no es posible con Overlay.

Para qué sirve World Space

En World Space, la UI se comporta como un objeto más dentro del mundo 3D [4:13]. Si la cámara se aleja, la UI se ve más pequeña; si se acerca, se ve más grande. Es el modo perfecto para barras de vida sobre enemigos, indicadores de interacción sobre objetos o etiquetas de pickup en un entorno tridimensional.

En vista de perspectiva, el efecto es notorio: una imagen lejana se reduce, una cercana crece [5:09].

¿Cuándo conviene usar World Space en lugar de Screen Space? Cuando necesitas que la UI exista físicamente dentro del mundo de juego, como barras de vida flotando sobre enemigos o señales de interacción cerca de objetos.

¿Cómo se controla el orden de dibujado en el Canvas?

El orden visual de los elementos dentro del Canvas depende directamente del orden que tengan en la jerarquía. El elemento que está más abajo en la lista se dibuja por encima del resto [6:13].

Si duplicas una imagen blanca y creas dos copias más, una roja y otra amarilla, así se comporta el apilamiento:

• La amarilla, al estar última, queda arriba.
• La roja queda en medio.
• La blanca, primera en la jerarquía, queda al fondo.

Mover la blanca al final de la lista la trae al frente. Es una regla simple pero clave para componer menús con capas, fondos y popups.

¿Qué hace el Canvas Scaler y cómo lo configuro?

El Canvas Scaler ajusta el tamaño de la UI según la resolución de la pantalla [7:23]. Tiene dos modos principales que cambian todo el comportamiento de tu interfaz.

Diferencias entre Constant Pixel Size y Scale With Screen Size

El modo Constant Pixel Size mantiene el tamaño en píxeles fijo sin importar la pantalla. Eso significa que en un iPad Pro tu UI se ve cómoda, pero al cambiar a un iPhone SE, las imágenes se salen de la pantalla [7:55].

El modo Scale With Screen Size escala todo proporcionalmente. Necesita una resolución de referencia, que define el punto de partida del escalado. Si configuras 1920x1080 como referencia, la interfaz se mantiene legible tanto en un iPad como en un iPhone pequeño [8:33].

• Constant Pixel Size: tamaño fijo, útil cuando controlas la resolución exacta.
• Scale With Screen Size: tamaño proporcional, ideal para juegos responsive.
• Resolución de referencia recomendada: 1920x1080 para HD estándar.

¿Qué resolución de referencia debo usar en el Canvas Scaler? Una resolución como 1920x1080 funciona bien para la mayoría de juegos, ya que permite escalar tanto hacia pantallas más pequeñas como hacia displays más grandes sin perder proporción.

El Canvas Scaler se vuelve tu mejor aliado cuando construyes interfaces que tienen que verse bien en múltiples dispositivos. Entre los tres modos de renderizado, Screen Space Overlay, Screen Space Camera y World Space, ¿cuál usarías para tu próximo proyecto y por qué? Déjamelo en los comentarios.