Guia de pixel art isométrica — Tiles, sprites e personagens

O pixel art isométrico é desenhado em uma grade de losangos 2:1: cada tile é exatamente duas vezes mais largo do que alto, e a altura é desenhada como uma sequência vertical de pixels em vez de simulada por uma câmera em perspectiva. 32×16 é o tamanho de tile padrão, 64×32 para cenas maiores, 16×8 para props e personagens pequenos. Quando você aceita a proporção 2:1, todas as outras decisões — pegada dos sprites, ciclos de caminhada, emendas, ordenação de profundidade — decorrem dela.

Esta página percorre o grid, os tiles, os sprites e os conjuntos de personagens de quatro e oito direções na ordem em que você realmente os constrói. Em seguida, cobre a etapa que a maioria dos tutoriais pula: transformar o mesmo grid de losangos em um mundo 3D real e percorrível no navegador, onde a inclinação da câmera é fixada para combinar com a arte e os tiles se tornam geometria. O 3D game builder do Neta Studio é a ferramenta que usamos para essa última etapa, e é por isso que vale a pena acertar exatamente os detalhes de projeção aqui.

Resposta rápida: o que torna o pixel art "isométrico"?

O pixel art isométrico é uma projeção rotacionada, não uma projeção em perspectiva. Os eixos X e Y do mundo correm ambos na diagonal na tela — para a direita e para baixo em um, para a esquerda e para baixo no outro — e o eixo vertical corre reto para cima em pixels individuais. Nada converge, não há ponto de fuga, e a profundidade é uma convenção que você mantém manualmente: mais abaixo na tela significa mais perto, uma sequência mais alta de pixels significa mais alto.

A proporção é de 2 na horizontal para 1 na vertical em ambos os eixos do solo, o que coloca cada borda do solo a cerca de 26,57° da horizontal. Tecnicamente, isso é uma projeção dimétrica; o isométrico verdadeiro tem encurtamento igual nos três eixos, a cerca de 35,264° acima do horizonte, e produz um tile de solo de aproximadamente 1,732:1. O nome pegou porque "isométrico" é a palavra que as pessoas usam, e quase todo tileset que você encontrar é desenhado em 2:1.

O grid 2:1

O 2:1 existe porque se encaixa em pixels quadrados. Uma borda de 2 na horizontal e 1 na vertical é uma escada limpa — dois pixels para a direita, um pixel para baixo, repetindo — então cada pixel da borda cai em um pixel inteiro quando você estampa o tile. Uma projeção real de 30° tem uma proporção de cerca de 1,732 para 1: a cada 2 pixels na horizontal você avança 1,155 na vertical. Isso não pode cair em uma grade de pixels, então as bordas alternam entre sequências de um e de dois pixels e a linha oscila. Você pode posicionar esses pixels à mão para um prop principal; não pode fazer isso para um tileset que precisa estampar milhares de cópias.

O erro que as pessoas realmente cometem é girar uma tela quadrada em 45° e chamar o resultado de isométrico. Um quadrado girado em 45° continua sendo um quadrado: o losango tem largura e altura iguais, a face superior e as faces laterais acabam com a mesma silhueta, e as fileiras de profundidade adjacentes deixam de se separar de forma limpa. Desenhe o losango em 2:1 desde o primeiro pixel; nunca gire um sprite de 16×16 ou 32×32 para fazer um tile.

Mantenha o passo do tile na cabeça como um deslocamento. Em 32×16, mover um tile para o leste é +32 em x e +16 em y no espaço da tela; mover um tile para o norte é +32 em x e -16 em y. Esse único par de deslocamentos é o que você usa para posicionamento, para movimento de sprites e para ordenação de profundidade.

Desenhando seu primeiro tile isométrico

Desenhe um tile antes de desenhar um tileset. O objetivo é um tile que você possa estampar sem retoques, o que significa que cada pixel da borda permanece no passo 2:1 e as três faces visíveis compartilham uma única rampa de valores: face superior no valor base, um lado um degrau mais escuro, o outro dois degraus mais escuro.

