UI Toolkit em tempo de execução: Obtenha a análise

UI Toolkit é uma coleção de recursos, funcionalidades e ferramentas feitas para desenvolver interfaces de usuário e extensões do Editor. Primeiramente introduzido como Elementos de UI, o UI Toolkit oferece uma estrutura de UI em modo retido para facilitar o desenvolvimento de UI personalizada para extensões do Editor Unity.

Disponível na versão mais recente do Unity, o UI Toolkit suporta a criação de UI em tempo de execução através de uma experiência de autoria familiar e intuitiva, inspirada em tecnologias web. Este artigo examina a especificidade de suas capacidades 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 UI.

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 Editor Unity, além de recursos fundamentais subjacentes, combinados com os recursos incluídos em nossos lançamentos Unity 2021.1 e Unity 2021.2 Tech Stream (com mais seis meses de polimento 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 UI.

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

O UI Toolkit previne tais conflitos de mesclagem fazendo com que o artista trabalhe nos arquivos UXML e USS enquanto o C# lida com toda a lógica. Por exemplo, o manuseio 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 mesclagem, mas simplifica futuras alterações de estilo. Por exemplo, se todas as fontes do projeto de repente precisassem ser alteradas, você não precisaria passar por cada ativo, um por um, para editar as configurações de texto. Isso evita trabalhos tediosos que podem levar a problemas de supervisão – e quanto maior o jogo, mais complicado isso se torna.

Com o UI Toolkit, as Configurações do Painel contêm todas as configurações de texto. Portanto, para mudar as fontes sob um Documento UI, você só precisa editar aquelas Configurações do Painel. Embora scripts do Editor possam ajudar de forma semelhante com 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, Construtor de UI (Janela > UI Toolkit > Construtor de UI) é uma ferramenta visual que ajuda a criar e editar interfaces sem escrever código. Isso é útil para artistas e designers, pois permite que eles visualizem a UI enquanto está sendo construída.

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

Os arquivos UXML são comparáveis aos arquivos web HTML. Eles representam elementos visuais e contêm a hierarquia da UI. Crie um documento UXML via Assets > Criar > UI Toolkit > Documento UI. Em seguida, use Construtor de UI para visualizar e trabalhar no UXML recém-criado.

Note, 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, utilize um único Documento UI e carregue todos os elementos UXML nele. Você pode visualizar a UI com Depurador do UI Toolkit em Janelas > UI Toolkit > Depurador.

Para ajudá-lo a começar, dê uma olhada em alguns exemplos de Elementos UXML de Janelas > UI Toolkit > Amostras.

Graças ao Construtor de UI, arquivos UXML podem ser criados, visualizados e testados sem iniciar o jogo. Basta arrastar e soltar controles de UI (padrão ou feitos pelo usuário) na hierarquia a partir da Biblioteca de Criadores de UI painel, e combinar vários arquivos UXML para criar a UI final.

Digamos que temos uma UI composta por três elementos:

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

O pop-up "Você ganhou" exibirá Saúde, Pontuação, bem como um botão de Reiniciar.

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

Combinar UXML também pode facilitar a visualização de objetos editados. Ao ativar a Lista de Classes opção dentro da hierarquia do Criador de UI, 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 Documento de UI.

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 UI dentro da cena.

O Ativo de Configurações do Painel (Ativos > Criar > UI Toolkit > Ativo de Configurações do Painel) define como o UXML será instanciado e visualizado dentro do jogo. É possível ter vários Ativos de Configurações do Painel para habilitar diferentes estilos para as UIs. Por exemplo, empregar certas Configurações do Painel para o HUD e outras para o Minimap faz sentido, pois essas são UIs muito diferentes com necessidades distintas.

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

O UI Builder não é destinado à gestão de eventos, nem o documento UXML. Para lidar com 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 de Elemento usa a arquitetura Flexbox por padrão. Isso garante que a maioria dos layouts seja responsiva ao tamanho do contêiner ou da tela. Aplique-o a uma Árvore de Elementos Visuais com dois ou mais elementos, e então defina como eles se alinham na árvore.

Colocar um elemento em Posicionamento Absoluto significa que ele estará situado em relação ao posicionamento de seus pais, e não afetará nem será afetado por outras posições.

Para as configurações de Flex e Alinhar configurações, use esta hierarquia simples como exemplo:

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

• Base: Isso se refere ao tamanho padrão do item, antes de qualquer operação de Encolher (razão de encolhimento se o pai não tiver tamanho restante) ou Crescer (razão de crescimento do elemento se houver tamanho restante no pai).
• Direção (Linha e Coluna): Use isso para criar comportamentos semelhantes ao Grupo de Layout Vertical e Grupo de Layout Horizontal do UGUI, respectivamente.

• Envolver: Determine quais elementos não cabem e ignore-os, caso contrário, suba ou desça em relação aos 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 mais informações sobre o posicionamento de Elementos Visuais, consulte a documentação do Motor de Layout do UI Toolkit.

A estilização é onde o UI Toolkit exibe todo o seu poder. Adicionar Estilo a elementos visuais é feito através de arquivos USS (Ativos > Criar > UI Toolkit > Folha de Estilo). Eles são o equivalente da Unity aos arquivos CSS da web e usam o mesmo formato baseado em regras.

Observe que arquivos USS criados pelo usuário não são obrigatórios para o funcionamento da interface do usuário. Estilos de Tempo de Execução e do Editor são fornecidos por padrão, mas criar USS personalizados permite que você expanda o que já foi fornecido ou até mesmo crie estilização do zero.

Você pode adicionar Seletores de Estilo através do Inspetor de Folha de Estilo do UI Builder painel e depois editá-los usando código ou o UI Builder.

Seletores de Estilo USS no UI Builder

Correspondendo a Classe adicionada no Inspetor

Na captura de tela acima, o seletor .RedButton é adicionado a um botão. O seletor, portanto, aparece ao lado do .unity-text-element e .unity-button classes que todos os botões têm automaticamente.

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

.RedButton { background-color: red; }

Assim como no 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 ambas as classes .RedButton e .BlueText terão texto azul. Quando combinado com o trecho anterior, o botão também terá um fundo vermelho.

Assim como os estilos CSS, 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 hover terão seu fundo alterado para vermelho. Para visualizar o estilo de hover e ver como os efeitos ficam, clique em Visualizar na Interface do Usuário barra de ferramentas.

Agora que conhecemos o básico do UI Toolkit, vamos construir um exemplo que compara a criação de interfaces usando UGUI vs UI Toolkit. Nosso objetivo é construir um menu simples, incluindo hover do mouse com os seguintes dois efeitos:

• 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:

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

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

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

Com Popup Alinhar definido como Centro, e Botões Direção Flex definida como Linha, nosso pop-up atual do Kit de Ferramentas de UI se parece com isso:

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

Para ver onde a mágica do Kit de Ferramentas de UI 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);
}

