UI Toolkit en tiempo de ejecución: Obtén el desglose

UI Toolkit es una colección de características, recursos y herramientas diseñadas para desarrollar interfaces de usuario y extensiones del Editor. Primero introducido como Elementos de UI, UI Toolkit ofrece un marco de UI de modo retenido para facilitar el desarrollo de UI personalizada para extensiones del Editor de Unity.

Disponible en la última versión de Unity, UI Toolkit admite la creación de UI en tiempo de ejecución a través de una experiencia de autoría familiar e intuitiva, inspirada en tecnologías web. Este artículo examina la especificidad de sus capacidades y comparte consejos para comenzar con UI Toolkit en tiempo de ejecución como una alternativa a UGUI.

Consulta este manual para una comparación en profundidad entre sistemas de UI.

Unity 2021 LTS ya está disponible para descargar y usar. Esta versión representa más de un año de desarrollo enfocado en todo el Editor de Unity, además de características fundamentales subyacentes, combinadas con las características incluidas en nuestras versiones de Tech Stream de Unity 2021.1 y Unity 2021.2 (con seis meses adicionales de pulido de calidad).

Para comenzar, descarga la última versión de Unity desde el Unity Hub.

Aclaramos cómo UI Toolkit puede asegurar flujos de trabajo más suaves al crear UI.

Crear UI en colaboración con artistas puede ser una tarea compleja. Mientras el artista edita el Canvas para agregar colores y materiales, el desarrollador agrega scripts, comportamientos y oyentes OnClick. Después, cuando ocurre la fusión, pueden surgir conflictos de fusión y llevar a problemas que requieren una resolución rápida.

UI Toolkit previene tales conflictos de fusión haciendo que el artista trabaje en los archivos UXML y USS mientras C# maneja toda la lógica. Por ejemplo, el manejo de botones se realiza solo con C#, que consulta el botón usando su nombre y agrega lógica sin editar ningún archivo UXML o USS.

Este proceso no solo facilita la fusión, sino que simplifica futuros cambios de estilo. Por ejemplo, si todas las fuentes del proyecto tuvieran que cambiarse de repente, no necesitarías revisar cada activo, uno por uno, para editar la configuración del texto. Esto evita un trabajo tedioso que puede llevar a problemas de supervisión; y cuanto más grande es el juego, más complicado se vuelve.

Con UI Toolkit, la Configuración del Panel contiene todas las configuraciones de texto. Así que para cambiar las fuentes bajo un UI Document, solo necesitas editar esas Panel Settings. Aunque los scripts del Editor pueden ayudar de manera similar con UGUI, el marco de UI Toolkit maneja automáticamente este proceso.

Un Visual Element es la clase base de cada elemento de UI Toolkit: botones, imágenes, texto, etc. Puedes pensar en ello como el GameObject de UI Toolkit. Mientras tanto, UI Builder (Window > UI Toolkit > UI Builder) es una herramienta visual que ayuda a crear y editar interfaces sin escribir código. Esto es útil tanto para artistas como para diseñadores, ya que les permite visualizar la UI mientras se está construyendo.

Como la herramienta principal para personas ya familiarizadas con tecnologías web, UI Toolkit también mejora la colaboración entre artistas y desarrolladores al separar la lógica y el estilo para refinar la organización y evitar conflictos de archivos. Mientras UI Builder se encarga de las posiciones, el estilo y el diseño de los elementos, el código puede manejarse en una sección distinta del proyecto para consultar las partes de UXML que necesita y conectar la lógica a ello.

Los archivos UXML son comparables a los archivos web HTML. Representan elementos visuales y contienen la jerarquía de la UI. Crea un UXML document a través de Assets > Create > UI Toolkit > UI Document. Luego usa UI Builder para visualizar y trabajar en el UXML recién creado.

Sin embargo, ten en cuenta que un archivo UXML no debe tratarse como un GameObject, sino más bien como un árbol de elementos visuales. Para aligerar la jerarquía, utiliza un solo UI Document y carga todos los elementos UXML en él. Puedes visualizar la UI con UI Toolkit Debugger bajo Windows > UI Toolkit > Debugger.

Para ayudarte a comenzar, echa un vistazo a algunos UXML Element examples de Windows > UI Toolkit > Samples.