As duas faces laterais são o que fazem o desenho ser lido como isométrico. Se ambos os lados usam o mesmo valor, o cubo se achata em um hexágono e o olho deixa de ler a altura. Escolha uma direção de luz — superior esquerda é a convenção — e nunca a mude dentro de um projeto. Assim, cada tile e cada sprite concordam sobre onde está a luz.

Sprites e sprite sheets isométricos

Um sprite de visão lateral tem uma pegada retangular e anda horizontalmente. Um sprite isométrico tem uma pegada de losango, e seus pés ficam dentro desse losango. Tudo no sheet decorre disso: a âncora é o centro do losango, ou o canto inferior do losango, se você preferir pensar em pés, e o sprite é desenhado na mesma origem de tile que o tile de solo onde ele está.

O movimento na tela é diagonal. Mover um tile do mapa para o leste é +32 pixels para a direita e +16 para baixo; um tile para o norte é +32 para a direita e -16 para baixo. Então um ciclo de caminhada voltado para o leste não é um loop horizontal — o corpo desliza ao longo da inclinação 2:1 enquanto as pernas ciclam. Se os deslocamentos por quadro forem desenhados em uma linha horizontal, o personagem patina sobre o tile. Teste colocando quatro cópias ao longo de uma diagonal e confirmando que os pés acompanham os centros dos tiles.

Organize o sheet com linhas para a direção e colunas para o quadro, em uma célula uniforme. Uma pegada de 32×16 com um personagem de 32 pixels de altura cabe em uma célula de 32 de largura por 48 de altura: 16 pixels para o losango, 32 acima dele para o corpo. Mantenha o alfa binário, 0 ou 255. Pixels de borda semitransparentes capturam o que estiver atrás deles quando o sheet é compactado ou redimensionado, e você acaba com um halo claro ao redor de cada personagem sobre um tile escuro.

Personagens isométricos (4/8 direções)

Quatro direções é o padrão porque o grid do solo tem quatro diagonais: sudeste, sudoeste, nordeste, noroeste. Essas orientações cobrem todo o movimento ao longo dos eixos do mapa. Oito direções acrescenta as orientações cardeais da tela — norte, sul, leste e oeste — que só aparecem quando o personagem anda na diagonal pelo grid, ao longo dos dois eixos ao mesmo tempo. Isso dobra a arte, e as quatro linhas extras só são vistas enquanto o jogador segura duas teclas.

A engine precisa de uma consulta determinística. Ou a linha é igual ao índice de direção e a coluna é igual ao quadro, ou um índice linear de directionIndex * framesPerDirection + frame. Anote a ordem em um arquivo de texto ao lado do sheet. O bug clássico é um sheet criado com leste primeiro e importado com sul primeiro, então uma direção fica voltada para trás e o relato chega como "a animação de caminhada parece errada".

Contagem de quadros e timing

Um ciclo de caminhada é lido a 8 a 12 quadros por segundo. Quatro quadros a 8 fps são 125 ms por quadro; seis quadros permitem desenhar uma pose de contato e uma pose de passagem e se movem mais suavemente ao longo da diagonal 2:1 sem muito trabalho extra. Mantenha a contagem de quadros idêntica em cada linha de direção, a menos que seus metadados guardem uma contagem por direção — uma linha de seis quadros ao lado de linhas de quatro quadros toca na velocidade errada no momento em que o código assume uma grade uniforme. Idle é um ou dois quadros em um loop lento. Ataques e interações vão em um sheet separado, no mesmo tamanho de célula, para que o pivô nunca mude.

Espelhar é mais barato e geralmente errado

Espelhar de leste para oeste reduz o desenho pela metade. Também espelha a luz. Se sua luz vem da parte superior esquerda, um sprite invertido é iluminado pela parte superior direita, e detalhes assimétricos — um braço com escudo, uma bainha, uma alça de bolsa — acabam no lado errado. Espelhe apenas quando o personagem for simétrico e o sombreamento for plano o suficiente para ninguém notar, e nunca espelhe um sprite que carrega um realce direcional forte.

Objetos, props e altura

A caixa de arte de um prop é mais alta que sua pegada. Uma árvore com pegada de 1×1 (32×16) e 40 pixels de copa acima dela precisa de uma célula de 32 de largura e cerca de 56 de altura: 16 para o losango, 40 para o que se ergue acima dele. Decida esse tamanho de célula uma vez e mantenha todos os props dentro do mesmo módulo, ou o importador vai precisar de um deslocamento por sprite para cada um.

