Contexto
La interfaz de usuario, en inglés User Interface (UI), hace referencia a la manera en que los usuarios interactúan con la máquina o software. Por eso es importante tener en cuenta la visibilidad de los elementos de control de una interfaz, ya que a través de ellos se tendrá la interacción.
Elementos que pueden ser líneas, texto o hasta un diseño más complejo.
La interfaz de usuario es el punto de interacción entre el usuario y el videojuego. En este punto se guía al usuario para que recorra la narrativa y reaccione a ella. El objetivo de la interfaz de usuario es brindar la información necesaria al usuario para que interactúe con fluidez durante el juego. Para diseñar la interfaz de usuario se debe tener en cuenta el entorno o plataforma, el contenido, diseño visual y la arquitectura de la información.
Explicación
11.1 Canvas
UI contiene varios objetos que te servirán para generar las pantallas del videojuego. El canvas es un componente que controla el renderizado de un grupo de elementos UI.
Es posible tener más de un canvas en una escena. Para usar un elemento UI, éste necesita al menos un canvas. Si creas un nuevo elemento UI y no existe un canvas, se genera uno y el elemento UI se adhiere a él. Cada canvas tiene diferentes modos de renderizado.
El render mode se puede ajustar utilizando el menú Render Mode.
Esta pantalla se obtuvo directamente del software que se está explicando en la computadora, para fines educativos.
Modos de renderizado:
Haz clic en cada elemento.
El modo más común de renderizado es Screen Space - Overlay, el cual crea una superposición de la escena y todos los elementos UI se moverán encima de los elementos renderizados de la misma. En este modo el canvas de la pantalla se ajusta automáticamente y se reajusta si los ajustes de la pantalla se modifican. En este modo de renderizado existe la propiedad de Pixel Perfect, al estar activada esta opción los elementos UI se ajustarán al pixel más cercano al ser renderizados.
El segundo modo es Screen Space - Camera, este modo es renderizado por una cámara dentro de la escena. Esto permite que los ajustes de la cámara se apliquen al espacio UI de la pantalla. Lo más común es que se utilice la cámara de perspectiva, esto brinda a los elementos UI una sensación de profundidad. En este modo, el canvas reajusta el tamaño de la escena si los ajustes del viewport se modifican. En este modo de renderizado, la herramienta de Rec Transform es modificada por el canvas.
La opción de Pixel Perfect actúa de la misma manera que el modo Screen Space Overlay. La propiedad Render Camera es para ajustar la cámara que renderizará los elementos UI en el canvas.
El tercer modo de renderizado es World Space, éste renderiza los elementos UI en la escena de volumen, éstos pueden ser desde objetos estáticos hasta objetos dinámicos. En este modo de canvas, el Rec Transform no se modifica, por lo que el canvas puede ser colocado en cualquier lugar del espacio. El Event Camera es necesario para recibir eventos que determinen cuál cámara se utilizará para detectar tales eventos, como hacer clic sobre un elemento UI.
Receives Events indica cuáles elementos UI en el canvas van a recibir eventos como clics y cuando los elementos flotan. Si esta opción está deshabilitada se ignoran los eventos sobre los elementos UI. Sorting Order y Order in Layer controlan el orden del renderizado en el canvas.
Rec Transform
Esta pantalla se obtuvo directamente del software que se está explicando en la computadora, para fines educativos.
Rect Transform es un componente que reemplaza el componente usual de transformación en todos los elementos UI. El Rec Transform representa un rectángulo 2D especificado por un ancho y alto relacionado con un punto del pivote. También incluye posición a lo largo del eje Z, así como escala y rotación para que el elemento UI pueda ser manipulado en la escena. Otra propiedad de este componente es el Anchor o anclaje, que son cuatro manijas con figura de triángulos. Cada esquina puede ser anclada a diferentes puntos en el rectángulo.
11.2 Componentes visuales
Texto
Este componente tiene un área para ingresar texto, el cual será mostrado en la escena. Las propiedades que se pueden modificar en este componente son Font, estilo de fondo, tamaño, alineamiento de texto y encaje perfecto.
Esta pantalla se obtuvo directamente del software que se está explicando en la computadora, para fines educativos.
Haz clic en cada elemento.
El texto se puede importar a Unity como Asset, solo debes colocarlo en la carpeta de Assets de tu proyecto, los formatos que soporta Unity son .txt, .tml. .xml, .csv y .bytes.
Los fonts pueden ser importados como un Asset, también pueden ser creados como un GameObject vacío, haces clic en Components, Mesh, Text Mesh. Text Mesh cuenta con las propiedades de Text para capturar el texto que quieras. Offset, Character Size, Line Spacing, Anchor, Alignment, Tab Size, Font Size, Font Style y Rich Text.
La opción Font cuenta con un círculo en su lado derecho para seleccionar fuentes predeterminadas por el programa o fuentes guardadas en la carpeta de Assets de tu proyecto y finalmente la opción Color que tiene a su derecha un gotero para seleccionar algún color de una imagen en Unity o puedes hacer clic sobre la franja de color, que por defecto es blanco para visualizar la gama de colores o escribir el código hexadecimal de tu preferencia.
En Unity también puedes importar fuentes en formato .ttf y otf. Para importarlas solo deben estar guardadas en la carpeta de tu proyecto en el folder Assets.
Esta pantalla se obtuvo directamente del software que se está explicando en la computadora, para fines educativos.
En los ajustes de importación verás propiedades como el tamaño de la fuente. El modo de renderizado, si quieres que éste sea suavizado (Smooth), como una imagen de mapa de bits (Hinted Raster), Character, si quieres que éste sea dinámico, Ascent Calculation Mode, Use Legacy Bound, la opción de Round Advance Value, Font Data y Font Names.
En Unity puedes crear tu fuente personalizada, haciendo clic en Project Window / Custom Font. Automáticamente se agrega un Asset de fuente personalizada a la carpeta de tu proyecto.
Esta pantalla se obtuvo directamente del software que se está explicando en la computadora, para fines educativos.
Este nuevo Asset de Font personalizada cuenta con las siguientes propiedades:
Imagen
En este componente se puede añadir un Sprite como el Source Image, se puede modificar el color y material, entre otros.
Esta pantalla se obtuvo directamente del software que se está explicando en la computadora, para fines educativos.
Raw Image
Este componente toma una textura sin bordes, a la cual se le puede modificar el color, material, Raycast Target y UV Rect.
Esta pantalla se obtuvo directamente del software que se está explicando en la computadora, para fines educativos.
Mask
El componente Mask modifica las apariencias de los controles, es un elemento invisible.
Esta pantalla se obtuvo directamente del software que se está explicando en la computadora, para fines educativos.
Efectos
Estos componentes incluyen Shadow, Outline y Position UV1, son efectos de sombreado y delineado.
11.3 Interacción
Los componentes de interacción son los que manejan algún tipo de interacción en el sistema UI, estos son los eventos del mouse, la interacción entre usuario y videojuego por medio del teclado y mouse. Estos componentes son una combinación de elementos visuales e interacción, tienen una funcionalidad para cambiar de estados, de normal a presionado y para navegar entre otros elementos UI.
A continuación, se presentan los elementos de interacción:
El botón o button responde a un clic del usuario, este botón es utilizado para confirmar una acción o para iniciarla, es decir, inicia la acción el usuario haciendo clic sobre el botón y soltando el botón. Cuenta con propiedades de color para resaltar, color en su estado regular, color al ser presionado y navegación.
El Input Field se utiliza para el texto, es una manera de que el elemento del texto sea editable por el usuario. Este componente se combina con otro elemento para funcionar correctamente como la propiedad Text. Cuenta con un evento que ayuda a definir lo que sucederá al ser cambiado el contenido de texto y cuenta con otro evento para definir cuando el usuario finaliza de editar el texto.
El Toggle contiene una casilla de verificación que determina si está activada o no. El valor del Toggle es modificado por el usuario al hacer clic sobre él.
El Slider es un control que permite al usuario seleccionar un valor, el usuario arrastra el mouse y al arrastrar brinda un rango predeterminado que va de un rango mínimo a un rango máximo. Un ejemplo de esto es el ajuste de imagen, se utiliza el control slider para modificar brillo de una luz, para ajustar tamaño, tiempos o distancia.
Scrollbar (barra de desplazamiento)
El Scrollbar es utilizado para desplazar imágenes o brindar una mayor vista de lo que vemos en la escena. Éste, al igual que el control Slider, tiene una manija. En el caso del Scrollbar, la manija cambia de tamaño para representar la distancia. Un ejemplo de su uso es al desplazar un texto o una imagen más grande a la sección que puedes ver.
El Dropdown sirve para seleccionar una sola opción de una lista de opciones. A simple vista se observa una opción seleccionada, al hacer clic sobre ésta se despliega la lista de posibles opciones a elegir para el usuario.
El Scroll Rect se utiliza cuando se tiene contenido y este abarca mucho espacio y solo se quiere mostrar en una pequeña área. Este Scroll ayuda a que el usuario se desplace sobre el contenido.
11.4 Pantalla de menú
Con los conocimientos previos, vas a crear un proyecto y configurar una escena. Además, te será útil el canvas y limitar la zona segura con un panel que te servirá de referencia para no salirte del espacio seguro.
A estas alturas del curso ya debes tener la idea de tu videojuego y tener los Assets que utilizarás, así que ya estás listo para empezar a maquetar el videojuego.
Recuerda que es importante tener los Assets dentro de la carpeta de tu proyecto de Unity.
Cierre
El UI es uno de los factores que pueden ayudarte a mejorar el aspecto visual de tu videojuego. Recuerda que Unity te brinda elementos que te ayudarán a crear una correcta interacción con el usuario y tu juego. Se deben definir todos los elementos con los que el usuario va a interactuar.
Los elementos UI se manifiestan de manera gráfica, debes aprender a ser práctico e intuitivo para saber diferenciar un buen aspecto visual que sea amigable para el usuario. Recuerda que debes tener en mente el balance entre diseño e interacción a la hora de diseñar el UI para tu videojuego.
Proyecto final
Recuerda que los elementos de UI (User Interface) deben tener un tamaño apropiado de acuerdo a la plataforma en la cual piensas publicar tu juego:
Checkpoint
Asegúrate de poder:
Referencias