Unity

Unity UI
Unity UI (User Interface)

Fuentes: https://www.studytonight.com/, https://learn.unity.com,

https://docs.unity3d.com
 Unity 3D La interfaz de usuario (UI) es el punto de
interacción y comunicación humano-

Canvas y computadora en cualquier aplicación.

Estos son botones, barras de desplazamiento,

UI Elements
elementos de menú y casillas de verificación,
entre otros.

En los juegos, los UI Elements conforman los

menús de pausa, los menús principales, los HUDs
o Heads-Up Displays, los contadores de
puntuación, etc.
Unity 3D Canvas y UI Elements
En Unity, el Canvas es también un GameObject con un componente de Canvas unido a él. Este
componente Canvas actúa como el elemento base de todos los UI elements en la pantalla. Es por eso que
todos los UI elements deben ser GameObjects hijos del GameObject Canvas.
 Canvas - Canvas

Components -

-
Canvas Scales

Canvas Group
Properties - Canvas Renderer

Presiona sobre cada Título para ir a

la sección respectiva
Canvas
El primer componente del Canvas es el propio
Canvas. Tiene propiedades que cambian dónde y
cómo el Canvas se renderiza en la pantalla.

El componente Canvas representa un espacio

abstracto en el cual el UI es puesto y renderizado.
Todos los elementos UI deben ser hijos de un
GameObject que tiene un componente Canvas
adjunto. Cuando se crea un objeto elemento UI del
menú (GameObject > Create UI), un objeto Canvas
se crea automáticamente si ya no hay uno en la
escena.
Nota: Colapsamos el componente Graphic
Raycaster porque no es tan importante
para nosotros como los otros dos por
ahora.
Canvas Scaler
El componente Canvas Scaler es utilizado para El Canvas Scaler tiene tres diferentes opciones:
controlar la escala en general y densidad de pixeles
● Constant Pixel Size: Hace que los elementos de la
de los elementos UI en el Canvas.
UI mantengan el mismo tamaño en píxeles,
independientemente del tamaño de la pantalla.
Esta escala afecta todo debajo del Canvas, Este es el valor por defecto aplicado al Canvas.
incluyendo los tamaños de fuentes y bordes de
imágenes. ● Scale With Screen Size: Dimensiona y posiciona
los elementos de la UI de acuerdo a una resolución
de referencia. Si la resolución actual es mayor que
la resolución de referencia, el Canvas la
mantendrá, mientras que escalará los elementos
para que coincidan con la resolución de destino.

● Constant Physical Size: Las posiciones de los

elementos de la interfaz de usuario se especifican
en unidades físicas como milímetros o puntos.
Para ello es necesario informar correctamente los
DPI de la pantalla.
Canvas Group
El Canvas Group puede ser utilizado para controlar Los parámetros de Canvas Group son:
ciertos aspectos de un grupo entero de elementos ● Alpha: Controla la opacidad de los elementos UI
UI de un lugar sin la necesidad de manejarlos de en este grupo. El valor está entre 0 y 1dónde 0 es
manera individual. completamente transparente y 1es
completamente opaco.
Las propiedades del Canvas Group afectan el ● Interactable: Determina si el componente va a
GameObject al igual que sus propios hijos. aceptar input.
● Blocks Raycast: Hace que uno o más elementos
UI, no bloqueen los eventos del mouse al colocar
un componente Canvas Group en el elemento.
● Ignore Parent Groups: Si se establece en
verdadero, se ignorará cualquier configuración
del grupo principal.
Canvas Renderer Modes
Screen Space - Overlay
Este modo de renderizado coloca los UI elements
por delante de la escena renderizada. Es lo que
usaremos la mayor parte del tiempo cuando
estemos haciendo un HUD o cualquier UI estática.
Es bastante útil porque escala automáticamente
los UI elements en ese Canvas al tamaño requerido
según el tamaño de la pantalla.
Canvas Renderer Modes
Screen Space
Esto es bastante similar a cómo funciona el modo
Overlay, pero en este modo, especificamos una
cámara que renderiza nuestra UI. Por lo tanto, si
cambiamos las propiedades de la cámara, como su
forma, tamaño, área de cobertura o resolución,
cambiará el aspecto de la interfaz de usuario en la
pantalla. Los desarrolladores no suelen utilizar esta
opción, ya que consideran que Overlay es más útil
por su capacidad de auto-escalar los elementos de
la UI.
Canvas Renderer Modes
World Space
Este modo es bastante diferente de los otros dos.
En el World Space, los elementos de la UI son
tratados simplemente como otro GameObject en
la escena en lugar de tener prioridad de
renderización por delante de la escena. El World
Space es muy útil cuando se trata de elementos de
la UI que forman parte del propio juego, y no
simplemente para que el jugador visualice
información en pantalla.
 -