Por favor, note que há precedência de seletor em vigor aqui. Por exemplo, um estilo escrito diretamente no UXML irá substituir o que está nos arquivos USS. Aqui, a largura e a altura dos elementos são adicionadas ao PopupStyle.uss, mas também poderiam ser editadas diretamente no Construtor de UI, 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: UGUI exigiria que editássemos manualmente todas as cores de todos os componentes, uma por uma. Considere nosso exemplo, no entanto. Embora apenas o botão Quit seja um Prefab, poderíamos torná-los todos Prefabs, para substituí-los uma vez localmente. Então, à medida que são editados, qualquer mudança futura de cor no Prefab seria ignorada pelo menu.

Com o Kit de Ferramentas de UI, só precisamos criar um NovoEstilo.uss duplicando as tags do PopupStyle.uss, e substituir PopupStyle.uss por NovoEstilo.uss.

Uma vez que o arquivo UXML é criado e estilizado, o último passo é adicioná-lo à cena real. Para fazer isso, substitua o Scene Canvas elemento e crie um GameObject vazio com um UI Document elemento. Preencha-o com o popup.uxml e Configurações do Painel arquivos, e pressione play para testar a nova UI.

Uma vez que você teve a chance de experimentar o UI Toolkit, por favor, nos avise o que você acha nos fóruns de UI, ou confira a documentação oficial para mais detalhes.

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

Este artigo é escrito por Marina Joffrineau na equipe Produções do Unity Studio, composta pelos desenvolvedores de software mais experientes da Unity. A equipe de Produções do Unity Studio oferece consultoria e soluções de desenvolvimento personalizadas para estúdios de jogos de todos os tamanhos. Para saber mais sobre as Produções do Unity Studio e como podemos ajudá-lo a alcançar seus objetivos, visite nosso site.