Pixel Art Isométrico: a Regra 2:1 e o Primeiro Bloco

Pixel art isométrico se apoia numa regra só: a linha 2:1, em que você anda 2 pixels para o lado a cada 1 pixel para cima. Com ela você desenha o losango do topo de um tile, puxa duas faces para baixo e pinta três tons (topo claro, face clara, face escura). Esse primeiro bloco já é um tile pronto para um TileMap isométrico na Godot ou na Unity.

Aqui você desenha um bloco de grama com topo de 32x16 no Aseprite, pixel por pixel, entende por que a linha 2:1 é a escolha padrão e vê como configurar o tamanho do tile nas duas engines. No fim, tem os dois erros que mais quebram arte isométrica: linha 1:1 e bloco com altura errada.

Pixel art isométrico: o que é a projeção 2:1

Isométrico, na geometria, é uma projeção em que os três eixos aparecem com o mesmo ângulo entre si, com linhas de 30 graus em relação à horizontal. Num grid de pixels, uma linha de 30 graus não cai em pixels inteiros de forma regular. O resultado são degraus irregulares, que parecem tremidos.

A solução que o pixel art adotou é a linha 2:1: 2 pixels na horizontal, 1 na vertical, repetido. O ângulo fica em torno de 26,57 graus, perto o bastante de 30 para parecer isométrico, e cada degrau é idêntico ao outro. A linha fica limpa.

Tecnicamente, isso é uma projeção dimétrica, não isométrica. Na prática do pixel art e das engines, todo mundo chama de isométrico, e as engines tratam a proporção 2:1 como padrão. Na Unity, a documentação do TileMap isométrico usa por padrão uma célula de 1 por 0,5, ou seja, exatamente 2:1.

Por que isso importa para quem desenha: tudo no seu jogo isométrico vai sair dessa grade. Chão, paredes, móveis, personagens. Se o primeiro bloco estiver na proporção certa, o resto encaixa.

A linha 2:1: 2 pixels para o lado, 1 para cima

Treine a linha antes do bloco. Num canvas qualquer:

1. Pinte 2 pixels lado a lado.
2. Suba 1 pixel e, colado na ponta, pinte mais 2.
3. Repita.

O resultado é uma escada de degraus de 2 pixels. Para descer, a mesma coisa para baixo. Algumas variações do padrão:

• Linha com degraus de 2 (padrão). Limpa, legível, a mais comum.
• Linha com pixel duplicado na emenda. Quando dois degraus se tocam pela quina, alguns artistas acrescentam um pixel para a linha parecer contínua. Evite no começo, porque engorda o contorno.

No Aseprite, a ferramenta Line (L) desenha a linha de um ponto a outro. Segurar Shift trava o ângulo em passos fixos. Confira sempre contando os pixels com zoom alto: se apareceu um degrau de 3 ou de 1, a linha não está em 2:1. Para linhas curtas, desenhar à mão com o Pencil (B) costuma ser mais rápido e mais confiável.

Ative também a opção Pixel-perfect da barra de contexto do Pencil, que remove os pixels de canto que deixam a linha grossa quando você desenha à mão livre.

O primeiro bloco: topo, face clara e face escura

Agora o bloco de grama. O topo é um losango de 32 pixels de largura por 16 de altura. As laterais descem 16 pixels. A imagem do bloco completo tem 32x32.

Preparação. File > New, 32x32, RGBA, fundo transparente. Aumente o zoom para 800% ou mais.

Topo (o losango de 32x16).

1. Na linha y = 0 (a primeira do canvas), pinte os 4 pixels do meio: colunas 14, 15, 16 e 17. Esse é o topo do losango, 4 pixels retos.
2. Desça pela esquerda com a linha 2:1: colunas 12 e 13 na linha 1, colunas 10 e 11 na linha 2, e assim por diante, até as colunas 0 e 1 na linha 7.
3. Faça o mesmo pela direita, espelhado: colunas 18 e 19 na linha 1, até 30 e 31 na linha 7.
4. A ponta esquerda tem 2 pixels de altura: colunas 0 e 1 nas linhas 7 e 8. A ponta direita também.
5. Feche a metade de baixo do losango espelhando a de cima: das pontas, suba de volta para o centro até a linha 15, onde ficam de novo os 4 pixels do meio.

Esse é o contorno de um losango de exatamente 32x16. Preencha com o verde da grama.

Faces.

1. Das duas pontas laterais (linhas 7 e 8) e do vértice de baixo (linha 15), puxe linhas verticais 16 pixels para baixo.
2. Feche a base com outro trecho de 2:1, paralelo à metade de baixo do losango, 16 pixels abaixo dele.
3. Você tem duas faces: a esquerda e a direita.

Três tons. A luz vem de cima, levemente pela esquerda:

• Topo: o tom mais claro (verde da grama iluminada).
• Face esquerda: tom médio (terra clara).
• Face direita: tom escuro (terra escura).

Mantenha essa regra em todo o jogo. Se um bloco tem a face clara à esquerda e outro à direita, o mundo parece ter dois sóis.