Diseño Básico
React Tool

- React Transform

Presiona sobre cada Título para ir a

la sección respectiva
Rect Tools
La herramienta Rect Cambiar el tamaño versus escalar
se puede usar para
mover, cambiar el tamaño y rotar elementos de la
Cuando la Rect Tool es utilizada para cambiar el
interfaz de usuario.
tamaño de un GameObject, normalmente para
Una vez que haya seleccionado un elemento de la Sprites en el sistema 2D y para objetos 3D ésta va a
interfaz de usuario, puede moverlo haciendo clic cambiar la escala local del GameObject.
en cualquier lugar dentro del rectángulo y
arrastrándolo. Sin embargo, cuando es utilizada en un
GameObject con un Rect Transform en él, ésta va
Puede cambiar su tamaño haciendo clic en los
a cambiar el ancho y la altura, manteniendo la
bordes o esquinas y arrastrando. El elemento se
puede rotar moviendo el cursor ligeramente lejos escala local sin modificaciones.
de las esquinas hasta que el cursor del mouse se
vea como un símbolo de rotación. A continuación,
puede hacer clic y arrastrar en cualquier dirección
para girar.
Rect Transform
El Rect Transform es utilizado para todos los Pivot (Pivote)
elementos de la UI en vez del componente
Las modificaciones de rotación, tamaño y escala
Transform regular.
ocurren alrededor del pivote por lo que esa
posición del pivote afecta el resultado de la
rotación, el cambio de tamaño, y la escala. Cuando
el botón Pivot de la barra de herramientas es
configurado a modo Pivote, el pivot de un Rect
Transform puede ser movido en el panel de Scene.

Los componentes Rect Transform tienen posición,

rotación, y escala justo como cualquier Transform
regular, pero también tienen ancho y altura,
utilizados para especificar las dimensiones del
elemento de la UI.
Componentes - Text

Visuales - Images

Presiona sobre cada Título para ir a

la sección respectiva
Text (Texto)
El componente Text, también conocido como Label,
tiene un control para ingresar el texto que será
mostrado. Es posible configurar una fuente, estilo de
fondo, tamaño de fondo, alineamientos y tipos de
overflow, entre otras opciones.

Para utilizar el nuevo componente TextMeshPro -

Text, es necesario importar el package TMP Essentials,
al crear por primera vez el TextMeshPro - Text en la
jerarquía.
Image (Imagen)
El GameObject Image se utiliza para dar a los elementos de la UI una
presencia gráfica real en la pantalla.

Las imágenes se pueden utilizar para hacer los fondos de los botones,
paneles, sliders, etc.

Source image es la primera propiedad de una imagen. Esta es una

referencia al sprite que la imagen está mostrando, cuando se usa None,
el color será usado para representar a la imagen.
Aquí simplemente tenemos un color de imagen blanco, así que vamos
a añadir un sprite a nuestra source image.

La siguiente propiedad es el Color. Este color se multiplica por el color

del sprite. Como tal puede ser usado para desvanecer o teñir un sprite.
Image (Imagen)
La propiedad Image Type afecta a cómo se utiliza la source image y tiene una serie de opciones.

