O que você está procurando?
Hero background image
Case study
Como a complexa interface de usuário de tempo de execução do Timberborn foi criada
A Mechanistry economizou muito tempo de produção ao mudar para o UI Toolkit e criou uma interface de usuário complexa para seu construtor de cidades baseado em castores.
Aprenda sobre o design e a implementação da interface do usuário no Unity com nosso guia prático gratuito.
Baixe o e-book

Simplificação do desenvolvimento da interface do usuário

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.

O desafio

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

Plataformas

PC, MacOS

Membros da equipe

13

Local

Distributed, Poland

trailer da timberborn

Escolhendo a unidade

Vindo de uma experiência em desenvolvimento de software, a Mechanistry valoriza o código limpo, os fluxos de trabalho ágeis e as excelentes experiências do usuário. É por isso que eles escolheram o Unity para criar Timberborn. "Foi a escolha inteligente", diz o programador Paweł Duda. "Há muitos recursos da Web. A curva de aprendizado não é íngreme. E nossa equipe está familiarizada com o C#."

resultados

Os resultados

  • Prototipagem e implementação acelerada da interface do usuário, que agora leva horas em vez de dias
  • Passamos de vários conflitos de mesclagem por semana para zero
  • Obteve a classificação "extremamente positiva" no Steam em quase 18.000 avaliações
Ultrapassando os limites da uGUI
Ultrapassando os limites da uGUI

O Mechanistry usou a uGUI no início do desenvolvimento, mas surgiram problemas à medida que o Timberborn se tornou mais complexo. O realinhamento de ícones quebrou layouts, a reutilização de ativos foi um desafio e, como o código não era legível por humanos, havia vários conflitos de mesclagem por semana. "Se duas pessoas trabalhassem no mesmo pré-fabricado, isso geralmente era um problema", diz Paweł. "Alguns dos conflitos foram resolvidos automaticamente. Mas, se não estivessem, tínhamos que recriar o Prefab manualmente."

Depois de ver o roteiro doUI Toolkit, a Mechanistry decidiu migrar para o novo sistema. Eles queriam manter uma solução criada pela Unity e, observando que o UI Toolkit se inspira em tecnologias da Web, estavam confiantes de que a transição seria tranquila para sua equipe.

Interface de usuário Timberborn com muitas janelas e controles no jogo
Mudança para o kit de ferramentas da interface do usuário

A equipe adotou uma abordagem pragmática para a migração ao longo de vários meses. Primeiro, eles limparam a arquitetura do código da interface do usuário e removeram códigos mal cheirosos. Em seguida, eles recriaram todos os elementos da interface do usuário no UI Toolkit e redesenharam os ativos para obter a aparência desejada.

"Mudar para o UI Toolkit foi um divisor de águas", explica Paweł. "Antes, relutávamos em criar uma bela interface do usuário porque sabíamos que isso seria um grande incômodo. Agora adicionamos coisas como dimensionamento da interface do usuário e menus ocultos ao jogo, e foi muito mais fácil fazer isso do que com o uGUI."

District Crossing em Timberborn com vários castores
Resolução de conflitos de mesclagem

Mechanistry observa que a mudança para o UI Toolkit praticamente eliminou os conflitos de mesclagem, que eram uma fonte significativa de lentidão no estúdio. "Se surgir um conflito, podemos vê-lo e saber imediatamente como resolvê-lo", diz Paweł. "Todos podem trabalhar na interface do usuário ao mesmo tempo, até mesmo no mesmo elemento, e isso não é um problema."

OUI Toolkit também permitiu que eles separassem a lógica do jogo da lógica da interface do usuário, reduzindo ainda mais os conflitos. Agora, a equipe pode iterar em diferentes partes da interface do usuário de forma independente e testar os componentes isoladamente, o que resulta em menos compilações quebradas. "Isso foi muito, muito importante para nós", acrescenta Paweł.

Vista aérea de um labirinto de sebes em Timberborn
Depuração em tempo real

A interface de usuário adaptável e dimensionável do Timberborn suporta atualmente 12 idiomas. Alternar entre eles pode fazer com que os elementos da interface do usuário fiquem desalinhados, o que, combinado com a complexidade geral da interface, a torna propensa a erros de design. Eles podem identificar e resolver esses problemas de forma rápida e fácil com o depurador doUI Toolkit.

OUI Toolkit exibe uma janela com uma visualização ao vivo da hierarquia da interface do usuário. O Mechanistry pode selecionar qualquer elemento na hierarquia para inspecionar propriedades e estados e verificar se há erros de IU. "Isso nos permite inspecionar e depurar elementos da interface do usuário em tempo real", comenta Paweł.

Dropdown com ícones em Timberborn UI
Personalização do kit de ferramentas

A flexibilidade doUI Toolkit permite que a Mechanistry o ajuste às suas necessidades. "Temos nosso próprio sistema que nos permite adicionar imagens e ícones em um menu suspenso", diz Paweł. "Também temos nossas próprias dicas de ferramentas e controles localizados. Apenas colocamos um atributo no UXML, e isso nos permite localizar o controle automaticamente."

Por exemplo, a equipe tem um controle que mostra Sprites localizados no idioma apropriado usando tags. Eles criaram uma exibição que mostra como os painéis se empilham, permitindo que eles manipulem facilmente as posições de controle da interface do usuário e, ao mesmo tempo, mantenham o controle do que está visível na tela, além de uma fatia de 9 para planos de fundo, botões, rótulos e muito mais.

Enorme colônia de TI em Timberborn
Passando de dias para horas

Com o UI Toolkit, o processo de design da Mechanistry é mais limpo e direto, e eles podem dar um acabamento muito mais rápido. Isso exigia muitos ajustes e mudanças, que podiam levar semanas", explica Paweł. "Agora, o processo leva dias, no máximo uma semana. O mesmo acontece com a espera pelos ativos do artista. Os dias são reduzidos a horas."

A adoção do Unity UI Toolkit transformou substancialmente o pipeline de UI da Mechanistry, acelerando o desenvolvimento da Timberborn à medida que eles avançam para o tão esperado lançamento 1.0.

"No uGUI, a criação de um protótipo funcional levava um, dois ou três dias, dependendo da complexidade. Com o UI Toolkit, podemos ter um protótipo funcional em questão de horas."
PAWEŁ DUDA / MECHANISTRYProgrammer
"O desenvolvimento de um jogo na realidade do Acesso Antecipado exige uma arquitetura escalável, modular e limpa. O kit de ferramentas de interface do usuário da Unity se alinha perfeitamente a esses princípios, facilitando o trabalho com interfaces em constante evolução."
MARCIN WIERZCHOŚ / MECHANISTRYProgrammer
"Desde que mudamos para o UI Toolkit, a estimativa de tarefas se tornou muito mais simples. A eficiência da nossa equipe aumentou, pois eles trabalham com uma ferramenta fácil de entender e agora não precisam lutar com conflitos de mesclagem."
EWA STILLER / MECHANISTRYSenior Producer
Castores atravessando uma ponte com madeira em seus braços
Crie interfaces de usuário com bom desempenho

Autor e integrador de UI em tempo de execução com o UI Toolkit. Personalize seu Editor para melhorar a colaboração e aproveite a depuração eficiente para obter melhor desempenho - tudo em uma experiência intuitiva inspirada em tecnologias da Web para ajudá-lo a criar a interface do usuário com mais rapidez.