Slices no Aseprite: 9-Slice para Janelas e Botões

Aseprite slices são retângulos nomeados que você desenha por cima do sprite para marcar uma região, e o recurso de 9-slice dentro deles define quais pixels são canto, quais são borda e qual é o miolo de uma moldura. Com isso, uma janela de diálogo de 16x16 pixels vira um painel de 300x120 na engine sem os cantos esticarem e sem o contorno engordar.

No fim deste post você vai ter uma janela e um botão em pixel art com três estados (normal, hover, pressionado), configurados como 9-slice no Aseprite, exportados, e funcionando tanto no Sprite Editor da Unity quanto no NinePatchRect da Godot.

O que é 9-slice e por que a UI precisa

Uma interface de jogo tem painéis de vários tamanhos: a caixa de diálogo é larga e baixa, o inventário é quadrado, a janela de pausa é alta. Desenhar um PNG para cada tamanho é trabalho jogado fora, e esticar um PNG só destrói a pixel art. Quando você escala uma moldura de 16x16 para 160x48, o contorno de 1 pixel vira uma faixa de 10 pixels na horizontal e de 3 na vertical. Os cantos arredondados viram ovais. Fica com cara de erro.

O 9-slice resolve dividindo a moldura numa grade de três por três:

• 4 cantos: nunca mudam de tamanho.
• 2 bordas horizontais (topo e base): esticam ou repetem só na largura.
• 2 bordas verticais (esquerda e direita): esticam ou repetem só na altura.
• 1 centro: preenche o espaço que sobra nos dois eixos.

A engine só precisa saber onde ficam as quatro linhas de corte. Esse é o dado que o Aseprite guarda quando você marca um slice como 9-slice.

Desenhar a moldura em pixel art

Abra um sprite novo em File > New com 16x16 pixels, modo RGBA e fundo transparente. Para UI pixel art, 16x16 é um tamanho confortável para a janela base: cabem cantos de 4 pixels, bordas com contorno e brilho, e um centro liso.

Regras que fazem o 9-slice funcionar bem:

1. Cantos com 3 a 5 pixels. É onde mora o detalhe (arredondamento, rebite, ornamento). Tudo que tem desenho próprio fica dentro do canto.
2. Borda que se repete sem emenda. A faixa entre os cantos precisa ser igual em toda a extensão. Um contorno escuro de 1 pixel, uma linha de luz de 1 pixel por dentro e pronto. Se você puser um detalhe no meio da borda, ele vai esticar ou repetir junto.
3. Centro de cor chapada ou padrão muito simples. O centro é o que mais estica. Um gradiente ou um ruído vai ficar borrado ou repetido de um jeito óbvio.
4. Paleta da UI separada da paleta do cenário, com 4 a 6 cores. O post de HUD e ícones em pixel art no Aseprite explica por que a UI precisa de contraste próprio.

Uma receita que funciona: contorno externo de 1 pixel no tom mais escuro, borda de 2 pixels no tom médio, 1 pixel de luz no lado de cima e da esquerda, sombra de 1 pixel embaixo e à direita, centro no tom de fundo. Os cantos ficam com 4 pixels cada, recortando 1 pixel na diagonal para arredondar.

Aseprite slices: criar e definir o centro

Com a moldura desenhada, crie o slice:

1. Selecione a Slice Tool com Shift+C.
2. Arraste um retângulo cobrindo a moldura inteira, de 0,0 até 16,16.
3. Dê dois cliques dentro do slice. Abre o Slice Properties.
4. Dê um nome claro, como window. Esse nome vai para o arquivo exportado.
5. Confira Bounds: x 0, y 0, largura 16, altura 16.
6. Marque 9-Slices. Aparece um retângulo interno: é o centro. Ajuste para x 4, y 4, largura 8, altura 8.
7. Se for usar ponto de origem, marque Pivot. Para painel de UI, normalmente não precisa.

Na tela, o slice ganha as linhas internas mostrando as nove regiões. Você pode arrastar essas linhas direto no canvas em vez de digitar os números.

Agora o botão. No mesmo arquivo, aumente a tela em Sprite > Canvas Size para caber três botões lado a lado (por exemplo, 48x16) ou use um arquivo separado. Desenhe os três estados com o mesmo contorno e mude só o miolo e a luz: normal com luz em cima, hover um tom mais claro, pressionado com a luz embaixo e o conteúdo 1 pixel para baixo. Crie um slice para cada estado (button_normal, button_hover, button_pressed), todos com o mesmo centro relativo.

Para converter o centro em bordas, faça a conta uma vez e anote:

• Esquerda = x do centro.
• Topo = y do centro.
• Direita = largura do slice menos (x + largura do centro).
• Base = altura do slice menos (y + altura do centro).

Para a janela: esquerda 4, topo 4, direita 16 menos 12 = 4, base 4.

Exportar slices

Você tem dois caminhos, conforme a engine e o seu fluxo:

PNG único + números à mão. Exporte com File > Export > Export As em PNG. Os números das bordas você já anotou. Para uma UI com 5 ou 6 peças, é o caminho mais rápido.

