Tileset de Masmorra em Pixel Art: Paredes e Chão Top-Down

Um tileset dungeon top-down 16x16 funciona quando a parede tem duas partes: o topo, visto de cima, e a face frontal, vista de frente. Essa vista 3/4 é o que dá altura às paredes da masmorra e, ao mesmo tempo, deixa o tileset simples para o TileMap montar. Com chão em 2 a 4 variações, cantos internos e externos e uma faixa de sombra, você monta qualquer sala e corredor.

Este tutorial é o caso específico da masmorra. A lógica geral de grade e bordas está no post sobre como desenhar um tileset no Aseprite; aqui o foco é a parede 3/4, que é a parte que mais confunde. Você desenha cada peça no Aseprite e testa a sala inteira com tiled mode e camada de tilemap. LibreSprite, Pixelorama e Piskel (grátis) servem para o desenho; o teste com tilemap é mais confortável no Aseprite e no Pixelorama, que têm camada de tilemap.

Tileset dungeon: as peças mínimas

Antes de desenhar, liste o que a sala precisa. Para uma sala retangular com corredores:

Algo em torno de 20 a 25 tiles. É o mínimo para nenhuma sala ter buraco.

Paleta: 3 tons de pedra para a parede (sombra, base, luz), 3 tons para o chão, um pouco mais escuros ou de outro matiz que a parede, e um tom quase preto para o vazio fora da masmorra. Mantenha a parede e o chão claramente diferentes: o jogador precisa ler onde pode andar.

Configuração no Aseprite: File > New (Ctrl+N), 96x96 pixels, fundo Transparent. Em View > Grid > Grid Settings, grade de 16x16, e ligue a grade com Ctrl+'.

Parede top-down: topo, face e sombra

Aqui está o conceito central. Na vista 3/4, a parede ao norte de uma sala aparece assim, de cima para baixo na tela:

1. Topo da parede: a parte de cima da parede, vista de cima. Uma faixa de pedra no tom claro, porque recebe luz.
2. Face frontal: o lado da parede virado para o jogador, visto de frente. Tijolos ou blocos de pedra no tom base, com a parte de baixo mais escura.
3. Sombra no chão: uma faixa escura no chão logo abaixo da face, onde a parede bloqueia a luz.

As paredes leste e oeste aparecem só como topo, porque você as vê de cima e não vê a face delas. A parede sul (embaixo) também aparece só como topo, ou com um pedaço de face de 3 a 4 pixels, conforme o estilo.

Topo de parede (16x16):

1. Preencha com o tom base de pedra com o balde (G).
2. Desenhe 3 ou 4 blocos irregulares com linhas de 1 pixel no tom de sombra, como pedras encaixadas vistas de cima.
3. Clareie a parte de cima de cada bloco com o tom de luz.
4. Ligue View > Tiled Mode > Tiled in Both Axes e confira se as juntas casam com o tile vizinho.

Face frontal (16x16 ou 16x32):

1. Linhas horizontais de 1 pixel no tom de sombra a cada 4 pixels: as fiadas de tijolo.
2. Juntas verticais alternadas entre as fiadas, como numa parede de tijolos real.
3. A fiada de cima, logo abaixo do topo, no tom de luz: é a quina que recebe luz.
4. As duas fiadas de baixo mais escuras, porque estão mais perto do chão e na sombra.
5. Uma variação: a mesma face com uma rachadura, um tijolo faltando ou uma tocha.

Uma face de 2 tiles de altura (16x32) dá paredes altas e opressivas, que combinam com masmorra. Uma face de 1 tile dá salas mais abertas. Escolha uma e mantenha no jogo inteiro.

Sombra no chão: um tile de chão com os 3 a 4 pixels de cima pintados com o tom mais escuro do chão. Ele vai logo abaixo de toda face frontal.

Chão de masmorra com variações para não repetir

O chão é o tile que mais aparece, e qualquer padrão nele salta aos olhos.

1. Chão base: lajotas de pedra. Divida o tile em 2 ou 4 lajotas com linhas de 1 pixel no tom de sombra do chão. As linhas não precisam ser retas: desvie 1 pixel em um ou dois pontos.
2. Teste com tiled mode: se aparecer uma grade perfeita, desloque as juntas para que algumas lajotas atravessem a borda do tile.
3. Variação A: o mesmo chão com uma lajota rachada.
4. Variação B: o mesmo chão com 2 ou 3 pedrinhas ou um pouco de musgo.
5. Variação C: uma lajota mais escura, como se estivesse molhada.

Na hora de montar, use o chão base em uns 70% da sala e espalhe as variações. A Godot e a Unity permitem sortear entre tiles, o que poupa trabalho.

O contraste do chão é menor que o da parede. Chão muito contrastado compete com o personagem e com os inimigos, que são o que o jogador precisa ver.