Props de vários tiles são desenhados em um losango maior. Um edifício 2×2 cobre quatro tiles, então sua pegada no solo é um losango de 64×32 mesmo que a arte se erga 48 ou 64 pixels acima dele. Mantenha a origem no centro da pegada — para um prop 2×2, esse é o ponto onde os quatro tiles se encontram — e não no centro da caixa delimitadora do sprite. Centralizar pela caixa delimitadora deixa a base meio tile deslocada, e o edifício parece flutuar sobre um canto do próprio terreno.

A ordenação de profundidade em um renderizador isométrico 2D é o algoritmo do pintor: ordene por tileX + tileY e depois desempate com uma prioridade por objeto. Props altos quebram isso. Uma torre de seis tiles de altura colocada na fileira 2 é desenhada sobre uma parede na fileira 5 que deveria ocultá-la. Duas correções: divida props altos em uma base e uma seção superior e ordene cada um pelas fileiras que ele realmente cobre, ou dê a cada sprite uma máscara de ocupação por tile para que o renderizador saiba com quais fileiras ele se sobrepõe.

Tilesets que não se repetem

Há duas emendas em um conjunto isométrico e elas precisam de correções diferentes. A emenda de valor é onde uma face lateral encontra a face superior do tile abaixo dela: se a base da parede for mais clara que o topo do solo, você obtém uma linha brilhante ao longo de cada parede do mapa. A emenda de padrão é onde uma sequência de tiles de solo idênticos se repete — o passo 2:1 é regular o suficiente para que o olho se fixe no ritmo depois de cerca de três tiles.

Variantes de borda escondem o padrão. O conjunto útil mínimo é de nove: um tile central, quatro tiles com transição em uma única borda e quatro com transições em duas bordas adjacentes. Desenhe a transição como uma faixa suave e quebrada de dois a quatro pixels, em vez de uma linha reta, ou você terá movido a emenda em vez de removê-la. Randomize o posicionamento com um hash da coordenada do tile em vez de um gerador de números aleatórios corrente, para que o mesmo mundo se regenere de forma idêntica toda vez — isso importa quando o mundo é reconstruído a partir de uma descrição escrita.

O grafo de adjacência é o mesmo dos tilesets ortogonais: quatro vizinhos de borda e quatro vizinhos diagonais por tile. É por isso que o conjunto blob de 47 tiles se transfere inalterado do trabalho ortogonal — apenas a arte muda. Não habilite casos apenas diagonais a menos que você os tenha desenhado, ou terá artefatos de canto ou uma lacuna de um pixel onde dois tiles de solo discordam.

• Conjunto blob de 47 tilesCobre todas as combinações de quatro e oito vizinhos, incluindo os casos apenas diagonais que um conjunto de nove tiles deixa de fora. Mesma contagem de tiles que um conjunto blob ortogonal; só a arte muda.
• Conjunto de nove tilesCentral, quatro tiles de borda única, quatro tiles de canto. Barato de desenhar, cobre a maioria das transições de solo e falha apenas nos casos apenas diagonais se suas regras de posicionamento proibirem gerá-los.
• Variantes espelhadasInverter um tile de solo horizontalmente é variação gratuita quando o tile não tem indicação de luz. Nunca espelhe uma parede ou um prop iluminado: a direção da luz se inverte junto e o tile deixa de combinar com os vizinhos.

Do iso 2D a um mundo iso 3D jogável

Um losango 2:1 é o que você obtém de uma câmera ortográfica com yaw de 45° e pitch de 30°. A 30°, o encolhimento vertical é exatamente sin(30°) = 0,5, então um tile de solo quadrado projeta-se como um losango duas vezes mais largo que alto — a mesma proporção dos pixels que você desenhou. O pitch isométrico verdadeiro de 35,264° dá 1,732:1 e não vai combinar com um tileset 2:1. Assim, um tile de 32×16 mapeia perfeitamente em uma unidade de mundo 1×1, e todo o conjunto 2D pode ser usado como texturas em quads planos ou extrudado em caixas sem redesenhar nada.