Gracias a UI Builder, se pueden crear, visualizar y probar archivos UXML sin lanzar el juego. Simplemente arrastra y suelta controles de UI (estándar o hechos por el usuario) en la jerarquía desde el Panel de la Biblioteca de UI, y combina múltiples archivos UXML para crear la UI final.

Digamos que tenemos una UI compuesta por tres elementos:

• Salud
• Puntuación
• Ventana emergente de "Ganaste"

La ventana emergente de "Ganaste" mostrará Salud, Puntuación, así como un botón de Reiniciar.

Cada elemento se utiliza en un panel de UI diferente del juego, ya que son parte de archivos UXML separados con popup.uxml – una combinación de health.uxml y score.uxml más el botón de Reiniciar. Como tal, la lógica del código que gestiona la puntuación y la salud (score.cs y health.cs) son independientes de la jerarquía. Esto significa que health.cs siempre actualizará los valores de health.uxml, ya sea que la UI se muestre sola en la pantalla o dentro de otra ventana emergente.

Combinar UXML también puede facilitar la visualización de objetos editados. Al activar la Lista de Clases opción dentro de la jerarquía de UI Builder, puedes ver qué está impactando el objeto a primera vista, y usar selectores para mantener el estilo organizado:

Otro beneficio concierne a la jerarquía de Escena. En lugar de tener un solo Canvas con docenas de GameObjects, UI Toolkit solo necesita un archivo UXML vinculado a un Documento de UI.

vs

Este flujo de trabajo es particularmente ventajoso para equipos más grandes. En lugar de trabajar en la misma escena, con el posible riesgo de problemas de fusión, cada miembro del equipo puede trabajar en sus propios archivos UXML, que luego se añaden a un solo Documento de UI dentro de la escena.

El Activo de Configuración del Panel (Activos > Crear > UI Toolkit > Activo de Configuración del Panel) define cómo se va a instanciar y visualizar el UXML dentro del juego. Es posible tener múltiples Activos de Configuración de Panel para habilitar diferentes estilos para las interfaces de usuario. Por ejemplo, emplear ciertas Configuraciones de Panel para el HUD y otras para el Minimap tiene sentido, ya que estas son interfaces de usuario muy diferentes con necesidades distintas.

Configuraciones de Panel se puede ver como un Canvas UGUI + Escalador de Canvas con opciones adicionales como configuraciones de texto, para que todo el texto dentro del panel use la misma configuración base. Esto evita el tiempo gastado en restablecer manualmente cada fuente, pero, por supuesto, las fuentes aún se pueden anular dentro de los Documentos de UI individuales, según sea necesario.

El Constructor de UI no está destinado para la gestión de eventos, ni tampoco lo está el documento UXML. Para manejar un clic de botón o cualquier otro evento, crea un Script C# y enlázalo al UXML.

public class UIEventHandler : MonoBehaviour
{
   [SerializeField]
   private UIDocument m_UIDocument;
 
   private Label m_Label;
   private int m_ButtonClickCount = 0;
   private Toggle m_Toggle;
   private Button m_Button;
 
   public void Start()
   {
       var rootElement = m_UIDocument.rootVisualElement;
 
       // This searches for the VisualElement Button named “EventButton”
       // rootElement.Query<> and rootElement.Q<> can both be used
       m_Button = rootElement.Q<Button>("EventButton");
 
       // Elements with no values like Buttons can register callBacks
// with clickable.clicked
       m_Button.clickable.clicked += OnButtonClicked;
 
       // This searches for the VisualElement Toggle named “ColorToggle”
       m_Toggle = rootElement.Query<Toggle>("ColorToggle");
 
       // Elements with changing values: toggle, TextField, etc... 
// implement the INotifyValueChanged interface,
       // meaning they use RegisterValueChangedCallback and 
// UnRegisterValueChangedCallback
       m_Toggle.RegisterValueChangedCallback(OnToggleValueChanged);
 
       // Cache the reference to the Label since we will access it repeatedly.
       // This avoids the relatively costly VisualElement search each time we update
       // the label.
       m_Label = rootElement.Q<Label>("IncrementLabel");
       m_Label.text = m_ButtonClickCount.ToString();
   }
 
   private void OnDestroy()
   {
       m_Button.clickable.clicked -= OnClicked;
       m_Toggle.UnregisterValueChangedCallback(OnToggleValueChanged);
   }
 
