La UI del juego en Unity

La UI (User Interface) o interfaz de usuario es uno de los aspectos más importantes en el desarrollo de cualquier tipo de software. En videojuegos consideramos parte de la UI todos los elementos gráficos e interactivos que permiten al usuario visualizar los datos del juego en la pantalla o ejecutar alguna acción, pero no se considera parte de la UI los Sprites, modelos 3D, escenarios u objetos del propio juego.

Unity ofrece muchos componentes que nos ayudarán a maquetar la UI y darle funcionalidad de una forma muy simple, a través de componentes como el Texto, las imágenes de UI, botones, toggle buttons, sliders, scrollbars, inputs, dropdown views, scroll views, etc.

En cuanto a la estructura básica de la UI tenemos en primer lugar los objetos Canvas, que serán nuestro lienzo en blanco para agregar elementos de UI, junto con el Event System es el encargado de detectar y gestionar los eventos y, por último, los componentes visuales e interactivos que se alojarán dentro del propio Canvas.

Canvas

Para crear un Canvas simplemente debemos añadirlo como cualquier otro GameObject, desde la barra de herramientas seleccionaremos GameObject → UI → Canvas. Esto creará automáticamente los objetos y componentes necesarios, incluyendo el Event System.

El Canvas, no solo nos sirve como un contenedor de componentes visuales interactivos, sino que también se encarga de manejar otros aspectos importantes. Por ejemplo, el modo de renderizado, que puede ser en pantalla o ScreenSpace, el cual tomará como tamaño total la pantalla dónde se renderiza la escena, esto es habitual configurarlo así para la UI general del juego, menús, etc. Otro modo de renderizado posible es el WorldSpace o espacio del mundo, con el cuál podremos definir su tamaño y posición dentro de la escena, este modo se suele usar por ejemplo para mostrar la barra de vida de un personaje o un enemigo que se mueve por la pantalla justo encima del mismo.

Al crear un Canvas observaremos que, además del propio componente Canvas del objeto, también se incluyen otros dos, el componente Canvas Scaler y el Graphic Raycaster. El Canvas Scaler nos permite escalar el contenido del canvas según el tamaño de la pantalla o mantener un aspecto constante al mundo. El Graphic Raycaster, por su parte, permite determinar qué Layers se bloquearán al interactuar con alguno de los elementos de UI.

Componentes de la UI

Los componentes de UI que queramos utilizar serán hijos del Canvas. Podemos manipular su posición o tamaño usando las herramientas de edición de la propia escena. Para agregar un elemento, lo más rápido y sencillo es hacer clic derecho sobre el objeto Canvas y buscar el elemento que queremos agregar en la categoría de UI.

El elemento Text por ejemplo, nos permite mostrar un texto y configurar su fuente, tamaño, color y demás elementos relacionados con el mismo.

Imagepor su parte, serán imágenes a utilizar en el fondo de la UI u otros elementos, pudiendo seleccionar el sprite que utilizaremos para ello, el color o la forma de visualización de la misma.

El Input Field funcionará como un campo de texto editable para que el jugador pueda ingresar datos, es lo equivalente a un campo de input de un formulario.

El Button, el cual también nos permite personalizar el sprite que le da forma, el color y asignarle una acción.

Otros como el Drop down, el Toggle o el Scrollview, que poseen un componente llamado Rect Transform con el que podremos modificar su posición, tamaño, rotación, escala, pivote y anclaje. El anclaje en el Rect Transform se refiere al punto de referencia donde se ubicará el elemento, independientemente del tamaño. El pivote se activa presionando la tecla Shift, indica el punto que se utiliza para asignarle la posición y el punto central desde el cuál rotarlo. Con la tecla Alt ubicamos la posición automáticamente en alguno de los puntos. El Rect Transform junto con el anclaje y el pivote nos permite crear interfaces adaptables a diferentes resoluciones de pantalla y dispositivos, de la misma forma que con componentes anteriores, también podremos acceder desde código para modificar estos valores en tiempo de ejecución.

Estos son los elementos principales y los más simples para elaborar una UI básica en Unity, pero en la actualidad también existen paquetes que nos ayudan a mejorar la creación de nuestras UI para adaptarla mejor y más rápidamente, como puede ser UIToolkit.

Eventos de la UI

Para que los elementos de la UI sean interactivos, debemos asignarles un evento. Por ejemplo, si queremos que un botón realice una acción al ser pulsado, debemos añadir un componente Button al objeto y asignarle un método que se ejecutará al pulsarlo.

Para ello, debemos crear un script que contenga el método que queremos ejecutar y asignarlo al botón. Para ello, seleccionamos el botón y en el inspector, en la sección On Click, pulsamos el botón + para añadir un nuevo evento. En el campo Object, seleccionamos el objeto que contiene el script y en el campo Function, seleccionamos el método que queremos ejecutar.

Por ejemplo, si queremos que al pulsar un botón se muestre un mensaje en consola, creamos un script con el siguiente contenido:

using UnityEngine;
using UnityEngine.UI;

public class ButtonScript : MonoBehaviour
{
    public void ShowMessage()
    {
        Debug.Log("Botón pulsado");
    }
}

Y lo asignamos al botón en el campo On Click.

El UIToolkit

El UIToolkit es un paquete que nos permite crear interfaces de usuario de una forma más sencilla y rápida, con una mayor flexibilidad y personalización.

Para instalarlo, simplemente debemos ir a la pestaña de Package Manager y buscar UIToolkit. Una vez instalado, podremos crear un nuevo UI Toolkit desde GameObject → UI Toolkit → UI Toolkit Root. Aunque en Unity6 ya se incluye por defecto, en versiones anteriores debemos instalarlo desde el Package Manager.

El UIToolkit nos permite crear interfaces de usuario de una forma más sencilla y rápida, con una mayor flexibilidad y personalización.

Las interfaces definidas con UIToolkit se componen de UI Toolkit Root, UI Toolkit Document y UI Toolkit View.

El UI Toolkit Root es el objeto raíz de la interfaz, que contiene todos los elementos de la misma. El UI Toolkit Document es el documento de la interfaz, que contiene los elementos de la interfaz. El UI Toolkit View es la vista de la interfaz, que muestra los elementos de la interfaz.

Para crear un nuevo UI Toolkit, simplemente debemos añadirlo como cualquier otro GameObject, desde la barra de herramientas seleccionaremos GameObject → UI Toolkit → UI Toolkit Root. Esto creará automáticamente los objetos y componentes necesarios, incluyendo el UI Toolkit Document y el UI Toolkit View.

Una vez creado el UI Toolkit, podremos añadir elementos de la interfaz desde la barra de herramientas, seleccionando GameObject → UI Toolkit → UI Toolkit Element. Esto creará un nuevo elemento de la interfaz, que podremos personalizar y configurar según nuestras necesidades.