¿Qué estás buscando?
Hero background image
Case study
Cómo se construyó la interfaz de ejecución compleja de Timberborn
Mechanistry ahorró mucho tiempo de producción cambiando a UI Toolkit y diseñó una interfaz de usuario compleja para su constructor de ciudades basado en castores.
Aprenda sobre el diseño e implementación de interfaces de usuario en Unity con nuestra guía práctica gratuita.
Descargar libro electrónico

Racionalización del desarrollo de IU

How does a small team with few resources create a complex city-builder UI? When Timberborn became an Early Access hit on Steam, Mechanistry needed to quickly iterate on intuitive UI for a rapidly growing playerbase. By switching from uGUI to UI Toolkit, they were able to accelerate production with cleaner code that’s easier to maintain.

El desafío

Creating a scalable, beautiful, and high-performance UI with consistent elements

Plataformas

PC, MacOS

Miembros del equipo

13

Ubicación

Distributed, Poland

avance de timberborn

Elegir la unidad

Proviniendo de un entorno 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 un montón de recursos web. La curva de aprendizaje no es pronunciada. Y nuestro equipo está familiarizado con C#.”

Resultados

Los resultados

  • Prototipado e implementación acelerada de IU, que ahora toma horas en lugar de días
  • Pasó de varios conflictos de fusión cada semana a cero
  • Logró una calificación “Abrumadoramente Positiva” en Steam en casi 18.000 revisiones
Desafiar los límites de la uGUI
Desafiar los límites de la uGUI

Mechanistry usó uGUI en el desarrollo temprano, pero surgieron problemas a medida que Timberborn se hizo más complejo. Alinear los iconos rompía los diseños, reutilizar los activos era un desafío, y debido a que el código no era legible por 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 eran, teníamos que recrear el Prefab manualmente.”

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

Interfaz de usuario de Timberborn con muchas ventanas y controles en el juego
Pasar a UI Toolkit

The team took a pragmatic approach to migration over several months. First, they cleaned up their UI code architecture and removed code smells. They then recreated all of their UI elements in UI Toolkit and redesigned their assets to get the look they wanted.

“Switching to UI Toolkit was a game changer,” Paweł explains. “Previously, we were reluctant to make a beautiful UI because we knew it would be a big hassle. Now we’ve added things like UI scaling and hidden menus to the game, and it was much easier to do than with uGUI.”

Cruce de distrito en Timberborn con muchos castores
Resolución de conflictos de fusión

Mechanistry señala que pasar a UI Toolkit prácticamente ha eliminado los conflictos de fusión, que habían sido una fuente significativa de ralentización 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 de juego de la lógica de interfaz de usuario, reduciendo aún más los conflictos. Ahora el equipo puede iterar en diferentes partes de la IU de forma independiente y probar componentes de forma aislada, lo que resulta en menos compilaciones rotas. "Esto fue muy, muy importante para nosotros", añade Paweł.

Vista aérea de un laberinto de setos en Timberborn
Depuración en tiempo real

Timberborn’s scalable, adaptive UI currently supports 12 languages. Switching between them can result in UI elements becoming misaligned, which – combined with the overall complexity of the interface – makes it prone to design errors. They can identify and solve these issues quickly and easily with the UI Toolkit debugger.

UI Toolkit displays a window with a live view of the UI’s hierarchy. Mechanistry can select any element in the hierarchy to inspect properties and states and check for UI errors. “This allows us to inspect and debug UI elements in real-time,” Paweł remarks.

Desplegable con iconos en Timberborn UI
Personalización del kit de herramientas

La flexibilidad del UI Toolkit permite a Mechanistry ajustarlo a sus necesidades. "Tenemos nuestro propio sistema que nos permite agregar imágenes e iconos en un menú desplegable", dice Paweł. “También tenemos nuestras propias herramientas 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 mediante etiquetas. Construyeron una vista que muestra cómo se apilan los paneles, lo que les permite manipular fácilmente las posiciones de control de IU mientras realizan un seguimiento de lo que es visible en pantalla, además de un fragmento de 9 para fondos, botones, etiquetas y más.

Gran colonia de TI en Timberborn
Pasar de días a horas

Con UI Toolkit, el proceso de diseño de Mechanistry es más limpio y sencillo, y pueden agregar pulido mucho más rápidamente. “Eso lleva mucho jugueteo y cambio, lo que podría llevar semanas”, explica Paweł. “Ahora, el proceso lleva días, una semana como máximo. Lo mismo ocurre con la espera de activos del artista. Los días se reducen a horas.”

La adopción de Unity UI Toolkit ha transformado sustancialmente el pipeline de IU de Mechanistry, acelerando el desarrollo de Timberborn a medida que avanzan hacia su muy esperada versión 1.0.

“En uGUI, crear un prototipo de trabajo tomaba uno, dos o tres días, dependiendo de la complejidad. Con UI Toolkit, podemos tener un prototipo de trabajo en cuestión de horas”.
PAWEŁ DUDA / MECHANISTRYProgrammer
“Desarrollar un juego en la realidad de Early Access exige una arquitectura escalable, modular y limpia. El UI Toolkit de Unity se alinea perfectamente con estos principios, facilitando el trabajo con interfaces en constante evolución”.
MARCIN WIERZCHOŚ / MECHANISTRYProgrammer
“Desde que cambiamos a UI Toolkit, estimar las tareas se ha vuelto mucho más simple. La eficiencia de nuestro equipo aumentó, ya que trabajan con una herramienta que es fácil de entender y ahora no tienen que luchar con conflictos de fusión".
EWA STILLER / MECHANISTRYSenior Producer
Castores caminando a través de un puente con madera en sus brazos
Cree interfaces de usuario eficientes

Autorizar e integrar IU en tiempo de ejecución con UI Toolkit. Personalice su Editor para mejorar la colaboración y aproveche la depuración eficiente para un mejor rendimiento, todo en una experiencia intuitiva inspirada en las tecnologías web para ayudarlo a crear IU más rápido.