   private void OnButtonClicked()
   {
       m_ButtonClickCount++;
       m_Label.text = m_ButtonClickCount.ToString();
   }
 
   private void OnToggleValueChanged(ChangeEvent<bool> evt)
   {
       Debug.Log("New toggle value is: " + evt.newValue);
   }
}

El posicionamiento de Elemento utiliza la arquitectura de Flexbox por defecto. Esto asegura que la mayoría de los diseños sean responsivos al tamaño del contenedor o de la pantalla. Aplícalo a un Árbol de Elementos Visuales con dos o más elementos, luego define cómo se alinean en el árbol.

Colocar un elemento en Posicionamiento Absoluto significa que estará situado en relación con el posicionamiento de sus padres, y no afectará ni será afectado por otras posiciones.

Para los ajustes Flex y Alinear configuraciones, usa esta jerarquía simple como ejemplo:

Edita los siguientes ajustes usando el Inspector del Constructor de UI:

• Base: Esto se refiere al tamaño predeterminado del elemento, antes de que ocurra cualquier operación de Reducir (tasa de reducción si el padre no tiene tamaño disponible) o Aumentar (tasa de aumento del elemento si hay tamaño disponible en el padre).
• Dirección (Fila y Columna): Usa esto para crear comportamientos similares a los de Grupo de Diseño Vertical y Grupo de Diseño Horizontal de UGUI, respectivamente.

• Envolver: Determina qué elementos no encajan e ignóralos, de lo contrario, sube o baja respecto a los elementos anteriores.

• Alinera Elementos: Empaca los elementos en las posiciones seleccionadas utilizando su tamaño mínimo.

• Justificar Contenido: Determina el espaciado entre elementos a lo largo del eje principal.

Para más información sobre la posición de Elementos Visuales, consulta la documentación del Motor de Diseño de UI Toolkit.

El estilo es donde el UI Toolkit exhibe su máximo poder. Agregar Estilo a elementos visuales se realiza a través de archivos USS (Activos > Crear > UI Toolkit > Hoja de Estilo). Son el equivalente de Unity a los archivos CSS web, y utilizan el mismo formato basado en reglas.

Ten en cuenta que los archivos USS creados por el usuario no son obligatorios para que la UI funcione. Los Estilos de Tiempo de Ejecución y del Editor se proporcionan por defecto, pero crear USS personalizados te permite expandir lo que ya se proporciona o incluso crear estilos desde cero.

Puedes agregar selectores de estilo a través del Inspector de Hoja de Estilo de UI Builder panel y luego editarlos usando código o UI Builder.

Selectores de estilo USS en el Constructor de UI

Clase añadida coincidente en el Inspector

En la captura de pantalla anterior, el selector .RedButton se añade a un botón. El selector aparece junto a los elementos incorporados .unity-text-element y .unity-button classes que todos los botones tienen automáticamente.

A continuación se muestra un ejemplo de una regla USS que establece el color de fondo de todos los elementos con la clase .RedButton a rojo. La primera línea de la regla es un selector que utiliza el nombre de la clase seguido de una lista de estilos a aplicar.

.RedButton { background-color: red; }

Al igual que en CSS, las clases se pueden combinar para restringir aún más el alcance del selector de una regla:

.RedButton.BlueText { color: blue; }

En este ejemplo, solo los objetos con ambas clases .RedButton y .BlueText tendrán texto azul. Cuando se combina con el fragmento anterior, el botón también tendrá un fondo rojo.

Al igual que los estilos CSS, los archivos USS se pueden usar para anular la apariencia de los objetos según su estado:

.unity-button:hover { background-color: red; }

En este ejemplo, todos los botones que están en el estado de hover tendrán su fondo cambiado a rojo. Para previsualizar el estilo de hover y ver cómo lucen los efectos, haz clic en Vista previa en la Constructor de UI barra de herramientas.

Ahora que conocemos los conceptos básicos del Toolkit de UI, construyamos un ejemplo que compare la creación de interfaces usando UGUI vs Toolkit de UI. Nuestro objetivo es construir un menú simple, incluyendo el hover del ratón con los siguientes dos efectos:

• Cambio en el color de fondo de los botones
• Cambio en el color del texto de los botones