Detalhe. Uma franja de grama descendo 2 ou 3 pixels pelas faces, logo abaixo da borda do topo, dá a cara de bloco de grama. Uma linha de 1 pixel mais clara na aresta entre o topo e a face esquerda reforça o volume. O guia de sombreamento em pixel art mostra como montar a rampa de tons de cada material.

Pixel art isométrico do zero no Aseprite com grid

O grid ajuda a manter os blocos alinhados quando você monta várias peças num mesmo arquivo.

1. View > Grid > Grid Settings. Defina largura e altura da célula. Para conferir o topo dos tiles, use 16x8 (metade do losango). Os vértices de cada losango vão cair em cruzamentos da grade.
2. View > Show > Grid liga e desliga a grade.
3. O Aseprite não tem grid isométrico nativo, pelo que a comunidade oficial registrava até 2025. Duas saídas: trabalhar com o grid retangular de 16x8 e contar os pixels, ou usar um script da comunidade que desenha guias isométricas numa camada separada.

Um fluxo que funciona bem para produzir vários tiles:

1. Desenhe o bloco base de grama e salve.
2. Duplique o frame ou a camada para criar variações: grama com flor, grama com pedra, terra sem grama, água.
3. Mantenha o mesmo contorno e as mesmas faces em todas. Só o topo e os detalhes mudam.
4. Monte uma prancha de 4x4 tiles para testar como eles se encaixam lado a lado. Cada tile vizinho fica deslocado 16 pixels na horizontal e 8 na vertical.

Um bloco isométrico bonito é o começo. Um jogo isométrico pede chão, paredes, objetos, personagens andando em 4 ou 8 direções e uma ordem de desenho que não coloque o personagem atrás da parede errada, e essa soma de regras é onde muita gente que estuda sozinha abandona o projeto. Um curso de arte 2D para jogos ensina a construir esse conjunto em ordem, do primeiro tile ao mapa montado.

Do bloco ao tile: tamanho para TileMap isométrico

O ponto mais importante: a engine pensa no losango do topo, não na imagem inteira. O tile ocupa 32x16 na grade, mas a imagem tem 32x32 porque inclui as faces.

Na Godot 4. No TileSet, defina Tile Shape como Isometric e Tile Size como 32x16 (pela documentação, o tamanho do tile é o retângulo que envolve o losango). Na fonte de atlas, a região de textura de cada tile pode ser maior que o tamanho do tile: use 32x32. Depois ajuste a origem da textura (Texture Origin, nas propriedades do tile) para o losango do topo coincidir com a célula. O passo a passo da TileMapLayer isométrica, da ordem de desenho e do movimento no grid está no guia de jogo isométrico na Godot com TileMap.

Na Unity. Crie o mapa em GameObject > 2D Object > Tilemap > Isometric. A célula padrão do Grid é 1 por 0,5. Importe o PNG com Pixels Per Unit igual a 32, assim os 32 pixels de largura viram 1 unidade e os 16 do losango viram 0,5. No Sprite Editor, coloque o pivot no centro do losango do topo, e não no centro da imagem, para o bloco assentar na célula. Para blocos mais altos aparecerem atrás dos mais baixos, a documentação orienta mudar a Transparency Sort Mode do 2D Renderer para Custom Axis com o eixo (0, 1, 0). Se precisar de blocos empilhados em altura, existe o tipo Isometric Z as Y.

Se o seu tile tiver outro tamanho, a lógica é a mesma: o losango do topo define o tamanho da célula, a imagem pode ser mais alta.

Erros comuns: linha 1:1 e bloco com altura errada

Linha 1:1. Linha em diagonal de 45 graus, 1 pixel para o lado e 1 para cima. O losango fica quadrado girado, e nada se encaixa no grid 2:1 das engines. Correção: degraus de 2 pixels, sempre.

Degraus irregulares. Alguns degraus de 2, outros de 3 ou de 1. A linha treme. Correção: contar pixel a pixel com zoom alto, ou desenhar à mão com Pixel-perfect ligado.

Bloco com altura errada. Laterais de 13 ou 19 pixels, que não batem com a grade. Quando você empilha blocos ou coloca uma parede ao lado, nada alinha. Correção: altura das laterais em múltiplos da metade do losango (8 pixels para um topo de 32x16), com 16 como padrão.

Luz trocando de lado. Face clara à esquerda num bloco e à direita no outro. Correção: uma direção de luz para o jogo todo, anotada.

Contorno preto em todo bloco. Ao montar o mapa, os contornos viram uma grade escura entre os tiles. Correção: contorno só na borda de fora da área, ou contorno em tom escuro da própria cor.

Pivot no centro da imagem na Unity. O bloco aparece meio tile acima ou abaixo da célula. Correção: pivot no centro do losango do topo.

Próximo passo

Desenhe o bloco de grama 32x32 seguindo as coordenadas deste guia, depois faça 3 variações (terra, pedra, água) com o mesmo contorno. Monte uma prancha de 4x4 no Aseprite e depois na engine que você usa. Se quer estudar pixel art além do isométrico, como escolha de resolução, paleta e animação, o guia de pixel art para jogos é a sequência natural.