Kit de ferramentas de interface do usuário em tempo de execução: Veja o detalhamento

O UI Toolkit é uma coleção de recursos e ferramentas feitos para desenvolver interfaces de usuário e extensões do Editor. Apresentado inicialmente como UI Elements, o UI Toolkit oferece uma estrutura de UI de modo retido para facilitar o desenvolvimento de UI personalizada para extensões do Unity Editor.

Disponível na versão mais recente do Unity, o UI Toolkit oferece suporte à criação de interface de usuário em tempo de execução por meio de uma experiência de criação familiar e intuitiva, inspirada em tecnologias da web. Este artigo examina a especificidade de seus recursos e compartilha dicas para começar a usar o UI Toolkit em tempo de execução como uma alternativa ao UGUI.

Confira este manual para uma comparação detalhada entre sistemas de interface do usuário.

O Unity 2021 LTS já está disponível para download e uso. Este lançamento representa mais de um ano de desenvolvimento focado em todo o Unity Editor, além dos recursos básicos subjacentes, combinados com os recursos incluídos em nossos lançamentos Unity 2021.1 e Unity 2021.2 Tech Stream (com seis meses adicionais de aprimoramento de qualidade).

Para começar, baixe a versão mais recente do Unity no Unity Hub.

Vamos esclarecer como o UI Toolkit pode garantir fluxos de trabalho mais suaves ao criar a IU.

Criar interfaces de usuário em colaboração com artistas pode ser uma tarefa complexa. Enquanto o artista edita o Canvas para adicionar cores e material, o desenvolvedor adiciona scripts, comportamentos e ouvintes OnClick. Depois, quando a fusão ocorre, conflitos de fusão podem surgir e levar a problemas que exigem resolução rápida.

O UI Toolkit evita esses conflitos de mesclagem fazendo com que o artista trabalhe nos arquivos UXML e USS enquanto o C# cuida de toda a lógica. Por exemplo, o tratamento de botões é feito apenas com C#, que consulta o botão usando seu nome e adiciona lógica sem editar nenhum arquivo UXML ou USS.

Esse processo não apenas facilita a fusão como também simplifica futuras mudanças de estilo. Por exemplo, se todas as fontes do projeto precisassem ser alteradas repentinamente, você não precisaria passar por cada ativo, um por um, para editar as configurações de texto. Isso evita trabalho tedioso que pode levar a problemas de supervisão – e quanto maior o jogo, mais complicado ele se torna.

Com o UI Toolkit, as Configurações do Painel contêm todas as configurações de texto. Então, para alterar as fontes em um Documento de IU, você só precisa editar as Configurações do Painel. Embora os scripts do Editor possam ajudar de forma semelhante com o UGUI, a estrutura do UI Toolkit lida automaticamente com esse processo.

Um Elemento Visual é a classe base de cada elemento do UI Toolkit: botões, imagens, texto, etc. Você pode pensar nisso como o GameObject do UI Toolkit. Enquanto isso, o UI Builder (Window > UI Toolkit > UI Builder) é uma ferramenta visual que ajuda a criar e editar interfaces sem escrever código. Isso é útil tanto para artistas quanto para designers, pois permite que eles visualizem a IU enquanto ela está sendo criada.

Como a principal ferramenta para pessoas já familiarizadas com tecnologias da web, o UI Toolkit também melhora a colaboração entre artistas e desenvolvedores ao separar lógica e estilo para refinar a organização e evitar conflitos de arquivos. Enquanto o UI Builder cuida das posições, do estilo e do design dos elementos, o código pode ser manipulado em uma seção distinta do projeto para consultar as partes do UXML necessárias e conectar a lógica a elas.

Arquivos UXML são comparáveis a arquivos web HTML. Eles representam elementos visuais e contêm a hierarquia da interface do usuário. Crie um documento UXML em Ativos > Criar > Kit de ferramentas de interface do usuário > Documento de interface do usuário. Em seguida, use o UI Builder para visualizar e trabalhar no UXML recém-criado.

Observe, no entanto, que um arquivo UXML não deve ser tratado como um GameObject, mas sim como uma árvore de elementos visuais. Para simplificar a hierarquia, aproveite um único documento de interface do usuário e carregue todos os elementos UXML nele. Você pode visualizar a interface do usuário com o UI Toolkit Debugger em Windows > UI Toolkit > Debugger.