● Simple significa que el sprite se estira para ajustarse al

tamaño del rect transform.

● Preserve Aspect significa simplemente que la imagen será tan grande como pueda serlo dentro de su rect
transform, pero manteniendo la relación de aspecto con la que fue importada. No perderá sus proporciones
originales al cambiar su tamaño.
○ Set Native Size también está disponible cuando se utiliza esta opción. Esto revertirá el tamaño del rect
transform al tamaño del sprite en su source image.

● Sliced separa al sprite en 9 secciones dentro de una grilla. Las secciones externas de
○ Esta opción tiene otra propiedad, Fill Centre. Esto activa esta grilla no se estiran
si se muestra o no la sección central del sprite y permite mientras que el centro sí,
sin pixelar los bordes. Estas
renderizar sólo los bordes de una imagen.
secciones están definidas
por la opción Borders Set
en el sprite editor de la
textura.
Image (Imagen)
Image Type (continuación)
● Tiled (embaldosado), permite hacer “tiling” de la
source image a partir de la esquina inferior izquierda
del rect transform.
● Filled: permite mostrar una proporción de la imagen
definida por la propiedad Fill Amount.
En 0 no se mostrará nada de la imagen y a 1 se
mostrará la imagen completa.
○ El Fill Method junto con el Fill Origin
determinan qué punto representa que la
cantidad de relleno sea 0 y en qué dirección se
rellenará la imagen a medida que aumente.
Estos rellenos son ideales para hacer UI para
las barras de salud o los velocímetros de los
coches en el caso de los rellenos radiales.
Componentes - Toggle

de Interacción - Slider

- Scrollbar

- Dropdown

- Input Files

- Buttons

Presiona sobre cada Título para ir a

la sección respectiva
Componentes de Interacción
Los Componentes de Interacción en la UI, maneja
por ejemplo, los eventos del mouse o táctiles y la
interacción utilizando un teclado o gamepad.
Funcionalidad Común
Los componentes de interacción no son visibles La mayoría de componentes de interacción tienen
por sí solos y deben combinarse con uno o más algunas cosas en común. Éstos son seleccionables lo
componentes visuales para que funcionen cual significa que tienen una funcionalidad integrada
compartida para visualizar transiciones entre estados
correctamente.
(normal, highlighted, pressed, disabled), y para navegar
a otros seleccionables utilizando el teclado o el
gamepad.

Los componentes de interacción tienen al menos un

Unity Event que se invoca cuando el usuario interactúa
con el componente de manera específica.
Toggle (casilla de verificación)
El control Toggle permite al usuario
activar o desactivar una opción.

El Toggle tiene un único evento llamado On Value

Changed que es ejecutado cuando el usuario
cambia el valor actual. El nuevo valor se pasa a la
función del evento como un parámetro booleano.

Los casos típicos de uso de los Toggles incluyen:

● Activar o desactivar una opción (por ejemplo,

reproducir música durante un juego).
● Permitir al usuario confirmar que ha leído un
aviso legal.
● Elegir una opción dentro de un conjunto de El GameObject Toggle es un contenedor que proporciona
opciones (por ejemplo, un día de la semana) un área clickeable a sus hijos. Si el Toggle no tiene hijos (o
cuando se utiliza en un Toggle Group. están deshabilitados) entonces no se puede hacer clic.
Toggle
Propiedad Función

Interactable ¿Acepta este componente input?

Transition Propiedades que determinan la forma en que el control responde visualmente a las acciones del usuario.

Navigation Propiedades que determinan la secuencia de los controles.

Is On ¿ Está el toggle encendido desde el principio?

Toggle La forma en que el toggle reacciona gráficamente cuando se cambia su valor. Las opciones son None (es decir, la
Transition marca de verificación simplemente aparece o desaparece) y Fade (es decir, la marca de verificación se desvanece).

Graphic La imagen utilizada para el estado activo.

Group El ToggleGroup (si lo hay) al que pertenece este Toggle.

