Pruebe la nueva muestra de UI Toolkit – ahora disponible en la Asset Store
En Unity 2021 LTS, UI Toolkit ofrece una colección de características, recursos y herramientas para ayudarte a construir y depurar UIs adaptativas en una amplia gama de aplicaciones de juegos y extensiones de Editor. Su flujo de trabajo intuitivo permite a los creadores de Unity en diferentes roles – artistas, programadores y diseñadores por igual – comenzar con el desarrollo de UI lo más rápido posible.
Consulta nuestro anterior post en el blog para una explicación de los principales beneficios de UI Toolkit, como la escalabilidad y el rendimiento mejorados, que ya están siendo aprovechados por estudios como Mechanistry para su juego, Timberborn.
Mientras que Unity UI sigue siendo la solución preferida para posicionar e iluminar UI en un mundo 3D o integrarse con otros sistemas de Unity, UI Toolkit para UI en tiempo de ejecución ya puede beneficiar a producciones de juegos que buscan rendimiento y escalabilidad desde Unity 2021 LTS. Es particularmente efectivo para UI de Espacio de Pantalla – Superposición, y se adapta bien a una variedad de resoluciones de pantalla.
Por eso estamos emocionados de anunciar dos nuevos recursos de aprendizaje para apoyar mejor el desarrollo de UI con UI Toolkit:
- Muestra de UI Toolkit – Dragon Crashers: La demostración está ahora disponible para descargar gratis desde la Asset Store.
- Diseño e implementación de interfaz de usuario en Unity: Este e-book gratuito se puede descargar desde aquí
Sigue leyendo para aprender sobre algunas características clave que forman parte del proyecto de muestra de UI Toolkit.
La muestra de UI Toolkit demuestra cómo puedes aprovechar UI Toolkit para tus propias aplicaciones. Esta demostración involucra una interfaz completa sobre un fragmento del proyecto 2D Dragon Crashers, un mini RPG, utilizando el flujo de trabajo de UI Toolkit de Unity 2021 LTS en tiempo de ejecución.
Algunas de las acciones ilustradas en el proyecto de muestra te muestran cómo:
- Estilizar con selectores en archivos de hoja de estilo de Unity (USS) y usar plantillas UXML
- Crea controles personalizados, como un medidor circular o vistas con pestañas
- Personaliza la apariencia de elementos como deslizadores y botones de alternancia
- Usa Render Texture para efectos de superposición de UI, animaciones USS, temas estacionales y más
Para probar el proyecto después de agregarlo a tus activos, ingresa Modo de juego. Ten en cuenta que las interfaces de UI Toolkit no aparecen en la vista de Escena. En su lugar, puedes verlas en la vista de Juego o Constructor de UI.
El menú de la izquierda te ayuda a navegar por las pantallas del menú principal modal. Esta columna vertical de botones proporciona acceso a las cinco pantallas modales que componen el menú principal (se mantienen activas mientras cambias entre pantallas).
Si bien es posible cierta interactividad, como curar a los personajes arrastrando pociones disponibles en la escena, el juego se ha mantenido al mínimo para asegurar un enfoque continuo en los ejemplos de UI.
Echemos un vistazo más de cerca a las UIs en la barra de menú:
- La pantalla inicio sirve como plataforma de aterrizaje al iniciar la aplicación. Puedes usar esta pantalla para jugar el juego o recibir mensajes de chat simulados.
- La pantalla personaje implica una mezcla de GameObjects y elementos de UI. Aquí es donde puedes explorar cada uno de los cuatro Dragon Crashers personajes. Usa las pestañas de estadísticas, habilidades y biografía para leer los detalles específicos del personaje, y haz clic en los espacios de inventario para agregar o quitar elementos. El área de vista previa muestra un personaje 2D iluminado y equipado sobre un fondo de mosaico.
- La pantalla de recursos enlaza a la documentación, el foro y otros recursos para aprovechar al máximo el UI Toolkit.
- La pantalla de tienda simula una tienda en el juego donde puedes comprar moneda dura y blanda, como oro o gemas, así como bienes virtuales como pociones de curación. Cada elemento en la pantalla de la tienda es un VisualTreeAsset separado. UI Toolkit instancia estos activos en tiempo de ejecución; uno para cada ScriptableObject en los Recursos/GameData.
- La pantalla de correo es un lector frontal de mensajes ficticios que utiliza un menú con pestañas para separar la bandeja de entrada y los mensajes eliminados.
- La pantalla de juego es una versión mini del proyecto Dragon Crashers que comienza a reproducirse automáticamente. En este proyecto, notarás algunos elementos revisados con UI Toolkit, como un botón de pausa, barras de salud y la capacidad de arrastrar un elemento de poción de curación a tus personajes cuando reciben daño.
UI Toolkit te permite construir UIs estables y consistentes para todo tu proyecto. Al mismo tiempo, proporciona herramientas flexibles para agregar tus propios toques de diseño y detalles para desarrollar aún más el tema y estilo del juego.
Repasemos algunas de las características utilizadas para refinar los diseños de UI en la muestra:
- Render Textures: Las interfaces de UI Toolkit se renderizan al final de la cola de renderizado, lo que significa que no puedes superponer otros gráficos del juego sobre una interfaz de usuario de UI Toolkit. Las Render Textures proporcionan una solución a esta limitación, haciendo posible integrar efectos dentro del juego en las interfaces de usuario de UI Toolkit. Si bien estos efectos basados en Render Textures deben usarse con moderación, aún podrás permitir efectos nítidos dentro del contexto de una interfaz de usuario de pantalla completa, sin ejecutar el juego. Las siguientes imágenes muestran varias Render Textures de la demostración.
- Temas con hojas de estilo de tema (TSS): Los archivos TSS son archivos de activos que son similares a los archivos USS regulares. Sirven como punto de partida para definir tu propio tema personalizado a través de selectores USS, así como configuraciones de propiedades y variables. En la demostración, duplicamos los archivos de tema predeterminados y modificamos las copias para ofrecer variaciones estacionales.
- Elementos de UI personalizados: Dado que los diseñadores están entrenados para pensar fuera de lo convencional, UI Toolkit te brinda mucho espacio para personalizar o extender la biblioteca estándar. El proyecto de demostración destaca algunos elementos personalizados en los menús con pestañas, interruptores deslizantes y listas desplegables, además de un contador radial para demostrar de lo que son capaces los artistas de UI junto a los desarrolladores.
- Transiciones USS para cambios de estado de UI animados: Agregar transiciones a las pantallas del menú puede pulir y suavizar tus visuales. UI Toolkit hace esto más sencillo con la propiedad Animaciones de Transición, parte del Inspector del Constructor de UI. Ajusta las propiedades de Propiedad, Duración, Easing y Retraso para configurar la animación. Luego simplemente cambia estilos para que UI Toolkit aplique la transición animada en tiempo de ejecución.
- Volumen de post-procesamiento para un desenfoque de fondo: Un efecto popular en los juegos es desenfocar una escena de juego abarrotada para atraer la atención del jugador a un mensaje emergente o ventana de diálogo en particular. Puedes lograr este efecto habilitando Profundidad de Campo en el Marco de Volumen (disponible en el Pipeline de Renderizado Universal).
Nos aseguramos de que se utilizaran flujos de trabajo eficientes para fortalecer la UI. Aquí hay algunas recomendaciones para mantener el proyecto bien organizado:
- Convenciones de nombres consistentes: Es importante adoptar convenciones de nombres que se alineen con tus elementos visuales y hojas de estilo. Convenciones de nombres claras no solo mantienen la organización de la jerarquía en el Constructor de UI, sino que también las hacen más accesibles para tus compañeros de equipo, y mantienen el código limpio y legible. Más específicamente, sugerimos la convención de nombres Bloque Elemento Modificador (BEM) para elementos visuales y hojas de estilo. Solo de un vistazo, el nombre BEM de un elemento puede decirte qué hace, cómo aparece y cómo se relaciona con los otros elementos a su alrededor. Vea los siguientes ejemplos de nomenclatura BEM:
- Diseño de UI responsivo: Similar a las tecnologías web, UI Toolkit ofrece la posibilidad de crear diseños donde los elementos visuales "hijos" se adaptan al tamaño disponible actual dentro de sus elementos visuales "padres", y otros donde cada elemento tiene una posición absoluta anclada a un punto de referencia, similar al sistema de UI de Unity. La muestra utiliza ambas opciones según sea necesario a través de los elementos visuales de la UI.
- Importador de PSD: Una de las herramientas más efectivas para crear la demostración, el Importador de PSD permite a los artistas trabajar en un documento maestro sin tener que exportar manualmente cada sprite por separado. Cuando se necesitan cambios, se pueden hacer en el archivo PSD original y actualizarse automáticamente en Unity.
- ScriptableObjects: Para centrarse en el diseño e implementación de la UI, el proyecto de muestra simula datos de backend, como compras dentro de la aplicación y mensajes de correo, utilizando ScriptableObjects. Puede personalizar convenientemente estos datos de sustitución desde la carpeta Resources/GameData y usar el ejemplo para crear activos de datos similares, como elementos de inventario y datos de personajes o diálogos en UI Toolkit.
Recuerde que con UI Toolkit, los diseños y estilos de UI están desacoplados del código. Esto significa que reescribir los datos de backend puede ocurrir independientemente del diseño de la UI. Si su equipo de desarrollo reemplaza esos sistemas, la interfaz debería seguir funcionando.
Las herramientas adicionales utilizadas en la demostración incluyen sistemas de partículas creados con el Sistema de Partículas Integrado para efectos especiales, y el conjunto de herramientas 2D, entre otros. Siéntase libre de revisar el proyecto a través del Inspector para ver cómo estos diferentes elementos entran en juego.
Puede encontrar arte de referencia hecho por los artistas de UI en UI/Reference, como se replicó en UI Builder. Todo el proceso, desde maquetas hasta wireframes, también está documentado en el e-book. Finalmente, todo el contenido de la muestra se puede agregar a su propio proyecto de Unity.
