OVERVIEW GAMEOBJECTS (INTERFAZ DE USUARIO) EN UNITY

Objetivos

User Interface (UI)

¿Qué es la User Interface?

Es un sistema que permite a usted crear interfaces de usuario rápidas e intuitivas.

¿Qué es el Canvas?

Es el GameObject contenedor de todos los elementos de la Interfaz de Usuario (UI). Siempre para poder
visualizar cualquier elemento de la UI se necesitará tener un Canvas en jerarquía.

¿Qué GameObject contiene el Canvas?

 Canvas (EventSystem lo genera adicional al crear el Canvas, pero no es parte del Canvas)

¿Cuáles son los componentes (component) del Canvas y sus funcionalidades?

Rect Transform, Canvas, Canvas Scaler (script component), Graphic Raycaster (script component), las
propiedades de estos elementos setean todos los elementos de UI.

Componente Canvas

¿Qué es el Render Mode?

Son los tipos de representación del Canvas en la escena, es decir la

manera en que será dibujado el Canvas sobre la pantalla.

¿Cuáles son los diferentes tipos de Render Mode?

¿Cuáles son las diferencias de entre los diferentes Render Mode?

Estos modos de renderizados afectaran los los elementos de UI que

estén contenido dentro del Canvas.

1
 OVERVIEW GAMEOBJECTS (INTERFAZ DE USUARIO) EN UNITY

Screen Space – Overlay (mayormente usado)

Dibuja por encima de toda la escena cubriendo la pantalla, no está sobre ninguna cámara ni
ubicado en World Space, no le afecta la visualización de la UI ninguna posición de GameObject en
el espacio, ya la UI se renderizara por encima de la pantalla del juego y no depende de la cámara.

 Pixel Perfect
o Renderiza el pixel tal cual existe para todos los elementos de UI (no aplica antialiasing,
es decir suavizado de dientes eb borde del dibujo).
 Sort Order
o Ordena el orden de renderizado (visibilidad) de los diferentes Canvas para el caso de
que existan varios Canvas a la vez.
 Target Display
o Selecciona una pantalla donde se rendirizará el Canvas para el caso de estar trabajando
con varias pantallas a la vez (se puede tener 8 cámara a la vez y sacar un Canvas para
cada pantalla).

2
 OVERVIEW GAMEOBJECTS (INTERFAZ DE USUARIO) EN UNITY

Ejemplo:

Screen Space – Camera

El Canvas se dibuja sobre la cámara principal del juego, es decir se dibuja dentro del rango de esa
camara y siempre considerando el orden del layer (Order in Layer), se le debe especificar la cámara
sobre la cual se quiere renderizar el Canvas y dicho Canvas se ajustará a la proyección del tamaño
de la camara ya que este modo si depende de la cámara a diferencia del anterior modo.

3
 OVERVIEW GAMEOBJECTS (INTERFAZ DE USUARIO) EN UNITY

o Pixel Perfect
 Renderiza el pixel tal cual existe para todos los elementos de UI (no aplica
antialiasing, es decir suavizado de dientes eb borde del dibujo).
o Render Camera
 Es la cámara sobre la cual se renderizara el Canvas.
o Plane Distance
 Es la distancia proyectada entre la ubicación de cámara y la ubicación del
Canvas, si existe algún objeto en “Near Clipping Plane”, este se visualizará por
delante de la UI y todos sus elementos.

o Sorting Layer:
 Debido a los elementos UI son Sprite y trabajan en un entorno de 2D y dos
dimensiones no se tiene profundidad, esa profundida se trabaja según los
Layers, por ello se requiere Sorting layer, lo cual permite establecer el orden de
renderizado de multiples Sprite en la camara. Siempre hay un SortingLayer por
defecto llamado "Default" a la que se agregan inicialmente todos los sprites.

 Sort Order
o Ordena el orden de renderizado (visibilidad) de los diferentes Canvas para el caso de
que existan varios Canvas a la vez.

World Space

Convierte el Canvas a un comportamiento similar al GameObject (habiñita todas las propiedades del Rect
Transform como si convirtiera el componente Rect Transform a Transform) en el World Space (espacio 3D
del juego) y al cual se le puede aplicar transformaciones de Posición, Rotacion y Escala.

4
 OVERVIEW GAMEOBJECTS (INTERFAZ DE USUARIO) EN UNITY

Por tanto, para los modos Screen Space – Overlay así como para Screen Space – Camera todas las
propiedades del componente Rect transform estarán deshabilitadas como sigue:

Pero para el modo World Space, se habilitarán todas las propiedades del componente Rect Transform y
podrá aplicársele transformaciones, esto se utiliza mayormente para realizar virtual o si queremos hacer
menues en el espacio.

o Event Camera
 Es la cámara principal sobre la el Canvas generara lso eventos, es decir poner
interactiva la cámara para comunicarla con la UI.

o Sorting Layer:
 Debido a los elementos UI son Sprite y trabajan en un entorno de 2D y dos