Para crear este menú con UGUI, configura la siguiente jerarquía:

También necesitamos agregar algunos componentes extra a algunos objetos:

• Menu tiene una imagen para el fondo y necesita anclaje para la alineación.
• Buttons deben estar anclados correctamente para que estén bien alineados.
• Los botones Restart y Quit requieren:
• Un script para cambiar dinámicamente su color de texto al pasar el mouse.
• Configuraciones del componente de botón (editadas en el Editor) para cambiar el color de fondo.

En este ejemplo, Quit es un Prefab que define un botón rojo.

Ahora, para crear el menú con UI Builder, comienza con una jerarquía similar:

Con Popup Align configurado como Center, y Buttons Flex Direction configurado como Row, nuestro actual pop-up de UI Toolkit se ve así:

Nota que el botón Quit es rojo, ya que está usando el componente QuitButton.uxml, un equivalente al Prefab del botón Quit.

Para ver dónde ocurre realmente la magia del UI Toolkit, agrega un PopupStyle.uss con un montón de reglas y…

.background {
   background-image: url('/Assets/Assets/OptionsMenu.png#OptionsMenu');
   width: 500px;
   height: 300px;
}
 
.title {
   font-size: 32px;
   color: rgb(255, 255, 255);
}
 
.unity-base-field__input {
   background-color: rgba(0, 0, 0, 0);
   background-image: url('/Assets/Assets/OptionsMenu9Slice.png#OptionsMenu9Slice_2');
   width: 300px;
   height: 75px;
   font-size: 20px;
   color: rgba(255, 255, 255, 0.5);
   -unity-text-align: middle-center;
}
 
.unity-button {
   color: white;
   background-color: rgba(0, 0, 0, 0);
   background-image: url('/Assets/Assets/StartMenu.png#StartMenu_ButtonDefault');
   width: 160px;
   height: 30px;
   -unity-slice-bottom: 1;
}
 
.unity-button:hover {
   color: rgb(0, 21, 255);
}
 
#Restart {
   -unity-background-image-tint-color: rgb(112, 202, 125);
}

Por favor, ten en cuenta que hay precedencia de selectores aquí. Por ejemplo, un estilo escrito directamente en el UXML sobrescribirá el de los archivos USS. Aquí, el ancho y la altura de los elementos se añaden a PopupStyle.uss, pero también podrían ser editados directamente en UI Builder, y sobrescribir el PopupStyle.uss. Las reglas de precedencia se pueden encontrar aquí.

Así que digamos que queremos cambiar todos los colores que aparecen en el menú, pero no en el resto del juego: UGUI requeriría que editáramos manualmente todos los colores de todos los componentes, uno por uno. Sin embargo, considera nuestro ejemplo. Mientras que solo el botón Salir es un Prefab, podríamos hacer que todos sean Prefabs, para poder anularlos localmente una vez. Luego, a medida que se editan, cualquier cambio de color futuro en el Prefab sería ignorado por el menú.

Con UI Toolkit, solo necesitamos crear un NuevaEstilo.uss duplicando las etiquetas PopupStyle.uss, y reemplazar PopupStyle.uss con NuevaEstilo.uss.

Una vez que se crea y estiliza el archivo UXML, el último paso es agregarlo a la escena real. Para hacer esto, reemplaza el Escena Canvas elemento y crea un GameObject vacío con un UI Document elemento. Rellénalo con los popup.uxml y Ajustes del Panel archivos, y presiona play para probar la nueva UI.

Una vez que hayas tenido la oportunidad de probar UI Toolkit, háznos saber qué piensas en los foros de UI, o consulta la documentación oficial para más detalles.

Finalmente, puedes seguir las últimas actualizaciones visitando nuestra nueva Hoja de Ruta de la Plataforma Unity. ¡Por favor, comparte tus comentarios directamente con el equipo de producto – estamos ansiosos por saber de ti!

Este artículo está escrito por Marina Joffrineau en el equipo de Producciones de Unity Studio, compuesto por los desarrolladores de software más senior de Unity. El equipo de Producciones de Unity Studio ofrece soluciones de consultoría y desarrollo personalizado para estudios de juegos de todos los tamaños. Para aprender más sobre Producciones de Unity Studio y cómo podemos ayudarte a alcanzar tus objetivos, visita nuestro sitioweb.