Canvas y sus modos de renderizado en Unity

Curso de Creación de Interfaces de Usuario con Unity

Contenido del curso

Introducción y configuración inicial

El sistema de UI de Unity

Haciendo interfaces para el juego

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:008:48

Canvas y sus modos de renderizado en Unity

Curso de Creación de Interfaces de Usuario con Unity

Clase 4 de 29

Clase 4 / 29

Recursos

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.

Resumen

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?

¿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 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

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 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

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.

Introducción y configuración inicial

Transforma la UI de tu juego Match 3 en Unity

Cargando el proyecto

Unity UI vs UI Toolkit: cuál usar en 2022

El sistema de UI de Unity

Canvas y sus modos de renderizado en Unity

El Rect Transform

Componente de imagen

Máscaras y efectos

Texto en Unity con Text Mesh Pro

Creando botones en nuestra interfaz

Otros elementos de UI

Auto layout

Scroll views

Controla grupos de UI con Canvas Group

Haciendo interfaces para el juego

Pantallas de UI para Safari Match en Unity

Importar y configurar sprites UI en Unity

Construye la Start Screen en Unity

Animando el fondo con shader graph

Agregando lógica a la pantalla de título

Scroll view de selección de niveles en Unity

Genera lista de niveles con prefabs en Unity

Corrige bugs de UI antes de añadir más features

Contador de puntos y pausa en Unity HUD

Anima iconos con DOTween en Unity

Pantalla de pausa en Unity con Layout Group

Pantalla de pausa con reseteo de escena en Unity

Rediseño visual de la pantalla Game Over en Unity

Pantalla de opciones con layouts en Unity

Implementación de la pantalla de configuración

Interfaces de Unity que parecen juegos profesionales

Canvas y sus modos de renderizado en Unity

Progreso del curso

Introducción y configuración inicial

El sistema de UI de Unity

Haciendo interfaces para el juego

Recursos

Recursos