Cantos internos e externos

Os cantos são onde a vista 3/4 complica. Pense em uma sala vista de cima:

Cantos externos (os 4 cantos de fora da sala):

• Superior esquerdo e superior direito: o topo da parede faz a curva de 90 graus, e a face frontal termina com uma quina. Desenhe a face com a última coluna no tom de sombra, como a lateral do bloco.
• Inferior esquerdo e inferior direito: só o topo faz a curva, sem face visível.

Cantos internos (quando a parede entra na sala, como num corredor em L):

• O topo da parede encontra outro topo, e a face aparece só de um lado. Desenhe cada canto interno a partir dos tiles de topo e de face que você já tem: copie as metades com a seleção retangular (M), cole e ajuste a junção.

Copiar das peças prontas é o que garante que a pedra continua igual no canto. Redesenhar cada canto do zero gera tons e juntas diferentes, e a sala parece remendada.

Desenhar 20 peças que encaixam é o trabalho do tileset. Fazer a masmorra inteira (tileset, portas, armadilhas, inimigos e iluminação) funcionar como uma arte só, com a parede dando a altura certa e o personagem sempre legível, é a etapa em que muita gente refaz o tileset três vezes por não ter uma ordem de produção.

Montar uma sala de teste com as peças mínimas antes de decorar qualquer coisa mostra cedo o que está faltando no conjunto.

Testando o tileset 16x16 com tiled mode

O Aseprite tem duas formas de testar.

Tiled mode, para peças que repetem. Em View > Tiled Mode você escolhe Tiled in Both Axes, Tiled in X Axis ou Tiled in Y Axis. Use o eixo X para a face da parede (que repete na horizontal) e os dois eixos para o chão. Tudo que você desenha perto de uma borda aparece do outro lado, o que expõe emendas na hora.

Camada de tilemap, para montar a sala. Desde a versão 1.3, o Aseprite tem camadas de tilemap: Layer > New > New Tilemap Layer (Space+N). Nessa camada, no modo Draw Pixels, você desenha e o Aseprite cria os tiles do tileset sozinho no modo Auto, que é o padrão. Alterne para o modo Draw Tiles com Space+Tab e pinte a sala escolhendo os tiles prontos. Monte uma sala de 10x8 tiles com um corredor saindo dela e uma parede em L: se faltar alguma peça, você descobre aqui.

Se usar Pixelorama, ele também tem camada de tilemap com modo de desenhar tiles. No Piskel ou no LibreSprite, monte a sala de teste num arquivo maior, colando os tiles exportados na grade.

Para exportar o tileset, use File > Export > Export Tileset (para o tileset da camada de tilemap) ou File > Export > Export Sprite Sheet (Ctrl+E) se você desenhou as peças numa grade comum.

Na Godot 4, importe a folha num TileSet com tamanho de tile 16x16, configure colisão nas peças de parede e use os terrains para pintar as paredes automaticamente. Para a parede 3/4, a face frontal fica numa camada de TileMapLayer abaixo do personagem e o topo da parede sul pode ir numa camada acima, para o personagem passar atrás. O post sobre TileMap na Godot 4 mostra as camadas e a colisão.

Na Unity, importe com Sprite Mode: Multiple, Filter Mode: Point (no filter) e Compression: None, fatie em 16x16 no Sprite Editor e crie os tiles arrastando os sprites para a Tile Palette. Use um Tilemap para o chão, outro para as paredes com Tilemap Collider 2D, e as Rule Tiles do pacote 2D Tilemap Extras se quiser que a parede se monte sozinha.

Erros comuns: parede sem face e chão muito contrastado

Parede sem face. A parede norte só com o topo, igual às laterais. A sala fica achatada, como uma planta baixa, e perde toda a profundidade. A face frontal é o que dá altura.

Chão muito contrastado. Lajotas com juntas pretas e pedras muito claras. O personagem some. Reduza o contraste do chão até a parede e os personagens chamarem mais a atenção.

Parede e chão do mesmo tom. O jogador não sabe onde pode andar. Mude o valor (mais claro ou mais escuro) ou o matiz.

Sem sombra da parede. A face parece colada no chão. A faixa escura logo abaixo da face ancora a parede.

Cantos redesenhados do zero. Pedras que mudam no canto. Copie das peças prontas.

Luz incoerente. O topo das paredes claro em cima e a face clara embaixo. A luz vem de cima: topo claro, face mais escura embaixo.

Próximo passo

Desenhe as peças mínimas, monte a sala de teste na camada de tilemap e só depois faça portas, escadas e decorações. Quando o conjunto estiver fechado, o post sobre como criar um tileset para jogo 2D aprofunda o autotile e a colisão direto no tileset.