Inkscape UI de Jogo: Botões Vetoriais que Escalam em Toda Tela

Inkscape para UI de jogo resolve um problema específico: desenhar botões e painéis uma vez e exportar nítidos para qualquer resolução. Você desenha o botão em vetor, no tamanho da resolução base do jogo, alinhado numa grade de 1 pixel, separa os estados (normal, hover, pressionado, desabilitado) e exporta PNG em 1x, 2x e 3x mudando só o DPI. Para painéis que mudam de tamanho, a borda é desenhada pensando no 9-slice, e a engine estica o miolo sem deformar os cantos.

Este tutorial mostra o fluxo inteiro no Inkscape (grátis, Windows, macOS e Linux) e como levar o resultado para a Godot e para a Unity, incluindo quando vale importar o SVG direto. Para o panorama de arte vetorial em jogos, como quando vetor faz sentido e quando não faz, o post de arte vetorial com Inkscape é a leitura de base.

Inkscape UI jogo: por que vetor para interface

UI tem uma característica que sprite de personagem não tem: ela precisa ficar nítida em telas muito diferentes. O mesmo jogo roda num notebook com 1366x768, num monitor 4K e num celular com densidade alta. Arte raster desenhada para uma resolução borra quando ampliada e perde detalhe quando reduzida.

Vetor guarda formas, não pixels. O botão é um retângulo com cantos arredondados, um gradiente e um contorno; exportado em 3x, ele é o mesmo botão com o triplo de pixels, sem perda.

Onde vetor não é a escolha: UI em pixel art (o pixel é desenhado à mão e escala por fator inteiro na engine) e UI com textura pintada (madeira desenhada, pergaminho com manchas). Para esses, o fluxo é outro.

Grid, guias e tamanho base do botão

Defina a resolução de referência. A UI é desenhada para uma resolução base, e o 1x vale para ela. Um padrão prático para jogo de PC e console é 1280x720 como 1x: 2x vira 2560x1440 e 3x vira 3840x2160 (4K). Para 1920x1080, a engine escala o 2x para baixo, ou você exporta um 1,5x.

Configure o documento:

1. File > Document Properties (Ctrl+Shift+D). Unidade em px, e o tamanho da página igual à área em que você vai desenhar os elementos (uma folha de 1280x720 serve para montar uma tela inteira de menu).
2. Na mesma janela, na parte de grades, crie uma grade retangular com espaçamento de 1 px e linha principal a cada 8. A grade de 8 ajuda a manter medidas consistentes (botão de 48 ou 56 de altura, margens de 16).
3. Ative o snap (tecla %, ou a barra de snap no canto da janela) e deixe ligado o snap na grade.

Tamanho base do botão. Para 1280x720, um botão de menu de 240x56 px e um botão de ação no celular com pelo menos 48 px de altura são pontos de partida razoáveis. Decida o tamanho pelo layout real da tela, não pelo desenho isolado: monte a tela do menu com retângulos cinzas antes de desenhar o primeiro botão bonito.

Guias. Arraste da régua para criar guias nas bordas internas do botão (onde termina o contorno e começa o miolo). Elas vão marcar as linhas do 9-slice mais adiante.

Desenhando botão com estados (normal, hover, pressionado)

Forma base:

1. Ferramenta Rectangle (R). Desenhe 240x56 e confira na barra de controles os campos de largura e altura.
2. Nos campos Rx e Ry da barra da ferramenta, defina o raio dos cantos (8 px, por exemplo).
3. Abra Object > Fill and Stroke (Ctrl+Shift+F). Preenchimento com gradiente linear vertical (mais claro em cima), contorno de 2 px numa cor mais escura.
4. Um segundo retângulo menor, sem contorno, com um tom claro e transparência, na parte de cima, faz o brilho.

Estados. Organize em camadas no diálogo Layers and Objects (Ctrl+Shift+L): uma camada por estado, cada uma com uma cópia do botão. A diferença entre eles deve ser clara, mas econômica:

Para manter os estados coerentes quando você mexer no desenho, use clones: Edit > Clone > Create Clone (Alt+D) do botão normal e mude só a cor do clone. Uma mudança de raio de canto na forma original vale para todos os estados.

O estado de foco importa no jogo. Quem joga com controle navega pelo menu sem mouse. O hover precisa existir como "foco do controle" também, e precisa ser visível sem depender só da cor.

Painéis e 9-slice: onde ficam as bordas

Botões e painéis mudam de largura: o botão "OK" é curto, o "Continuar jogo salvo" é longo; a caixa de diálogo cresce com o texto. Em vez de exportar um PNG por tamanho, use 9-slice: a imagem é dividida em 9 partes por 4 linhas. Os 4 cantos nunca esticam, as 4 bordas esticam numa direção só e o centro estica nas duas.

Para o desenho funcionar em 9-slice:

• Cantos completos dentro da margem. O canto arredondado com o contorno precisa caber inteiro na margem. Raio de 8 com contorno de 2 pede margem de pelo menos 10; use 12 ou 16 para folga.
• Bordas uniformes. Entre um canto e outro, a borda tem que ser igual ao longo de todo o comprimento. Nada de ornamento no meio da borda superior: ele seria esticado.
• Centro sem detalhe horizontal. Um gradiente vertical estica bem na horizontal. Um gradiente horizontal ou um desenho no centro deforma.

Marque as margens com as guias do passo anterior (por exemplo, 16 px de cada lado) e anote os números: eles vão para a engine.

