UI de Jogos: Arte de Botões, Painéis e Estados

A arte de UI de jogos tem uma exigência que o resto da arte não tem: ela precisa esticar. O mesmo painel vira caixa de diálogo larga, janela de inventário quadrada e tooltip pequeno, e o mesmo botão aparece em quatro estados diferentes conforme o jogador passa o mouse, clica ou não pode clicar. Se você desenha cada tamanho e cada estado como um PNG separado e fixo, a interface não fecha.

Aqui você desenha um botão de jogo com os 4 estados (normal, hover, pressionado e desabilitado) e um painel em 9-slice que estica sem distorcer, no Aseprite para pixel art ou no Krita para UI em alta resolução, e configura os dois na Godot e na Unity.

UI de jogos: arte que precisa esticar

Pense no que a interface de um jogo pequeno pede: menu principal com 3 ou 4 botões, tela de pausa, caixa de diálogo, inventário, tooltip, janela de confirmação. São seis ou sete painéis de tamanhos diferentes. Se a arte for um desenho fixo para cada um, qualquer mudança de layout vira retrabalho, e a tradução para outro idioma (texto mais longo) quebra tudo.

A solução é desenhar peças pequenas e reaproveitáveis:

• 1 moldura de painel que vira todos os painéis por 9-slice.
• 1 moldura de botão com uma variação por estado.
• Ícones separados da moldura, para trocar o ícone sem redesenhar o botão.

O texto do botão também fica fora da arte. Escrever "Jogar" dentro do PNG trava a tradução e obriga a refazer a imagem a cada mudança de palavra. O texto entra pela engine, com a fonte do jogo. Para a parte de usabilidade (hierarquia, leitura, onde cada coisa fica na tela), o post de UI e UX em jogos cobre o lado do design. Aqui o foco é a arte.

Botão de jogo e seus 4 estados

Cada estado comunica uma coisa ao jogador. Se dois estados parecem iguais, o botão mente.

O desabilitado é o estado mais esquecido e o que mais faz falta. Botão de "Continuar" sem save, botão de compra sem moedas suficientes, opção bloqueada no menu: se ele usa a mesma arte do normal, o jogador clica, nada acontece e ele acha que o jogo travou.

Duas regras práticas para os estados:

1. Mude o valor, não só a cor. O jogador que enxerga mal certas cores precisa perceber a diferença pela claridade. Hover mais claro, desabilitado mais escuro e mais cinza.
2. Mantenha o mesmo contorno em todos. Se o contorno muda de espessura entre estados, o botão "pula" na tela quando o mouse passa por cima.

Se o jogo vai rodar com controle, desenhe um quinto estado de foco: uma borda externa de 1 a 2 pixels numa cor de destaque, ou um cursor ao lado. Com controle não existe mouse em cima do botão, então o foco é o único sinal de onde o jogador está.

Painel em 9-slice: bordas fixas e centro elástico

O 9-slice divide a moldura numa grade 3x3: quatro cantos que nunca mudam de tamanho, quatro bordas que esticam ou repetem num eixo só, e um centro que preenche o resto. A engine só precisa de quatro números: quantos pixels de margem tem a esquerda, o topo, a direita e a base.

O desenho da moldura decide se o 9-slice funciona:

• Todo detalhe mora nos cantos. Arredondamento, rebite, ornamento. A borda entre os cantos precisa ser igual de ponta a ponta.
• Borda sem elemento central. Um brasão no meio da borda de cima vai esticar junto. Se o painel precisa de brasão, ele é uma peça separada, posicionada por cima.
• Centro chapado ou com padrão que repete sem emenda. Gradiente no centro estica e fica borrado.

O botão usa a mesma lógica. Desenhe a moldura do botão como 9-slice também, e um único asset serve para o botão pequeno de "Sim" e para o botão largo de "Voltar ao menu principal".

Desenhando no Aseprite com slices

Para UI em pixel art, o Aseprite resolve tudo num arquivo:

1. File > New, 64x16 pixels, RGBA, fundo transparente. Cabem quatro botões de 16x16 lado a lado.
2. Desenhe o botão normal no primeiro quadrado: contorno de 1 pixel no tom mais escuro, borda de 2 pixels no tom médio, 1 pixel de luz em cima e à esquerda, cantos de 4 pixels com 1 pixel cortado na diagonal.
3. Copie para os outros três quadrados e mude só o miolo e a luz: hover com o miolo um tom acima, pressionado com luz e sombra invertidas, desabilitado com a paleta cinza.
4. Use a Slice Tool (Shift+C), arraste um retângulo sobre cada botão, dê dois cliques e marque 9-Slices no Slice Properties, com o centro em x 4, y 4, largura 8, altura 8.
5. Para o painel, outro arquivo de 16x16 ou 24x24 com a mesma receita e um slice próprio.

Uma paleta curta para a UI, de 4 a 6 cores separadas das cores do cenário, segura a leitura. O post de HUD e ícones em pixel art no Aseprite mostra como montar essa paleta. Os detalhes de exportação dos slices e do JSON estão no tutorial de slices e 9-slice no Aseprite; aqui basta anotar as margens de cada slice, porque são elas que você vai digitar na engine.

