Casas e Construções em Pixel Art Top-Down

Pixel art de casa em jogo top-down funciona quando você para de pensar em "desenhar uma casa" e passa a pensar em módulos: parede, telhado, porta, janela e quina, cada um com tamanho múltiplo de 16 pixels, desenhados na mesma perspectiva 3/4. Com meia dúzia dessas peças você monta casas de tamanhos diferentes e uma vila inteira sem redesenhar nada.

No fim deste post você vai ter um kit de construção de 16x16 no Aseprite (paredes de madeira e pedra, telhado de telha, porta, janela e sombra), o jeito de montar casas variadas a partir dele e a lista dos erros que fazem a vila parecer colada de pedaços de jogos diferentes.

Pixel art casa: a perspectiva 3/4 do top-down

Jogos top-down de RPG e de fazenda quase nunca usam visão de cima pura. Eles usam a chamada perspectiva 3/4 (ou "top-down oblíquo"): você vê o chão como se estivesse de cima, mas as coisas em pé mostram a face da frente. Numa casa, isso significa duas áreas bem claras:

• O telhado, que ocupa a parte de cima do desenho e aparece "deitado", visto de cima e um pouco de frente.
• A parede da frente, que aparece em pé, com porta e janelas, sem nenhuma inclinação.

As paredes laterais não aparecem, ou aparecem só como uma faixa fina. Isso é o que permite que tudo encaixe no grid: a fachada é um retângulo, o telhado é outro retângulo em cima dele.

Uma regra prática para a proporção: o telhado ocupa entre metade e dois terços da altura total da casa. Telhado curto demais faz a casa parecer uma caixa vista de frente; telhado alto demais faz parecer que você está olhando de um avião.

Grid e tamanho: casa em múltiplos de 16

Antes de desenhar, defina a escala a partir do personagem. Num jogo com tile de 16x16, o personagem costuma ter 16x32 (um tile de largura, dois de altura, contando a cabeça). A partir daí:

• A porta tem 1 tile de largura (16 px) e algo entre 20 e 24 px de altura visível, para parecer que o personagem passa por ela com folga.
• A parede da frente tem 2 tiles de altura (32 px). Dá espaço para porta, janela e uma faixa de base.
• O telhado tem 2 ou 3 tiles de altura (32 a 48 px).
• A largura mínima de uma casa é 3 tiles (48 px): quina, porta, quina. A casa "padrão" fica com 4 ou 5 tiles.

No Aseprite, configure o grid antes de qualquer pixel:

1. File > New, canvas de 128x128 para começar o kit.
2. View > Grid > Grid Settings: largura e altura 16.
3. View > Show > Grid (atalho Ctrl+') para enxergar a grade.
4. View > Grid > Snap to Grid (atalho Shift+S) para que seleções e movimentos encaixem.

Se você ainda não montou um tileset no Aseprite, o post Como Desenhar um Tileset no Aseprite mostra o grid, o tiled mode e a exportação da folha em detalhe. Aqui o foco é a construção.

Telhado, parede e porta como módulos

A ideia de módulo é simples: cada pedaço da casa é um tile que pode ser repetido ou trocado. Para uma casa de telhado de duas águas vista em 3/4, o kit mínimo tem:

Com o meio do telhado e o meio da parede repetíveis, uma casa de 3 tiles e uma de 6 tiles usam exatamente as mesmas peças. Só muda quantas vezes o meio aparece.

Usando a camada de tilemap do Aseprite

Desde a versão 1.3 o Aseprite tem camadas de tilemap, e elas combinam muito bem com esse kit:

1. Layer > New > New Tilemap Layer (atalho Space+N). Na janela, em Tileset, escolha New Tileset e deixe Grid Width e Grid Height em 16.
2. Desenhe os módulos no modo Draw Pixels. No submodo Auto (o padrão, Space+2), o Aseprite cria e reaproveita tiles sozinho conforme você desenha.
3. Quando o kit estiver pronto, troque para o submodo Manual (Space+1) para não bagunçar a ordem do tileset sem querer.
4. Alterne para Draw Tiles com Space+Tab e monte casas colocando tiles inteiros, como se estivesse num editor de mapa.

A vantagem é que, se você retocar o tile da parede de madeira, todas as casas que usam esse tile mudam juntas.

Material: madeira, pedra e telha

Cada material tem um padrão de pixel que o jogador lê de longe. Use de 3 a 4 tons por material (sombra, base, luz e, se quiser, um destaque).

Madeira (tábuas horizontais). Linhas de 1 pixel no tom de sombra a cada 4 pixels de altura. Quebre algumas linhas com uma emenda vertical curta (2 px) em posições diferentes, para não parecer listrado. Um pixel de luz no começo de cada tábua dá volume.

Pedra. Blocos de tamanhos diferentes, entre 4 e 7 pixels de largura, com a junta no tom de sombra. Coloque o pixel de luz no canto superior esquerdo de cada pedra (luz vindo de cima e da esquerda é o padrão mais comum em top-down) e o de sombra embaixo. Evite pedras todas iguais: o olho percebe o padrão em segundos.

Telha. Fileiras horizontais com curvinhas de 3 a 4 pixels de largura. Cada fileira tem o tom base em cima e o tom de sombra na base, e a fileira de baixo é deslocada meia telha em relação à de cima. Esse deslocamento é o que transforma listras em telhado.

Mantenha os materiais dentro da paleta do jogo. Uma paleta de 16 a 32 cores dá conta de vila inteira se você reaproveitar a mesma rampa de marrom para madeira e porta, e a mesma rampa de cinza para pedra e chaminé.

Sombra de construção no chão

Sem sombra, a casa parece um adesivo colado no gramado. A sombra resolve isso com um custo baixo:

• Desenhe a sombra como uma faixa de 4 a 8 pixels de largura no lado oposto à luz (se a luz vem da esquerda, a sombra fica à direita e um pouco embaixo).
• Use uma cor só, mais escura e um pouco mais fria que o chão. Em vez de preto com transparência, escolha um verde escuro para grama, um marrom escuro para terra.
• Separe a sombra numa camada própria. Na hora de exportar, ela vira um tile de sobreposição que você coloca por cima do chão no editor de mapa.

Dentro da própria casa existe outra sombra importante: a do beiral sobre a parede. Uma linha de 2 pixels no tom mais escuro da parede, logo abaixo do telhado, já separa os dois volumes.

Quando a vila começa a ter casas, cercas, árvores e caminhos, chega uma hora em que o problema deixa de ser desenhar uma peça e passa a ser fazer todas as peças conversarem: mesma luz, mesma paleta, mesma escala, encaixando no mapa do jogo de verdade. É nesse ponto que muita gente que estuda sozinha trava, porque cada tutorial ensina uma peça isolada e ninguém mostra o cenário inteiro fechando.

Montando uma vila a partir das peças

Com o kit pronto, a vila é montagem. Algumas regras para ela não parecer repetitiva:

1. Varie a largura, não o estilo. Uma casa de 3, uma de 4 e uma de 6 tiles com o mesmo kit já parecem diferentes.
2. Troque a cor do telhado. Duplique o tileset do telhado e mude só a rampa (no Aseprite, Edit > Replace Color ou, com a sprite em modo indexado, trocando as cores da paleta). Telhado vermelho, azul e verde com o mesmo desenho multiplicam o kit por três.
3. Misture materiais. Base de pedra (1 tile de altura) com parede de madeira em cima é um clássico que dá cara de construção mais rica sem peça nova.
4. Coloque props na frente. Barril, vaso, placa e cerca quebram a linha reta da fachada.
5. Deixe caminho até a porta. Um tile de caminho de terra ligando a porta à rua diz ao jogador que aquela casa pode ser visitada.

Para montar o mapa, exporte a folha de tiles (File > Export > Export Sprite Sheet, ou exporte o tileset da camada de tilemap) e leve para o editor. O post Tiled: como criar mapas 2D para seu jogo mostra como organizar camadas de chão, construção e sobreposição, que é exatamente o que a casa precisa: chão embaixo, parede no meio e o telhado numa camada acima do personagem.

Godot e Unity

Na Godot, importe a folha num TileSet com tamanho de tile 16x16 e use duas camadas TileMapLayer: uma para paredes (com colisão) e outra para telhados, acima do personagem, para ele poder passar "atrás" da casa. Desligue o filtro da textura (Texture Filter em Nearest) para o pixel não borrar.

Na Unity, importe a folha como Sprite com Sprite Mode em Multiple, Pixels Per Unit 16 e Filter Mode em Point (no filter), fatie no Sprite Editor por Grid By Cell Size 16x16 e pinte com a Tile Palette em dois Tilemaps, ajustando o Order in Layer para o telhado ficar acima do jogador.

Erros comuns: perspectiva misturada, casa fora do grid, porta pequena

Perspectiva misturada. O telhado foi desenhado num ângulo, a parede noutro, a porta de frente pura. O sintoma é a casa parecer torta mesmo com todos os pixels "certos". Correção: desenhe uma casa de referência só com blocos de cor (sem detalhe), aprove o ângulo e use como gabarito para todas as outras.

Casa fora do grid. Uma janela de 13 pixels, um telhado de 37 pixels de altura. Funciona na imagem, quebra no mapa: a peça não encaixa, sobra meio tile de grama vazio e a colisão fica estranha. Correção: arredonde tudo para múltiplos de 16 e use detalhes menores dentro dos tiles, nunca peças que cruzam o grid pela metade.

Porta pequena demais para o personagem. Muito comum quando a casa é desenhada antes do personagem. O jogador olha, vê que o herói não cabe na porta e o mundo perde credibilidade. Correção: coloque o sprite do personagem do lado da casa enquanto desenha. Se você ainda não tem personagem, faça um retângulo de 16x32.

Detalhe demais na parede. Cada tábua com nó, rachadura e prego vira ruído quando a parede repete 10 vezes. Correção: o tile do meio é quase liso; os detalhes ficam em tiles de variação que você espalha de vez em quando.

Contorno preto em tudo. Contorno preto puro em cada tábua e telha deixa a vila pesada. Use contorno só na silhueta da casa e num tom escuro da própria cor do material.

Próximo passo

Faça o kit mínimo hoje: 1 meio de parede de madeira, 1 quina, 1 porta, 1 janela e o telhado em 3 colunas (esquerda, meio, direita). Monte três casas de larguras diferentes num canvas de 256x144 e coloque um personagem 16x32 na frente de cada porta. Se as três parecerem do mesmo jogo e o personagem couber em todas as portas, o kit está certo.

Depois, crie a variação de pedra e a de telhado colorido, e leve tudo para um mapa no editor. Se você está começando a fazer tiles agora, o post Como Criar um Tileset para Jogo 2D ajuda a planejar as bordas e transições do chão em volta da vila.