Eventos

Propiedad Función

On Value Un Unity Event que se invoca cuando se hace clic en el Toggle. El evento puede enviar el estado actual como un
Changed argumento de tipo bool.
Slider
El control Slider permite
al usuario seleccionar un
valor numérico de un rango predeterminado
arrastrando el mouse. Algunos ejemplos conocidos
son los ajustes de dificultad en los juegos y los
ajustes de brillo en los editores de imágenes.

El valor del slider está determinado por la posición

del control deslizante a lo largo de su longitud. El
valor se incrementa desde el Min Value hasta el
Max Value en proporción a la distancia en la que
se arrastra el control deslizante.
Slider
El comportamiento por defecto es que el slider
aumente de izquierda a derecha, pero también es
posible invertir este comportamiento utilizando la
El slider tiene un único evento llamado On Value
propiedad Direction. También puede configurar el
Changed que responde cuando el usuario arrastra
slider para que aumente verticalmente
el control deslizante. El valor numérico actual del
seleccionando Bottom To Top o Top To Bottom
slider pasa a la función como un parámetro float.
para la propiedad Direction.
Los casos típicos de uso incluyen:
● Elegir un nivel de dificultad en un juego, el brillo
de una luz, etc.
● Ajustar una distancia, tamaño, tiempo o ángulo.
Slider
Propiedad Función Propiedad Función

Interactable ¿Acepta este componente input? Min Value El valor del slider cuando el control deslizante
está en su extremo inferior (determinado por la
Transition La forma en que el control responde propiedad Direction).
visualmente a las acciones del usuario.
Max Value El valor del slider cuando el control deslizante
Navigation Propiedades que determinan la secuencia de
está en su extremo superior (determinado por
los controles.
la propiedad Direction).
Fill Rect El gráfico utilizado para el área de relleno.
Whole ¿Debe limitarse el slider a valores enteros?
Handle Rect El gráfico utilizado para la parte del control Numbers
deslizante del slider.
Value Valor actual del slider. Si el valor se establece
Direction La dirección en la que aumentará el valor del en el Inspector se utilizará como valor inicial,
slider cuando se arrastre el asa. pero podrá cambiar en tiempo de ejecución.

Eventos

Propiedad Función

On Value Un Unity Event que es invocado cuando el valor actual del slider ha cambiado. El evento envía el valor actual como
Changed un argumento dinámico de tipo float, sin importar si la propiedad Whole Numbers está habilitada.
Scrollbar
El control Scrollbar permite al usuario desplazar
una imagen u otra vista que es demasiado grande
para verla completamente.

Algunos ejemplos conocidos son la barra de

desplazamiento vertical al lado de un editor de
texto y el par de barras verticales y horizontales
para ver una sección de una imagen grande o un
mapa.
ScrollBar
El valor de una ScrollBar viene determinado por la
posición del control deslizable a lo largo de su
longitud, informando el valor como una fracción La ScrollBar tiene un único evento llamado On
entre los extremos. Value Changed que responde cuando el usuario
arrastra el control deslizable. El valor actual pasa a
Por ejemplo, la barra por defecto de izquierda a la función como un parámetro float.
derecha tiene un valor de 0,0 en el extremo
izquierdo, 1,0 en el extremo derecho y 0,5 indica el Los casos típicos de uso de una ScrollBar incluyen:
punto medio. Una ScrollBar puede orientarse
● Desplazar un texto verticalmente.
verticalmente eligiendo de arriba a abajo o de
abajo a arriba utilizando la propiedad Direction. ● Desplazamiento horizontal de una línea de
tiempo.
ScrollBar
Propiedad Función Propiedad Función

Interactable ¿Acepta este componente input? Direction La dirección en la que aumentará el valor de la
ScrollBar cuando se arrastra el control
Transition La forma en que el control responde deslizable. Las opciones son : Left To Right,
visualmente a las acciones del usuario. Right To Left, Bottom To Top y Top To Bottom.

