Cómo se construyó la compleja interfaz de usuario en tiempo de ejecución de Timberborn

Mechanistry ahorró un tiempo de producción extenso al cambiar a UI Toolkit y creó una interfaz de usuario intrincada para su constructor de ciudades basado en castores.

Aprende sobre el diseño e implementación de interfaces de usuario en Unity con nuestra guía práctica gratuita. Descargar e-book

Optimización del desarrollo de UI

¿Cómo puede un pequeño equipo con pocos recursos crear una interfaz de usuario compleja para un constructor de ciudades? Cuando Timberborn se convirtió en un éxito de Acceso Anticipado en Steam, Mechanistry necesitaba iterar rápidamente en una interfaz de usuario intuitiva para una base de jugadores en rápido crecimiento. Al cambiar de uGUI a UI Toolkit, pudieron acelerar la producción con un código más limpio que es más fácil de mantener.

Eligiendo Unity

Proveniendo de un fondo de desarrollo de software, Mechanistry valora el código limpio, los flujos de trabajo ágiles y las grandes experiencias de usuario. Por eso eligieron Unity para hacer Timberborn. "Fue la elección inteligente", dice el programador Paweł Duda. “Hay muchos recursos web. La curva de aprendizaje no es empinada. Y nuestro equipo está familiarizado con C#.”

Los resultados

• Prototipado e implementación de UI acelerados, que ahora toma horas en lugar de días

• Pasamos de varios conflictos de fusión cada semana a cero

• Logramos una calificación de “Absolutamente Positiva” en Steam en casi 18,000 reseñas

Desafiando los límites de uGUI

Mechanistry usó uGUI en el desarrollo temprano, pero surgieron problemas a medida que Timberborn se volvía más complejo. Realinear íconos rompió diseños, reutilizar activos fue un desafío, y debido a que el código no era legible para humanos, había múltiples conflictos de fusión por semana. “Si dos personas trabajaban en el mismo Prefab, generalmente era un problema,” dice Paweł. “Algunos de los conflictos se resolvieron automáticamente. Pero si no lo hacían, teníamos que recrear el Prefab manualmente.”

Después de ver el mapa de ruta de UI Toolkit, Mechanistry decidió migrar al nuevo sistema. Querían apegarse a una solución hecha por Unity, y, al notar que UI Toolkit se inspira en tecnologías web, estaban seguros de que la transición sería fluida para su equipo.

Pasando a UI Toolkit

El equipo adoptó un enfoque pragmático para la migración durante varios meses. Primero, limpiaron la arquitectura de su código de interfaz de usuario y eliminaron olores de código. Luego recrearon todos sus elementos de interfaz de usuario en UI Toolkit y rediseñaron sus activos para obtener el aspecto que deseaban.

"Cambiar a UI Toolkit fue un cambio radical", explica Paweł. "Antes, éramos reacios a hacer una interfaz de usuario hermosa porque sabíamos que sería un gran problema. Ahora hemos agregado cosas como escalado de UI y menús ocultos al juego, y fue mucho más fácil hacerlo que con uGUI."

Resolviendo conflictos de fusión

Mechanistry señala que pasar a UI Toolkit ha eliminado prácticamente los conflictos de fusión, que habían sido una fuente significativa de lentitud en el estudio. "Si surge un conflicto, podemos verlo e instantáneamente saber cómo resolverlo", dice Paweł. "Todos pueden trabajar en la interfaz de usuario al mismo tiempo, incluso en el mismo elemento, y no es un problema."

UI Toolkit también les permitió separar la lógica del juego de la lógica de la interfaz de usuario, reduciendo aún más los conflictos. Ahora el equipo puede iterar en diferentes partes de la interfaz de usuario de manera independiente y probar componentes en aislamiento, lo que resulta en menos compilaciones rotas. "Esto fue muy, muy importante para nosotros", agrega Paweł.

Depuración en tiempo real

Timberborn’s UI escalable y adaptable actualmente soporta 12 idiomas. Cambiar entre ellos puede resultar en que los elementos de la interfaz de usuario se desalineen, lo que, combinado con la complejidad general de la interfaz, lo hace propenso a errores de diseño. Pueden identificar y resolver estos problemas rápida y fácilmente con el depurador de UI Toolkit.

UI Toolkit muestra una ventana con una vista en vivo de la jerarquía de la interfaz de usuario. Mechanistry puede seleccionar cualquier elemento en la jerarquía para inspeccionar propiedades y estados y verificar errores de UI. “Esto nos permite inspeccionar y depurar elementos de la interfaz de usuario en tiempo real”, comenta Paweł.

Personalizando el kit de herramientas

La flexibilidad del Kit de Interfaz de Usuario permite a Mechanistry ajustarlo a sus necesidades. “Tenemos nuestro propio sistema que nos permite agregar imágenes e íconos en un menú desplegable”, dice Paweł. “También tenemos nuestras propias descripciones emergentes y controles localizados. Simplemente ponemos un atributo en el UXML, y eso nos permite localizar el control automáticamente.”

Por ejemplo, el equipo tiene un control que muestra Sprites localizados en el idioma apropiado usando etiquetas. Construyeron una vista que muestra cómo se apilan los paneles, permitiéndoles manipular fácilmente las posiciones de los controles de la interfaz de usuario mientras mantienen un seguimiento de lo que es visible en la pantalla, además de un 9-slice para fondos, botones, etiquetas y más.

Pasando de días a horas

Con el Kit de Interfaz de Usuario, el proceso de diseño de Mechanistry es más limpio y directo, y pueden agregar pulido mucho más rápido. “Eso requiere mucho ajuste y cambio, lo que podría llevar semanas,” explica Paweł. "Ahora, el proceso toma días, una semana como máximo. Lo mismo ocurre con la espera de activos del artista. Los días se reducen a horas.”

Adoptar el Kit de Interfaz de Usuario de Unity ha transformado sustancialmente el pipeline de UI de Mechanistry, acelerando Timberborn’s desarrollo a medida que avanzan hacia su muy anticipado lanzamiento 1.0.

Crea e integra UI en tiempo de ejecución con UI Toolkit. Personaliza tu Editor para mejorar la colaboración y aprovecha la depuración eficiente para un mejor rendimiento, todo en una experiencia intuitiva inspirada en tecnologías web para ayudarte a crear UI más rápido.