Sprite sheet com JSON. Em File > Export > Export Sprite Sheet (Ctrl+E), ative a saída JSON (aba de saída) e marque os slices nos metadados. O JSON ganha uma lista slices com nome, bounds e center (x, y, w, h) de cada um. Isso é útil quando você usa um importador que lê o JSON do Aseprite, ou quando quer conferir os números sem abrir o editor.

Quem exporta por linha de comando tem a opção --split-slices (junto com --save-as), que gera um PNG por slice. É o mais limpo para UI: button_normal.png, button_hover.png e button_pressed.png saem separados, prontos para a engine.

Configurar na engine: Unity e Godot

Unity. Importe o PNG e selecione-o no Project. No Inspector: Texture Type em Sprite (2D and UI), Filter Mode em Point (no filter), Compression em None, e Mesh Type em Full Rect (a documentação da Unity avisa que Tight pode quebrar o 9-slicing). Clique em Apply e abra o Sprite Editor. No overlay do sprite, preencha L, R, T e B com 4, 4, 4, 4, ou arraste as alças verdes. Aplique. Na UI, crie um Image no Canvas, ponha o sprite e troque Image Type para Sliced. Se a moldura aparecer pequena demais na tela, ajuste Pixels Per Unit Multiplier no próprio Image em vez de mexer na escala. Para sprite fora da UI, no Sprite Renderer use Draw Mode em Sliced ou Tiled e mude o Size, nunca a escala do Transform.

Godot. Importe o PNG e deixe o filtro de textura em Nearest (em Project Settings > Rendering > Textures > Canvas Textures > Default Texture Filter). Adicione um nó NinePatchRect, ponha a textura e preencha Patch Margin com Left 4, Top 4, Right 4, Bottom 4. Em Axis Stretch, escolha entre Stretch, Tile ou Tile Fit para horizontal e vertical. Para borda com padrão (corrente, tijolo), Tile Fit evita meio padrão cortado na ponta. Redimensione o nó pelo tamanho do Control, não pela escala.

O ponto em comum: as duas engines só precisam dos quatro números. Por isso vale fixar um padrão no seu kit (todos os cantos com 4 pixels, por exemplo). Fica mais fácil de configurar e mais consistente na tela.

Botões com estados (normal, hover, pressionado)

Um botão de jogo precisa avisar o jogador que ele está ali, que o cursor ou o foco do controle chegou nele e que o clique foi registrado. Isso são três desenhos.

Na Unity, adicione um componente Button ao Image e troque Transition para Sprite Swap. Ponha button_normal no Image e preencha Highlighted Sprite com o hover, Pressed Sprite com o pressionado, Selected Sprite com o hover (para navegação por controle) e, se quiser, Disabled Sprite com uma versão dessaturada. Configure as mesmas bordas 9-slice em todos os sprites, senão o botão muda de formato ao passar o mouse.

Na Godot, o Button usa estilos de tema. Para cada estado (normal, hover, pressed, disabled, focus), crie um StyleBoxTexture, ponha a textura do estado e preencha as Texture Margins com os mesmos 4 pixels. Salve os StyleBoxes num Theme e aplique o tema no nó raiz da UI, assim todos os botões herdam.

Juntar a arte da UI com o comportamento dela na engine (estados, foco de controle, escala por resolução) é onde muita gente que desenha bem empaca, porque sai do papel de artista e entra no de quem monta o jogo.

Montar um kit de UI inteiro (janela, botão, barra, ícones) com o mesmo padrão de bordas e levar para a engine funcionando é parte do processo de produção de arte para jogo, e é isso que transforma desenho solto em interface que o jogador usa.

Erros comuns

Detalhe no meio da borda. O ornamento estica junto. Tudo que é único vai no canto; a borda é só repetição.

Borda com número ímpar de pixels no Tile. Se a borda repete com padrão de 2 pixels e a área a cobrir tem tamanho ímpar, a última repetição sai cortada. Use Tile Fit na Godot ou ajuste o tamanho do painel em múltiplos do padrão.

Escalar pelo Transform. Na Unity, mudar a escala ignora o 9-slice e estica tudo. Mude o tamanho no Rect Transform ou no Size do Sprite Renderer.

Mesh Type Tight. Na Unity, sprite com Tight pode ignorar as bordas. Troque para Full Rect.

Filtro bilinear. O canto fica borrado mesmo com o 9-slice certo. Point na Unity, Nearest na Godot.

Estados com bordas diferentes. Hover com borda de 5 e normal com borda de 4 faz o botão "pular" de tamanho. Mesmo centro relativo em todos os slices.

Painel em tamanho que não é múltiplo do pixel da arte. Se você escalou a UI em 3x, painel com largura que não é múltiplo de 3 gera pixel quebrado. Defina a escala da UI uma vez e use tamanhos múltiplos dela.

Próximo passo

Com a janela e o botão prontos, monte o resto do kit no mesmo arquivo: uma barra de vida com 9-slice horizontal (só esquerda e direita fixas), um tooltip com moldura mais fina e um slot de inventário. Use os mesmos 4 pixels de canto e a mesma paleta. Para os ícones que vão dentro desses painéis, use a mesma grade e a mesma paleta da moldura. Para decidir onde cada painel aparece na tela e como o jogador navega entre eles, o guia de UI/UX design para jogos dá a parte de design. E se ainda está se acostumando com a ferramenta, o post de Aseprite para jogos cobre camadas, tags e exportação do zero.