Value Valor de la posición inicial de la ScrollBar, en el

Navigation Propiedades que determinan la secuencia de rango de 0.0 a 1.0.
los controles.
Size Tamaño fraccionario del control deslizable
Fill Rect El gráfico utilizado para el área de relleno. dentro de la ScrollBar, en el rango de 0,0 a 1,0.

Handle Rect El gráfico utilizado para la parte del control Number of El número de posiciones de desplazamiento
deslizante del slider. Steps distintas que permite la ScrollBar.

Eventos

Propiedad Eventos

On Value Un Unity Event que es invocado cuando el valor actual de la ScrollBar cambia. El evento puede enviar el valor como
Changed un argumento dinámico de tipo float.
Dropdown
El Dropdown puede utilizarse para que el usuario elija
una sola opción de una lista de opciones.

El control muestra la opción elegida actualmente. Una

vez que se hace clic, se abre la lista de opciones para
que se pueda elegir una nueva opción.

Al elegir una nueva opción, la lista se cierra de nuevo, y

el control muestra la nueva opción seleccionada. La
lista también se cierra si el usuario hace clic en el
propio control, o en cualquier
otro lugar dentro del Canvas.
Dropdown
El Dropdown tiene una lógica sencilla para evitar
Ubicación de la lista desplegable
que la lista desplegable se muestre fuera de los
La colocación de la lista desplegable en relación límites del Canvas, ya que esto haría imposible la
con el Dropdown está determinada por los anchors selección de ciertas opciones. Si el desplegable en
y el pivote del Rect Transform del GameObject su posición por defecto no está completamente
Template dentro de Dropdown. dentro del rectángulo del Canvas, su posición en
relación con el control se invierte. Por ejemplo, una
Por defecto, la lista aparecerá debajo del lista que se muestra por defecto debajo del control
Dropdown. Esto se consigue anclando Template a se mostrará en su lugar por encima.
la parte inferior del control. El pivote de Template
también tiene que estar en la parte superior, para Esta lógica es bastante simple y tiene ciertas
que cuando la plantilla se expanda para acomodar limitaciones. La lista desplegable no debe ser
un número variable de elementos de opción, sólo mayor que la mitad del tamaño del Canvas menos
se expanda hacia abajo. el tamaño del control desplegable, de lo contrario
puede que no haya espacio para la lista en ninguna
de las dos posiciones si el control desplegable se
coloca en el centro del Canvas.
Dropdown
La lista de opciones se especifica en el Inspector o
puede asignarse desde el código. Para cada opción
se puede especificar una cadena de texto, y
opcionalmente una imagen también, si el
dropdown está configurado para soportarlo.

El botón tiene un único evento llamado On Value

Changed que responde cuando el usuario hace
clic en una de las opciones de la lista. Soporta el
envío de un valor numérico entero que es el índice
de la opción seleccionada. 0 es la primera opción, 1
es la segunda, y así sucesivamente.
Dropdown
Propiedad Función Propiedad Función

Interactable ¿Acepta este componente input? Caption El componente Image mantiene la imagen de
Image la opción actualmente seleccionada.
Transition La forma en que el control responde
visualmente a las acciones del usuario. Item Text El componente Text contiene el texto del ítem.

Navigation Propiedades que determinan la secuencia de Max Value El valor del slider cuando el control deslizante
los controles. está en su extremo superior (determinado por
la propiedad Direction).
Template El Rect Transform de la plantilla para la lista
desplegable.
Value El índice de la opción actualmente
Caption Text El componente Text para contener el texto de seleccionada. 0 es la primera opción, 1es la
la opción actualmente seleccionada. segunda, y así sucesivamente.

Option La lista de opciones posibles. Se puede

especificar una cadena de texto y una imagen
para cada opción.
Eventos

Propiedad Función