Para ajudar você a começar, dê uma olhada em alguns exemplos de elementos UXML em Windows > UI Toolkit > Samples.

Graças ao UI Builder, arquivos UXML podem ser criados, visualizados e testados sem iniciar o jogo. Basta arrastar e soltar controles de IU (padrão ou criados pelo usuário) na hierarquia do painelBiblioteca do UI Builder e combinar vários arquivos UXML para criar a IU final.

Digamos que temos uma interface de usuário composta de três elementos:

• Saúde
• Pontuação
• Pop-up “Você ganhou”

O pop-up “Você venceu” exibirá Saúde, Pontuação e um botão Reiniciar.

Cada elemento é usado em um painel de interface de usuário diferente do jogo, pois eles fazem parte de arquivos UXML separados com popup.uxml – uma combinação de health.uxml e score.uxml mais o botão Reiniciar. Dessa forma, a lógica do código que gerencia a pontuação e a integridade (score.cs e health.cs) é independente da hierarquia. Isso significa que health.cs sempre atualizará os valores health.uxml, independentemente de a interface do usuário ser exibida sozinha na tela ou dentro de outro pop-up.

A combinação de UXML também pode facilitar a visualização de objetos editados. Ao ativar a opção Lista de classes na hierarquia do UI Builder, você pode ver o que está impactando o objeto à primeira vista e usar seletores para manter o estilo organizado:

Outro benefício diz respeito à hierarquia da Cena. Em vez de ter um único Canvas com dezenas de GameObjects, o UI Toolkit precisa apenas de um arquivo UXML vinculado a um UI Document.

vs

Esse fluxo de trabalho é particularmente vantajoso para equipes maiores. Em vez de trabalhar na mesma cena, com o possível risco de problemas de mesclagem, cada membro da equipe pode trabalhar em seus próprios arquivos UXML, que são então adicionados a um único documento de interface do usuário dentro da cena.

O recurso de configurações do painel (Ativos > Criar > Kit de ferramentas de interface do usuário > Recurso de configurações do painel) define como o UXML será instanciado e visualizado no jogo. É possível ter vários ativos de configurações do painel para habilitar estilos diferentes para as interfaces de usuário. Por exemplo, faz sentido empregar certas configurações de painel para o HUD e outras para o minimapa, pois essas são interfaces de usuário muito diferentes, com necessidades distintas.

As configurações do painel podem ser vistas como um UGUI Canvas + Canvas Scaler com opções adicionais, como configurações de texto, para que todo o texto dentro do painel use a mesma configuração base. Isso evita tempo gasto redefinindo manualmente cada fonte, mas é claro que as fontes ainda podem ser substituídas dentro dos Documentos de IU individuais, conforme necessário.

O UI Builder não foi criado para gerenciamento de eventos, nem o documento UXML. Para manipular um clique de botão ou qualquer outro evento, crie um script C# e vincule-o ao UXML.

public class UIEventHandler : MonoBehaviour
{
   [SerializeField]
   private UIDocument m_UIDocument;
 
   private Label m_Label;
   private int m_ButtonClickCount = 0;
   private Toggle m_Toggle;
   private Button m_Button;
 
   public void Start()
   {
       var rootElement = m_UIDocument.rootVisualElement;
 
       // This searches for the VisualElement Button named “EventButton”
       // rootElement.Query<> and rootElement.Q<> can both be used
       m_Button = rootElement.Q<Button>("EventButton");
 
       // Elements with no values like Buttons can register callBacks
// with clickable.clicked
       m_Button.clickable.clicked += OnButtonClicked;
 
       // This searches for the VisualElement Toggle named “ColorToggle”
       m_Toggle = rootElement.Query<Toggle>("ColorToggle");
 
       // Elements with changing values: toggle, TextField, etc... 
// implement the INotifyValueChanged interface,
       // meaning they use RegisterValueChangedCallback and 
// UnRegisterValueChangedCallback
       m_Toggle.RegisterValueChangedCallback(OnToggleValueChanged);
 
       // Cache the reference to the Label since we will access it repeatedly.
       // This avoids the relatively costly VisualElement search each time we update
       // the label.
       m_Label = rootElement.Q<Label>("IncrementLabel");
       m_Label.text = m_ButtonClickCount.ToString();
   }
 
