Botões e Menu em Pixel Art: UI de Jogo 2D

Botões em pixel art e a UI em pixel art de um jogo 2D têm uma regra que a arte de cenário não tem: além de ser bonita, a interface precisa comunicar estado e ser clicável sem erro. Um botão não é um desenho parado, é um objeto que responde (muda quando o mouse passa, afunda quando é apertado) e que precisa continuar legível em qualquer tamanho de texto.

Aqui você vai desenhar um botão nos três estados (normal, hover e pressionado), montar a moldura de um painel de menu, entender o 9-slice para o botão escalar sem distorcer, cuidar da legibilidade do texto, fazer ícones pequenos coerentes e levar tudo para a engine com o NinePatchRect do Godot. O foco é um kit de UI que funciona de verdade, não só um mockup.

Botões em pixel art: normal, hover e pressionado

Todo botão de jogo precisa de pelo menos três estados, porque o jogador tem que saber, sem ler instrução, o que dá para clicar e quando o clique aconteceu.

Normal. O estado parado. Desenhe uma moldura retangular com cantos levemente arredondados (cortando um ou dois pixels de cada canto), uma borda de um ou dois pixels e um preenchimento interno. Dê volume com uma luz no topo e na esquerda (tom claro) e uma sombra embaixo e na direita (tom escuro). Isso faz o botão parecer uma tecla saliente, convidando o clique.

Hover. O estado de "o mouse está em cima" ou "esse item está selecionado" no menu de controle. A mudança precisa ser perceptível mas não berrante: clareie o preenchimento um tom, ou acenda a borda com uma cor de destaque, ou adicione um brilho fino na moldura. O importante é o contraste com o estado normal, para o olho captar o foco na hora.

Pressionado. O estado do clique. Aqui você inverte a sensação de volume: o que era saliente afunda. Troque a luz de lugar (agora a sombra fica em cima e na esquerda, a luz embaixo e na direita) e empurre o conteúdo interno (texto e ícone) um pixel para baixo e para a direita. Esse deslocamento de um pixel é o que faz o cérebro sentir que o botão foi apertado.

Desenhe os três estados alinhados, um ao lado do outro ou em camadas separadas, reaproveitando a mesma base. A diferença entre eles deve ser mínima no desenho e máxima na leitura: poucos pixels mudam, mas a mensagem (dá para clicar, está em foco, foi clicado) tem que chegar clara.

Um quarto estado vale a pena quando a interface tem opções que ligam e desligam: o desabilitado. Deixe o botão dessaturado, sem o brilho da moldura e com o texto mais apagado. O jogador entende que aquilo existe mas não está disponível agora.

Moldura de janela e painel de menu

O painel é a caixa que segura os botões, o texto e os ícones de um menu (inventário, opções, diálogo). A moldura dele segue a mesma lógica do botão, só que maior e sem o estado de clique.

Monte a moldura em três partes:

• Borda externa: uma linha de contorno (um ou dois pixels) que separa o painel do fundo do jogo. Um tom escuro aqui ancora a caixa na tela.
• Bisel interno: uma linha de luz logo dentro da borda (clara no topo e na esquerda, escura embaixo e na direita) que dá a sensação de relevo, como uma placa de metal ou madeira.
• Preenchimento: o fundo onde o conteúdo vai. Mantenha discreto, de valor médio, para o texto e os botões se destacarem em cima dele. Se quiser textura (madeira, pedra, pergaminho), use variação baixa de tom para não competir com o conteúdo.

O erro comum no painel é o fundo gritar mais que o conteúdo. A moldura e o fundo são suporte; quem tem que brilhar é o botão e o texto. Se ao olhar o menu seu olho vai para a textura do fundo, baixe o contraste dela.

9-slice: o botão que escala sem distorcer

Aqui está o conceito que separa UI de amador de UI de produção. Se você desenha um botão de largura fixa e depois precisa de um botão mais largo para um texto maior, esticar a imagem inteira deforma os cantos arredondados e engrossa a borda de um lado só. Fica feio.

O 9-slice (ou 9-patch) resolve. A ideia é cortar a imagem do botão em nove pedaços com duas linhas verticais e duas horizontais:

• Os quatro cantos nunca esticam. Ficam sempre do tamanho original, preservando o arredondamento e a borda.
• As quatro bordas esticam só numa direção: as de cima e de baixo esticam na horizontal, as dos lados esticam na vertical.
• O centro estica nas duas direções para preencher o miolo.

Com isso, você desenha um botão pequeno (digamos 24x16) e ele vira um botão de qualquer largura e altura sem nenhuma distorção nos cantos. A borda continua com a mesma espessura em toda a volta.

No Aseprite, o fluxo passa pelas slices: você cria uma slice sobre o botão (ferramenta Slice, tecla C) e, nas propriedades da slice, ativa o 9-Patch, o que mostra as quatro linhas de corte que você arrasta para delimitar os cantos. O Aseprite guarda essas margens na exportação, e engines que leem o formato aproveitam os cortes. O passo a passo detalhado dessa ferramenta está no guia de slices e 9-slice no Aseprite.

A regra ao desenhar para 9-slice: mantenha os cantos simples e deixe o centro "esticável", ou seja, sem detalhe que fique estranho ao repetir. Um gradiente horizontal no centro vira listra quando estica; um preenchimento liso ou um padrão sutil funciona.

Legibilidade e contraste do texto no botão