Duas coisas quebram quando a câmera se move. Primeiro, a órbita livre: com yaw de 37°, as bordas dos tiles caem entre pixels e o mapa inteiro cintila. Trave o pitch em 30°, encaixe o yaw em incrementos de 90° e, se você animar uma rotação, encaixe de volta antes que ela se estabilize. Segundo, a iluminação: a arte carrega uma luz pré-gravada vinda da parte superior esquerda. Se a luz principal permanecer fixa no espaço do mundo e a câmera girar 90°, o sombreamento da arte passa a discordar da cena. Faça a luz principal ser filha da câmera, ou grave o sombreamento na textura e mantenha a luz relativa à tela.

Se você quer preservar o visual pixelado em WebGL, renderize em uma resolução interna baixa e amplie com filtragem nearest-neighbour, e encaixe a posição da câmera em pixels inteiros da tela. Caso contrário, os centros dos texels caem entre fragmentos e a arte se arrasta enquanto o personagem anda, o que é lido como um bug de textura mesmo que a arte esteja correta.

O 3D game builder do Neta Studio pega uma descrição escrita e constrói um mundo Three.js real no navegador, com uma câmera ortográfica no pitch fixo — percorrível, sem toolchain local. Mini World é a versão em pequena escala disso e é a maneira mais rápida de testar se um tileset e um conjunto de personagens são lidos corretamente antes de se comprometer com um mapa grande. The Cyclops' Island é um mundo de exemplo finalizado que você pode percorrer para ver a projeção funcionando. Para personagens, o Agent Sprite Forge produz sprite sheets em um tamanho de célula escolhido, que é o que mantém o pivô consistente entre as direções.

Software de pixel art isométrica

Tudo nesta página pode ser feito em um editor raster com uma grade. O que as ferramentas dedicadas acrescentam é a consciência de tiles: um modo de tile map que mostra o tile que você está desenhando em relação aos vizinhos, para que você veja a emenda enquanto pinta, em vez de depois de estampá-lo duzentas vezes.

Escolha pelo que você precisa produzir, não por listas de recursos. Tiles precisam de uma grade, uma pré-visualização de tile e uma paleta estável. Personagens precisam de onion skin, células uniformes e uma exportação de sheet que carregue um pivô. Mapas precisam de uma ferramenta que armazene coordenadas de tiles, porque um PNG não é um mapa.

• AsepriteEditor raster com modo de tile map, grade de tiles, onion skin e exportação de sheet com JSON que carrega tags de quadro e pivô. A pré-visualização de tile é o motivo de ele ser usado para tilesets: você vê a emenda enquanto a pinta.
• LibreSpriteEditor de código aberto da mesma base de código. O fluxo de trabalho de tiles é basicamente o mesmo; espere menos recursos recentes.
• Krita e PhotoshopEditores raster gerais. Guias de grade e simetria dão a você um losango, mas nenhum dos dois tem um modo de tile map, então você estampa à mão. O filtro de deslocamento — desloque a tela pela metade do tamanho do tile e olhe o meio — ainda é a maneira mais rápida de encontrar uma emenda de valor.
• TiledUm editor de mapas, não uma ferramenta de arte. Armazena coordenadas de tiles, suporta orientação isométrica com tamanho de tile 2:1 e exporta os dados das camadas. Desenhe em uma ferramenta, posicione em outra.
• 3D game builder do Neta StudioBaseado no navegador. Uma descrição escrita se torna um mundo isométrico jogável em Three.js, então você pula o toolchain local e a etapa de importação por completo e testa se a arte é lida no pitch de câmera correto.
• Agent Sprite ForgeGera sprite sheets para personagens, que costuma ser a parte mais longa de um conjunto isométrico. Defina o tamanho da célula e a contagem de direções antes de gerar; um sheet criado com um tamanho de célula diferente não vai encaixar nos seus tiles.

Entre no mundo ao qual ele pertence

Um sprite é um personagem sem lugar para ficar. A última etapa é a que ninguém mais oferece: pegue o sheet que você acabou de criar e coloque-o em um mundo pelo qual alguém possa andar — uma pequena ilha, um planeta, uma esquina chuvosa. Todo mundo neste site foi feito a partir de uma descrição escrita e publicado como uma página que você pode jogar.

FAQ