Como a complexa UI de tempo de execução da Timberborn foi desenvolvida

A Mechanistry economizou tempo de produção considerável ao mudar para o Kit de ferramentas de IU e criou uma interface de usuário complexa para seu construtor de cidades baseado em castores.

Saiba mais sobre o design e a implementação da interface de usuário no Unity com o nosso guia prático gratuito. Baixe o e-book

Otimização do desenvolvimento de IU

Como uma pequena equipe com poucos recursos consegue criar uma interface do usuário complexa para a construção de cidades? Quando a Timberborn se tornou um sucesso de acesso antecipado no Steam, a Mechanistry precisou iterar rapidamente em IU intuitiva para uma base de jogadores em rápido crescimento. Ao mudar da uGUI para o Kit de ferramentas de IU, a empresa conseguiu acelerar a produção com código mais limpo e mais fácil de manter.

Escolhendo Unity

Com origem em desenvolvimento de software, o Mechanistry valoriza código limpo, fluxos de trabalho ágeis e ótimas experiências do usuário. É por isso que eles escolheram o Unity para criar o Timberborn. "Foi a escolha inteligente", diz o programador Paweł Duda. “Há muitos recursos da Web. A curva de aprendizado não é alta. E nossa equipe já conhece C#."

Os resultados

• Prototipagem e implementação de IU aceleradas, que agora levam horas em vez de dias

• Cresceu de vários conflitos de mesclagem a cada semana para zero

• Obteve classificação “extremamente positiva” no Steam em quase 18.000 avaliações

Desafiando os limites da uGUI

O mecanismo usou uGUI no início do desenvolvimento, mas os problemas surgiram à medida que a Timberborn se tornou mais complexa. Reajustar os ícones quebrou os layouts, reutilizar assets foi um desafio e, como o código não era legível pelo ser humano, ocorreram vários conflitos de mesclagem por semana. "Se duas pessoas trabalhavam no mesmo Prefab, geralmente era um problema", diz Paweł. "Alguns dos conflitos foram resolvidos automaticamente. Mas, caso contrário, tivemos que recriar o Prefab manualmente.”

Depois de ver o roteiro do kit de ferramentas de IU, a Mechanistry decidiu migrar para o novo sistema. Eles queriam aderir a uma solução feita pela Unity e, observando que o Kit de ferramentas de IU se inspira em tecnologias da Web, tinham certeza de que a transição seria tranquila para sua equipe.

Mudar para o Kit de ferramentas de IU

A equipe adotou uma abordagem pragmática à migração ao longo de vários meses. Primeiro, eles limparam sua arquitetura de código de IU e removeram os odores de código. Depois, eles recriaram todos os elementos de IU no Kit de ferramentas de IU e reformularam seus assets para obter o visual desejado.

“Mudar para o Kit de ferramentas de IU foi uma mudança de jogo”, explica Paweł. "Anteriormente, não tínhamos vontade de criar uma linda interface do usuário porque sabíamos que seria um grande incômodo. Agora, adicionamos coisas como dimensionamento de IU e menus ocultos ao jogo, e era muito mais fácil fazer do que com uGUI."

Como resolver conflitos de mesclagem

A Mechanistry observa que migrar para o Kit de ferramentas de IU praticamente eliminou conflitos de mesclagem, o que foi uma fonte significativa de lentidão no estúdio. "Se um conflito surgir, podemos vê-lo e saber instantaneamente como resolvê-lo", diz Paweł. "Todos podem trabalhar na IU ao mesmo tempo, até mesmo no mesmo elemento, e isso não é um problema."

O Kit de ferramentas de IU também permitiu que eles separassem a lógica do jogo e a lógica da IU, reduzindo ainda mais os conflitos. Agora a equipe pode iterar em diferentes partes da IU de maneira independente e testar componentes de forma isolada, resultando em menos builds quebradas. "Isso foi muito, muito importante para nós", acrescenta Paweł.

Depuração em tempo real

A UI adaptável e escalável da Timberborn oferece suporte a 12 idiomas atualmente. Mudar entre eles pode causar o desalinhamento de elementos da IU, o que, combinado com a complexidade geral da interface, a torna propensa a erros de design. Eles podem identificar e resolver esses problemas com rapidez e facilidade com o depurador Kit de ferramentas de IU.

O Kit de ferramentas de IU exibe uma janela com uma exibição ativa da hierarquia da IU. A Mechanistry pode selecionar qualquer elemento na hierarquia para inspecionar propriedades e estados e verificar se há erros de interface do usuário. "Isso nos permite inspecionar e depurar elementos da IU em tempo real", observa Paweł.

Personalizar o kit de ferramentas

A flexibilidade do Kit de ferramentas de IU permite que a Mechanistry o ajuste às suas necessidades. "Nós temos nosso próprio sistema que nos permite adicionar imagens e ícones em um menu suspenso", diz Paweł. "Nós também temos nossas próprias dicas de ferramentas e controles localizados. Basta colocar um atributo no UXML, que 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 são pilhas, permitindo que eles manipulem facilmente as posições de controle da IU e acompanhem o que é visível na tela, além de uma fatia para fundos, botões, rótulos e muito mais.

Vindo de dias para horas

Com o Kit de ferramentas de IU, o processo de design do Mechanistry é mais limpo e direto, e eles podem adicionar refinamento muito mais rápido. "Isso exige muito trabalho e mudança, o que pode levar semanas", explica Paweł. "Agora, o processo leva dias, no máximo uma semana. O mesmo vale para a espera de assets do artista. Os dias são reduzidos para horas."

A adoção do Kit de ferramentas Unity UI transformou substancialmente o pipeline de IU da Mechanistry, acelerando o desenvolvimento da Timberborn à medida que mudam para sua muito aguardada versão 1.0.

Crie e integre a UI de tempo de execução com o Kit de ferramentas de IU. Personalize seu Editor para melhorar a colaboração e aproveite a depuração eficiente para melhorar o desempenho — tudo isso em uma experiência intuitiva inspirada em tecnologias da Web para ajudar você a criar interface do usuário mais rápida.