On Value Un Unity Event que se invoca cuando un usuario ha hecho clic en una de las opciones de la lista desplegable.
Changed
Input Field
InputField permite
hacer editable el texto
de un control de texto.
Input Field
La propiedad Text del propio control Text cambiará
a medida que el usuario escriba y el valor puede
ser recuperado desde un script después de la Pistas
edición.
● Para obtener el texto del InputField,
tendremos que utilizar la propiedad text del
propio componente InputField, no la
propiedad text del componente Text que
muestra el texto.

● La propiedad text del componente Text

puede estar recortada o puede ser sólo
asteriscos para las contraseñas.
Input Field
Eventos

Propiedad Función

On Value Change Un Unity Event que es invocado cuando el contenido de texto del InputField cambia. El evento
puede enviar el contenido de texto actual como un argumento de tipo string.

On End Edit Un Unity Event que es invocado cuando el usuario termina de editar el contenido del texto ya sea
enviando o haciendo clic en algún lugar que remueva el foco del InputField. El evento puede enviar
el contenido de texto actual como un argumento de tipo string.

On Select Un Unity Event que se invoca cuando el usuario selecciona el componente.

On Deselect Un Unity Event que se invoca cuando el usuario deja de seleccionar el componente.
Buttons
Los Buttons son uno de los UI
Components más utilizados.
Son muy fáciles de personalizar
y rápidos de configurar para complementar
cualquier estilo artístico que se ajuste al
videojuego. Los Buttons cuentan con funciones Si un Canvas ya está presente en la jerarquía,
expuestas públicamente al hacer clic que permiten tendremos que hacer clic con el botón derecho del
realizar interacciones sin necesidad de ratón en el Canvas y seleccionar
implementar código en scripts. UI > Button - TextMeshPro. Si un Canvas no está
presente en la escena, se creará automáticamente
Los Buttons hacen que la llamada a la y se establecerá como padre del Button.
funcionalidad personalizada sea también sencilla.
Buttons
Un Button consiste en dos componentes: el Button
mismo, y un componente Text hijo. Por defecto, el
componente Text es el texto estándar de Unity UI;
sin embargo, el texto TextMesh Pro ahora puede
ser utilizado para los componentes de UI.

TextMesh Pro da a los diseñadores muchas más

opciones para trabajar
cuando crean texto
para los videojuegos.
Buttons
En el GameObject Button, los dos componentes El componente Button controla la funcionalidad
más importantes son Image y Button. del botón al que está unido. La mitad superior del
componente se centra en la transición del botón, o
Source Image funciona como imagen de fondo en cómo responde cuando se interactúa con él. Por
del Button. Por defecto, se establece el asset defecto, esta transición está configurada como
UISprite, que se incluye con Unity. Se puede añadir Color Tints, pero puede ser configurada como
una overlay de color para cambiar el tint del botón. Sprite Swap o Animation. Sprite Swap cambiará
Opcionalmente, se puede agregar un material - la imagen de fondo del botón cuando se interactúe
deberemos utilizar un UI Shader; de lo contrario, con él, mientras que Animation permitirá que se
aparecerá en color negro en el panel Game. reproduzcan diferentes animaciones dependiendo
de lo que haga el botón.

La propiedad Transition también puede

establecerse como None, pero es aconsejable
mantener al menos la transición de Color Tint por
defecto, ya que esto da al usuario una señal visual
de que ha hecho clic con éxito en el Button.
Buttons
Si el Button necesita ser desactivado por cualquier Manejo de Eventos
razón, tendremos que desmarcar la casilla de
verificación Interactable por encima de la Una vez que hagamos clic en el botón + en la parte
propiedad Transition inferior de la sección On Click() Unity creará una
nueva acción.
Buttons
En la ranura None (Objeto), arrastraremos el
GameObject que deseamos que sea afectado por
el Button. Alternativamente, arrastraremos el
GameObject que tiene el script asociado que debe
ejecutarse cuando el Button es presionado.

Una vez que el GameObject esté en la ranura

Object, el desplegable Function estará disponible.
Desde él, seleccionaremos las propiedades del
GameObject o el script que contiene la función
que deseamos ejecutar.