Um botão lindo com texto ilegível é um botão quebrado. A leitura do texto sobre a UI é inegociável, porque é por ali que o jogador navega.

Três pontos resolvem a maioria dos casos:

1. Contraste de valor, não só de cor. Texto claro sobre fundo escuro, ou escuro sobre claro. Cores diferentes mas de valor parecido (um verde médio num fundo vermelho médio) brigam e cansam. Pense em preto e branco primeiro: se lê em escala de cinza, lê colorido.
2. Margem interna. Reserve um respiro entre o texto e a borda do botão. Texto encostado na moldura fica apertado e some. Essa margem é a mesma zona que o 9-slice protege, então ela some de vista no planejamento se você não a reservar de propósito.
3. Contorno ou sombra quando precisa. Se o fundo do botão tem textura ou o painel tem cor variada, um contorno de um pixel ou uma sombra escura de um pixel no texto garante a leitura sobre qualquer fundo.

A fonte importa tanto quanto o botão. Uma fonte de pixel art bem feita, no tamanho certo, resolve metade do problema de legibilidade. Se você vai desenhar a própria tipografia do jogo, o guia de criar fonte de pixel art cobre o espaçamento e a altura que mantêm o texto nítido no tamanho real.

Teste sempre no tamanho do jogo, com o zoom em 100%, nunca ampliado. É no tamanho real que o jogador vai ler, e um texto que parece ótimo ampliado pode virar uma mancha quando reduzido.

Montar uma interface inteira sozinho é onde muita gente que estuda arte 2D por conta própria empaca: você desenha o botão, mas não sabe por que o conjunto parece amador, erra o contraste do texto, deixa os cantos distorcerem e perde dias refazendo no chute, sem ninguém para apontar o que está errado. Um curso de pixel art com foco em jogo te dá a ordem das decisões (forma, valor, contraste, consistência) e corrige o seu kit de UI com devolutiva, em vez de te deixar reinventando a roda.

Se você ainda está decidindo se um curso compensa frente ao aprendizado solo, a análise sem hype em vale a pena um curso de pixel art para jogos ajuda a pesar.

Ícones pequenos e a consistência do kit

Ícones de UI (engrenagem de opções, coração de vida, moeda, mochila) vivem em espaços minúsculos, de 16x16 ou menos. A regra é a mesma da vegetação ou de qualquer sprite pequeno: a silhueta carrega o significado.

• Desenhe a silhueta primeiro, de uma cor só, e cheque se dá para reconhecer o objeto sem detalhe interno. Se a engrenagem só lê quando você vê os dentinhos internos, a silhueta falhou.
• Padronize o tamanho. Todos os ícones do HUD no mesmo grid (16x16, por exemplo) com a mesma margem interna. Ícones de tamanhos variados fazem a barra parecer bagunçada.
• Use a mesma paleta e a mesma espessura de contorno de todo o kit. Um ícone com contorno preto grosso ao lado de outro sem contorno não parecem do mesmo jogo.

Os ícones de HUD ainda têm regras próprias de leitura em movimento e de contraste sobre o cenário, que valem o seu estudo à parte.

A consistência é o que transforma peças soltas em um kit. O mesmo raio de canto no botão e no painel, a mesma cor de destaque no hover de todos os elementos, a mesma sombra em todos os ícones. Quando tudo compartilha essas decisões, o jogador sente uma interface única; quando cada elemento segue a própria regra, a tela parece uma colcha de retalhos, mesmo que cada peça seja bonita isolada.

Export e uso no Godot com NinePatchRect

Com o kit pronto, o último passo é levar para a engine. No Godot 4, o nó que aplica o 9-slice é o NinePatchRect. Ele recebe a textura do botão ou do painel e as margens de corte, e cuida de esticar o centro e as bordas mantendo os cantos intactos.

No editor, você adiciona um NinePatchRect, define a propriedade Texture com o PNG do botão e ajusta as Patch Margin (left, right, top, bottom) no inspetor, que são as mesmas margens que você definiu na slice do Aseprite. Depois é só redimensionar o nó: o Godot estica respeitando os cortes.

Para pixel art, um cuidado é obrigatório: desligar a suavização da textura, senão o Godot borra os pixels ao escalar. Você faz isso deixando o filtro de textura em nearest. Via código, com GDScript tipado:

extends NinePatchRect

func _ready() -> void:
    texture_filter = CanvasItem.TEXTURE_FILTER_NEAREST
    patch_margin_left = 3
    patch_margin_right = 3
    patch_margin_top = 3
    patch_margin_bottom = 3

As propriedades patch_margin_left, patch_margin_right, patch_margin_top e patch_margin_bottom são as margens de corte reais do NinePatchRect, e texture_filter com TEXTURE_FILTER_NEAREST mantém os pixels nítidos. Com isso, um botão desenhado em 24x16 preenche uma caixa de qualquer largura sem distorção.

Para os estados do botão (normal, hover, pressionado), o fluxo comum no Godot é usar o nó de botão da interface e trocar a textura ou o NinePatchRect conforme o estado, ou tratar os sinais de foco e clique para alternar a aparência. O desenho que você fez dos três estados é o que alimenta essa troca.

Com o botão em três estados, a moldura do painel, o 9-slice para escalar, o texto legível, os ícones padronizados e o NinePatchRect configurado, você tem um kit de UI em pixel art que sai do Aseprite e funciona dentro do jogo, não só na tela do desenho.