Na Godot, use um NinePatchRect para painéis, ou um StyleBoxTexture no tema dos botões, e preencha as margens (Patch Margin no NinePatchRect, Texture Margins no StyleBoxTexture) com os valores em pixels da imagem exportada. O post de UI responsiva na Godot mostra como a interface se adapta às resoluções.

Na Unity, no Sprite Editor do PNG importado, preencha as bordas L, R, T, B com as margens. No componente Image da UI, mude Image Type para Sliced. Se você importar o PNG 2x, as margens também dobram (32 em vez de 16), e o campo Pixels Per Unit Multiplier do Image ajusta o tamanho visual dos cantos.

Desenhar o botão é a parte agradável. O trabalho que dá dor de cabeça é fazer a interface inteira (menus, HUD, inventário, diálogos) ter a mesma linguagem visual e funcionar em todas as resoluções sem um elemento estourando a tela.

Planejar a interface como um sistema (tamanhos base, margens, estados e uma regra única de escala) é o que impede o retrabalho no fim do projeto, quando cada tela nova pede um botão um pouco diferente.

Exportando PNG em 1x, 2x e 3x

Abra o diálogo Export com File > Export (Ctrl+Shift+E). Ele tem uma aba para imagem única e outra para exportação em lote.

Imagem única:

1. Selecione o botão (ou o grupo da camada do estado).
2. Escolha a área Selection.
3. Em DPI, deixe 96 para 1x. No Inkscape, 96 DPI significa 1 pixel de saída para cada px do documento.
4. Nome do arquivo: btn_primary_normal.png. Exporte.
5. Mude o DPI para 192 (2x) e o nome para [email protected]. Exporte.
6. Repita com 288 (3x).

Confira o tamanho em pixels que o diálogo mostra: em 2x, o botão de 240x56 deve sair com 480x112. Se sair 481x113, alguma forma está fora da grade (veja os erros comuns).

Em lote: a aba de exportação em lote exporta cada objeto selecionado (ou cada camada) como um arquivo separado, com o mesmo DPI. Exporte o conjunto de estados uma vez em 96, outra em 192 e outra em 288, em pastas diferentes (ui/1x, ui/2x, ui/3x).

Qual escala levar para o jogo? Uma regra simples: exporte na escala da maior resolução que o jogo suporta e deixe a engine reduzir. Reduzir mantém a nitidez; ampliar borra. Para jogo mobile, que roda em densidades muito diferentes, exportar várias escalas e escolher na engine economiza memória nos aparelhos mais simples.

SVG direto na engine: quando funciona

Godot. Importa SVG, e por padrão rasteriza na importação. Nas opções de importação, SVG > Scale define o tamanho em que o arquivo vira textura (1.0 é o tamanho original; 2.0 dobra). Nas versões recentes da Godot 4, o SVG também pode ser importado como DPITexture, que pode ser rasterizado de novo em outras escalas em tempo de execução. A Godot usa a biblioteca ThorVG para renderizar SVG.

Unity. A Unity 6.3 tem um módulo de Vector Graphics embutido que importa SVG para UI Toolkit (como Vector Image) e como Texture2D. Para importar SVG como Sprite ou para a UI baseada em GameObjects (uGUI), a documentação do pacote Vector Graphics manda instalar o pacote na versão 3.0.0-preview. O importador segue um subconjunto da especificação SVG 1.1.

Quando o SVG direto funciona: formas planas, gradientes simples, ícones e botões sem efeitos. Quando quebra: filtros (desfoque, sombra com blur), máscaras complexas, texto. Na dúvida, exporte PNG: o resultado na engine é exatamente o que você viu no Inkscape.

Erros comuns: traço que muda de espessura, texto convertido sem necessidade

• Traço que muda de espessura ao redimensionar. Na barra de controles da ferramenta de seleção, há um botão que define se a espessura do contorno escala junto com o objeto. Ligado, um botão reduzido pela metade fica com contorno de 1 px em vez de 2. Desligue antes de criar as variações de tamanho, ou redimensione pelos campos de largura e altura do retângulo.
• Borda borrada no PNG. O contorno caiu entre dois pixels. Com snap na grade de 1 px, mantenha posição e tamanho em números inteiros. O contorno é centrado na borda da forma: 2 px de contorno numa borda inteira ocupa 1 px de cada lado e fica nítido; 1 px de contorno fica meio a meio e borra.
• Texto convertido sem necessidade. Converter o texto do botão em caminho (Path > Object to Path) prende o texto no desenho. O botão "Jogar" não pode ser traduzido, não muda com a opção de tamanho de fonte e não serve para "Continuar". O texto do botão é da engine, com a fonte importada. Converta para caminho só texto que é arte, como o logo do jogo.
• Ornamento na borda do 9-slice. Ele estica junto com a borda. Ponha ornamentos nos cantos.
• Exportar com fundo. Confira se a área exportada não inclui o fundo da página. PNG de UI tem fundo transparente.
• Estados com tamanhos diferentes. O pressionado tem 2 px a mais de sombra e o botão "pula" na tela ao clicar. Todos os estados com o mesmo tamanho de imagem.

Próximo passo

Monte um botão de 240x56 com os 4 estados, um painel de diálogo pensado para 9-slice com margem de 16 px, exporte em 1x e 2x e leve para a engine. Teste o painel esticado em 3 larguras diferentes e o botão navegando pelo controle. Depois, siga o guia de UI e UX de jogos para organizar a hierarquia e a navegação da interface inteira.