Se você desenvolve jogos ou ferramentas na Unity, com certeza já teve que lidar com a criação de interfaces de usuário (UI). Por muito tempo, o UGUI (GameObject-based) e o IMGUI (via código) foram as ferramentas padrão. No entanto, a Unity introduziu o UI Toolkit, um sistema moderno inspirado fortemente nos padrões de desenvolvimento web (HTML e CSS).
O coração desse novo ecossistema é o UI Document. Neste artigo, vamos entender como ele funciona e explorar seus dois pilares fundamentais: o UXML e o USS, além de aprender como criar regras de estilização poderosas para os seus projetos.
O que é o UI Document?
O UI Document é um componente da Unity que serve como a “ponte” entre o seu layout de interface e a cena do jogo. Ele carrega um arquivo visual (UXML) e o renderiza na tela.
Ao contrário do UGUI, onde cada botão ou texto é um GameObject na sua hierarquia, o UI Toolkit organiza tudo em uma estrutura de árvore interna chamada Visual Tree. Isso melhora drasticamente a performance e mantém a sua hierarquia da cena limpa.
Os Dois Pilares: UXML e USS
Para criar interfaces com o UI Toolkit, nós separamos a estrutura da aparência. É aqui que entram o UXML e o USS.
1. UXML (User Interface Extensible Markup Language)
O UXML é o equivalente ao HTML do desenvolvimento web. Ele define a estrutura e a hierarquia da sua interface.
- Ele armazena quais elementos existem na tela (Botões, Labels, Imagens, Containers).
- Pode ser editado visualmente através do UI Builder na Unity ou diretamente via código (XML).
2. USS (Unity Style Sheets)
O USS é o equivalente ao CSS. Ele define a aparência dos elementos contidos no UXML.
- Responsável por cores, fontes, margens, alinhamentos (Flexbox) e tamanhos.
- A grande vantagem é a reutilização: você pode aplicar o mesmo estilo USS a dezenas de botões diferentes. Se precisar mudar a cor do botão do jogo inteiro, muda apenas em um arquivo USS.
Estilização no USS: Tipos de Regras que Você Pode Criar
Para aplicar estilos aos elementos da sua interface, o USS utiliza Seletores. Eles dizem à Unity quem deve receber aquela estilização. Abaixo, estão os tipos de regras mais importantes que você pode criar:
A. Seletores de Classe (Class Selectors)
É a forma mais comum e recomendada de estilizar. Você cria uma classe no USS e a atribui a quantos elementos quiser no UXML.
- Sintaxe: Começa com um ponto (
.).
CSS
/* No arquivo USS */
.botao-menu {
background-color: #2196F3;
border-radius: 5px;
color: white;
padding: 10px;
}
B. Seletores de Tipo (Type Selectors)
Afetam todos os elementos de um determinado tipo de componente na interface. Use com cuidado, pois ele redefine o padrão do componente.
- Sintaxe: O próprio nome do componente.
CSS
/* Todos os botões da interface receberão esse estilo automaticamente */
Button {
font-size: 18px;
font-weight: bold;
}
C. Seletores de Nome/ID (Name Selectors)
Utilizado para estilizar um elemento único e específico da sua interface.
- Sintaxe: Começa com a hashtag (
#).
CSS
/* Afeta apenas o elemento que tem o nome "titulo-principal" */
#titulo-principal {
font-size: 32px;
color: #FFD700;
unity-text-align: middle-center;
}
D. Pseudo-estados (Pseudo-states)
Permitem mudar o visual do elemento dependendo da interação do jogador (ex: passar o mouse por cima, clicar).
- Sintaxe:
:hover,:active,:checked,:focus.
CSS
/* Quando o mouse estiver sobre o botão */
.botao-menu:hover {
background-color: #0B7BDA;
}
/* Quando o botão for clicado */
.botao-menu:active {
background-color: #0056B3;
}
Regras de Associação e Herança no USS
Além dos seletores básicos, você pode criar regras combinadas para ter um controle muito mais refinado do seu layout:
- Seletores Múltiplos: Aplica o mesmo estilo para regras diferentes separando por vírgula.CSS
.botao-confirmar, .botao-cancelar { margin: 5px; } - Seletores de Descendência: Aplica o estilo a um elemento que está dentro de outro.CSS
/* Aplica o estilo apenas em Labels que estão dentro de um container do tipo "Inventario" */ .inventario Label { color: #AAAAAA; }
Por que usar essa abordagem no seu fluxo de trabalho?
- Separação de Conceitos: Designers podem focar no arquivo USS (identidade visual) enquanto programadores focam na lógica em C# referenciando os elementos do UXML.
- Performance: Menos GameObjects na cena significa menos overhead de atualização da Unity, resultando em interfaces mais fluidas.
- Flexbox Nativo: O UI Toolkit utiliza o sistema de Layout Flexbox, tornando a criação de interfaces responsivas (que se adaptam a diferentes resoluções de tela) muito mais simples do que as antigas âncoras do UGUI.
Conclusão
O UI Document veio para profissionalizar a criação de interfaces na Unity. Entender a sinergia entre a estrutura do UXML e o poder de estilização do USS é um passo fundamental para qualquer desenvolvedor de jogos que deseja criar menus e HUDs otimizados, elegantes e fáceis de manter.