   private void OnDestroy()
   {
       m_Button.clickable.clicked -= OnClicked;
       m_Toggle.UnregisterValueChangedCallback(OnToggleValueChanged);
   }
 
   private void OnButtonClicked()
   {
       m_ButtonClickCount++;
       m_Label.text = m_ButtonClickCount.ToString();
   }
 
   private void OnToggleValueChanged(ChangeEvent<bool> evt)
   {
       Debug.Log("New toggle value is: " + evt.newValue);
   }
}

O posicionamento dos elementos usa a arquitetura Flexbox por padrão. Isso garante que a maioria dos layouts sejam responsivos ao tamanho do contêiner ou da tela. Aplique-o a uma Árvore de Elementos Visuais com dois ou mais elementos e defina como eles se alinham na árvore.

Colocar um elemento no posicionamento Absoluto significa que ele será situado em relação ao posicionamento de seus pais e não afetará ou será afetado por nenhuma outra posição.

Para as configuraçõesFlex e Align , use esta hierarquia simples como exemplo:

Edite as seguintes configurações usando o UI Builder Inspector:

• Base: Isso se refere ao tamanho padrão do item, antes de qualquer operação Shink (diminuição da taxa de redução se o pai não tiver mais tamanho) ou Grow (aumento da taxa do elemento se houver mais tamanho no pai).
• Direção (Linha e Coluna): Use isso para criar comportamentos semelhantes ao Grupo de Layout Vertical e ao Grupo de Layout Horizontal da UGUI, respectivamente.

• Enrolar: Determine quais elementos não se encaixam e ignore-os; caso contrário, vá para cima ou para baixo dos elementos anteriores.

• Alinhar itens: Empacote os elementos nas posições selecionadas usando seu tamanho mínimo.

• Justificar conteúdo: Determine o espaçamento entre os elementos ao longo do eixo principal.

Para obter mais informações sobre o posicionamento do elemento visual, consulte a documentação do UI Toolkit Layout Engine.

O estilo é onde o UI Toolkit exibe todo o seu poder. Adicionar estilo aos elementos visuais é feito por meio de arquivosUSS (Assets > Create > UI Toolkit > StyleSheet). Eles são o equivalente do Unity aos arquivos CSS da web e usam o mesmo formato baseado em regras.

Observe que os arquivos USS criados pelo usuário não são obrigatórios para que a interface do usuário funcione. Os estilos de tempo de execução e editor são fornecidos por padrão, mas criar USS personalizado permite que você expanda o que já está fornecido ou até mesmo crie estilos do zero.

Você pode adicionar seletores de estilo por meio do painel Folha de Estilo do Inspetor do UI Builder e editá-los usando código ou o UI Builder.

Seletores de estilo USS no UI Builder

Correspondência de classe adicionada no Inspetor

Na captura de tela acima, o seletor .RedButton é adicionado a um botão. O seletor aparece então junto com as classes integradas .unity-text-element e .unity-button que todos os botões possuem automaticamente.

Abaixo está um exemplo de uma regra USS que define a cor de fundo de todos os elementos com a classe .RedButton como vermelho. A primeira linha da regra é um seletor que usa o nome da classe seguido por uma lista de estilos a serem aplicados.

.RedButton { background-color: red; }

Assim como em CSS, as classes podem ser combinadas para restringir ainda mais o escopo do seletor de uma regra:

.RedButton.BlueText { color: blue; }

Neste exemplo, apenas objetos com as classes .RedButton e .BlueText terão texto azul. Quando combinado com o snippet anterior, o botão também terá um fundo vermelho.

Assim como os estilos CSS, os arquivos USS podem ser usados para substituir a aparência de objetos com base em seu estado:

.unity-button:hover { background-color: red; }

Neste exemplo, todos os botões que estão no estado de foco terão o fundo alterado para vermelho. Para visualizar o estilo do hover e ver como ficam os efeitos, clique em Visualizar na barra de ferramentasdo UI Builder .

Agora que conhecemos os conceitos básicos do UI Toolkit, vamos criar um exemplo que compara a criação de interfaces usando o UGUI e o UI Toolkit. Nosso objetivo é criar um menu simples, incluindo o movimento do mouse com os dois efeitos a seguir:

• Mudança na cor de fundo dos botões
• Mudança na cor do texto dos botões

Para criar este menu com UGUI, configure a seguinte hierarquia:

Também precisamos adicionar alguns componentes extras a alguns objetos:

• O menu tem uma imagem de fundo e precisa de ancoragem para alinhamento.
• Os botões devem ser fixados corretamente para que fiquem devidamente alinhados.
• Os botões Reiniciar e Sair requerem:
• Um script para alterar dinamicamente a cor do texto ao passar o mouse.
• Configurações do componente do botão (editadas no Editor) para alterar a cor de fundo.

Neste exemplo, Quit é um Prefab que define um botão vermelho.

Agora, para criar o menu com o UI Builder, comece com uma hierarquia semelhante:

Com o Popup Align definido como Centere o Buttons Flex Direction definido como Row, nosso pop-up atual do UI Toolkit fica assim:

Observe que o botão Sair está vermelho, pois está usando o componente QuitButton.uxml, um equivalente ao botão Sair Prefab.

Para ver onde a mágica do UI Toolkit realmente acontece, adicione um PopupStyle.uss com um monte de regras e…

.background {
   background-image: url('/Assets/Assets/OptionsMenu.png#OptionsMenu');
   width: 500px;
   height: 300px;
}
 
.title {
   font-size: 32px;
   color: rgb(255, 255, 255);
}
 
.unity-base-field__input {
   background-color: rgba(0, 0, 0, 0);
   background-image: url('/Assets/Assets/OptionsMenu9Slice.png#OptionsMenu9Slice_2');
   width: 300px;
   height: 75px;
   font-size: 20px;
   color: rgba(255, 255, 255, 0.5);
   -unity-text-align: middle-center;
}
 
.unity-button {
   color: white;
   background-color: rgba(0, 0, 0, 0);
   background-image: url('/Assets/Assets/StartMenu.png#StartMenu_ButtonDefault');
   width: 160px;
   height: 30px;
   -unity-slice-bottom: 1;
}
 
.unity-button:hover {
   color: rgb(0, 21, 255);
}
 
#Restart {
   -unity-background-image-tint-color: rgb(112, 202, 125);
}

Observe que há precedência de seletor aqui. Por exemplo, um estilo escrito diretamente no UXML substituirá aquele nos arquivos USS. Aqui, a largura e a altura dos elementos são adicionadas ao PopupStyle.uss, mas também podem ser editadas diretamente no UI Builder e substituir o PopupStyle.uss. As regras de precedência podem ser encontradas aqui.

Então digamos que queremos mudar todas as cores que aparecem no menu, mas não no resto do jogo: O UGUI exigiria que editássemos manualmente todas as cores de todos os componentes, um de cada vez. Considere, no entanto, o nosso exemplo. Embora apenas o botão Sair seja um Prefab, poderíamos torná-los todos Prefabs para substituí-los localmente. Então, conforme forem editadas, qualquer alteração de cor futura no Prefab será ignorada pelo menu.

Com o UI Toolkit, precisamos apenas criar um NewStyle.uss duplicando as tags PopupStyle.uss e substituir PopupStyle.uss por NewStyle.uss.

Depois que o arquivo UXML é criado e estilizado, o último passo é adicioná-lo à cena real. Para fazer isso, substitua o elemento Scene Canvas e crie um GameObject vazio com um elementoUI Document . Preencha-o com os arquivospopup.uxml e Panel Settings e pressione play para testar a nova interface do usuário.

Depois de experimentar o UI Toolkit, conte-nos o que você achou nos fóruns do UIou confira a documentação oficial para mais detalhes.

Por fim, você pode acompanhar as últimas atualizações visitando nosso novo Roteiro da Plataforma Unity. Por favor, compartilhe seu feedback diretamente com a equipe do produto – estamos ansiosos para ouvir de você!

Este artigo foi escrito por Marina Joffrineau, da equipe Accelerate Solutions , composta pelos desenvolvedores de software mais experientes da Unity. A equipe da Accelerate Solutions oferece consultoria e soluções de desenvolvimento personalizadas para estúdios de jogos de todos os tamanhos. Para saber mais sobre a Unity Accelerate Solutions e como podemos ajudar você a atingir seus objetivos, visite nosso site.