dimensiones no se tiene profundidad, esa profundida se trabaja según los
Layers, por ello se requiere Sorting layer, lo cual permite establecer el orden de
renderizado de multiples Sprite en la camara. Siempre hay un SortingLayer por
defecto llamado "Default" a la que se agregan inicialmente todos los sprites.
o Sort Order
 Ordena el orden de renderizado (visibilidad) de los diferentes Canvas para el
caso de que existan varios Canvas a la vez.

5
 OVERVIEW GAMEOBJECTS (INTERFAZ DE USUARIO) EN UNITY

Componente Canvas Scaler (script)

Se encargará de representarlos pixeles (como queremos que se dibujen y vean esos pixeles, es decir que
se vean a tamaño normal o que se ajusten al tamaño de la pantalla) de todos los elementos de la UI que
existen dentro del canvas. Este depende del tipo de renderizado de la pantalla.

 UI Scale Mode (activo en el modo Screen Space – Overlay y Screen Space - Camera): Representa
el tipo de escala que se quiere para todos los elementos de la UI.

o Contant Pixel Size: Que mantengan su tamaño.

 Scale factor: Relacion de la escala, si es igual a 1 significa que la escala x=y=z=1.

 Reference Pixel Per Unit: Referenica de Pixeles por Unidad. Si es igual a 100
significa que tendrán la misma medida que los Sprite (original).

o Scale With Screen Size (es la mayor mente usado en videojuegos para que sean multi
dispositivos o diferentes tamaños de pantallas): Que se escale con el tamaño de la
pantalla según se encuentre con diferentes tamaños la UI se valla ajustando.

 Reference Resolution: Es la referencia significa que si hemos hecha la UI o

Laout a 800 x 600 lograremos que se vea del tamaño que la hicimos la UI y a
partir de este tamaño de resolución es que se empezara a escalar según el
tamaño de la Pantalla.

 Screen match Mode:

 Match Width Or Height: Como queremos que se ajuste (referente a la

altura o al ancho de la pantalla).
 Expand: Intentara mantener la Proporcion del Canvas, no poder se
cortara.
 Shrink: Ajustara la proporción del Canvas al tamaño de la pantalla.

o Constant Physical Size: Que se escale con el tamaño de la pantalla según se encuentre
con diferentes tamaños la UI se valla ajustando.

6
 OVERVIEW GAMEOBJECTS (INTERFAZ DE USUARIO) EN UNITY

Cambiar la medida de física del Sprite para

que todos los elementos de la UI se vean
correctamente

Si encontramos una
pantalla con DPI diferente

Componente Canvas Scaler (script)

Es el encargado de detectar los eventos y comunicárselo al EventSystem.

Que ignore la interacción con

los GameObjects de atrás para
el caso de trabajar en World
Space

Para bloquear Sistemas de

Capas Bloquear objetos en 2D, 3D o
Todos, si hay alguna
interactividad por delante o
¿Qué GameObject adicional crea el Canvas? por detrás de la UI

 EventSystem (obligatorio)
o Transform (Component)
o EventSystem (Script Component): Sistema para detectar eventos
o StandAlone Input Module (Script Component): Para detector input para la plataforma.

¿Cómo funcionan los eventos del Canvas?

Los eventos de entrada se propagan directamente a los objetos de VisualElement . La lógica varía
ligeramente según el tipo de evento y otros factores:

 Los eventos del mouse se propagan al elemento debajo del mouse.

 Los eventos del teclado se propagan al elemento enfocado.
 Un control puede tomar la "captura" y recibir todos los eventos directamente (por ejemplo, un
botón toma la captura con el mouse hacia abajo y la suelta con el mouse hacia arriba)

Se dice que los eventos se propagan porque cada padre del objeto objetivo puede interceptar un evento
antes de sus descendientes (fase de captura) o después de sus descendientes si no se detiene (fase
BubbleUp).

7
 OVERVIEW GAMEOBJECTS (INTERFAZ DE USUARIO) EN UNITY

¿Cuáles elementos componen el sistema de la UI?

¿Qué Componente es común en todos los elementos de UI?

Todos los elementos de UI poseen un componente Rect Transform, al igual que todos los restantes
GameObject posee un Transform. Ambos tiene funcionalidades semejantes, por tanto en un GameObject
normal, el camponente de la transformación es el Transform, mienstra que en la UI es Rect Transform.

Parentesco

Cada vez que se crea algún elemento de la UI, si no existe un GameObject Canvas en la jerarquía este lo
crea dicho Canvas automáticamente (y queda como hijo del Canvas creado) y un EventSystem. Si ya existe
el Canvas al momento de crear un elemento UI, este elemento se agrega como hijo automáticamente de
dicho Canvas.

¿Qué es el Rect Tool?

Es la herramienta que nos permitirá modificar la posición, escala y rotación de todos los elementos de UI.

¿Cómo agregar UI?

Se agrega semejante a todos los procedimientos de agregar GameObjects y Componentes anteriores