Nas ferramentas grátis o caminho é o mesmo, sem a ferramenta de slice: no LibreSprite, no Pixelorama ou no Piskel você desenha os quatro estados lado a lado no mesmo tamanho, exporta o PNG e define as margens direto na engine.

Juntar arte de UI, estados, fonte e layout numa interface que funciona em várias resoluções é onde muito projeto solo para: cada peça isolada parece pronta, mas a tela inteira não conversa. O curso de Arte 2D trabalha a arte do jogo como um conjunto, da paleta à UI, para os assets saírem prontos para a engine e coerentes entre si.

Arte de UI no Krita: tamanhos e export

Se o jogo tem arte em alta resolução, a UI vai junto. No Krita:

1. File > New com o tamanho de uma folha de UI, por exemplo 512x512 pixels, e esconda ou apague a camada de fundo para exportar com transparência.
2. Ligue a grade em View > Show Grid (Ctrl+Shift+') e configure o espaçamento em 8 ou 16 pixels. Moldura de UI alinhada em múltiplos de 8 é muito mais fácil de fatiar.
3. Desenhe a moldura do botão em 96x96 pixels com cantos de 24 a 32 pixels. Use pincel de borda dura para o contorno; pincel com borda macia demais vira halo cinza em volta do botão.
4. Cada estado numa camada, ou cada estado num grupo de camadas. Assim você liga e desliga para conferir a diferença.
5. Exporte cada estado com File > Export em PNG, com a camada certa visível, ou monte todos lado a lado numa folha só.

Tamanho em alta resolução segue a tela alvo: se o jogo é pensado para 1080p, desenhe a moldura no tamanho em que ela vai aparecer em 1080p, não quatro vezes maior. Reduzir no import afina o contorno de forma desigual, e o botão perde a borda nítida. O mesmo vale para ícones: desenhe no tamanho de exibição ou no dobro, nunca em um tamanho arbitrário.

Importando 9-slice na Godot e na Unity

Na Godot 4, o painel usa o nó NinePatchRect. Arraste o PNG para a propriedade Texture e preencha as quatro Patch Margin (Left, Top, Right, Bottom) com as margens anotadas. As opções Axis Stretch horizontal e vertical aceitam Stretch, Tile ou Tile Fit: Tile repete a borda em vez de esticar, o que fica melhor em pixel art com textura na borda. Para o botão, use um Button e, em Theme Overrides > Styles, crie um StyleBoxTexture para cada estado (normal, hover, pressed, disabled, focus), cada um com a textura do estado e as mesmas Texture Margins. O estado desabilitado aparece sozinho quando você marca Disabled no botão. Se a UI se repete pelo jogo inteiro, leve esses StyleBox para um Theme; um único recurso de Theme aplicado no nó raiz da UI estiliza todos os botões de uma vez.

Na Unity 6.3, selecione o PNG, deixe o Texture Type em Sprite (2D and UI), abra o Sprite Editor e defina a borda nos campos L, T, R e B (ou arrastando os pontos verdes), depois clique em Apply. No GameObject de UI, o componente Image precisa do Image Type em Sliced. No Button, troque Transition para Sprite Swap e arraste os sprites de Highlighted Sprite, Pressed Sprite, Selected Sprite e Disabled Sprite. Desmarcar Interactable mostra o desabilitado. Se o painel for um SpriteRenderer no mundo, e não UI, use Draw Mode Sliced e o Mesh Type Full Rect no import.

Em pixel art, nas duas engines, filtro sem suavização: Nearest na Godot, Filter Mode Point na Unity. E mude o tamanho do painel pelo Size ou pelo Rect Transform, nunca pela escala.

Erros comuns: botão sem estado desabilitado e borda borrada

Sem estado desabilitado. O botão de "Continuar" sem save fica idêntico aos outros. Desenhe o estado cinza mesmo que hoje nenhum botão precise; amanhã vai precisar.

Estados com contorno diferente. O botão muda de tamanho visual quando o mouse passa. Copie a moldura e mude só miolo e luz.

Borda borrada. Filtro linear em pixel art, painel aumentado pela escala ou arte desenhada enorme e reduzida no import. Confira o filtro e o tamanho de desenho.

Margem errada no 9-slice. Se a margem é menor que o canto, o canto estica e o arredondamento vira oval. A margem tem que cobrir o canto inteiro, com detalhe e sombra.

Texto dentro da imagem. Trava a tradução e o ajuste de layout. Texto vai pela engine.

Hover que só muda a cor. Em telas com pouco contraste, ou para quem não distingue bem certas cores, a diferença some. Mude a claridade.

Próximo passo

Desenhe hoje um botão em 4 estados e um painel de 16x16 com 9-slice, monte uma tela de pausa com três botões na engine que você usa e teste com o mouse e com o teclado. Se a tela ficou legível nas duas formas, a base da UI está pronta. Depois, siga para os ícones e o HUD com o post de HUD e ícones em pixel art no Aseprite.