Como Desenhar um Tileset no Aseprite

Fazer um cenário de jogo 2D quadrado por quadrado é inviável. Você desenha um pedaço de chão, um pedaço de borda, um canto, e a engine repete essas peças pra montar mapas gigantes sem você desenhar cada pixel. Esse conjunto de peças é o tileset, e aprender a desenhar um tileset no Aseprite é a diferença entre um mundo que se monta em minutos e um que trava logo no primeiro chão de grama. Este post é sobre o lado da arte: a grade, o tamanho do tile, as bordas que casam e um terreno de grama sobre terra que funciona de verdade.

Vou assumir que você já abriu o Aseprite pelo menos uma vez. Se ainda não pegou o básico da ferramenta, dá uma passada antes no guia de Aseprite para jogos, porque aqui eu vou direto pra parte de construir os tiles.

O que é um tile e por que o tamanho vem primeiro

Um tile é um quadrado de imagem que a engine desenha lado a lado numa grade. Todo tile do mesmo tileset tem o mesmo tamanho, e esse tamanho é a primeira decisão do projeto porque ele contamina tudo depois: a resolução do jogo, o alinhamento do personagem, a escala da câmera.

Os dois tamanhos que você vai ver em praticamente todo lugar são 16x16 e 32x32 pixels.

• 16x16 é o padrão da pixel art clássica. Cabe muita coisa na tela, os arquivos são leves e a maior parte dos assets prontos e tutoriais usa esse número. A limitação é o detalhe: dezesseis pixels de lado não deixam espaço pra muita nuance.
• 32x32 dá o dobro de espaço em cada eixo, então você consegue sombra, textura e formas mais complexas. O custo é que cada tile dá mais trabalho e o jogo inteiro pesa um pouco mais.

A regra que importa: escolha um e não misture. Um projeto com tiles de 16 e de 32 no mesmo mapa vira um pesadelo de alinhamento na engine. Pra este post eu vou usar 32x32, porque nesse tamanho dá pra ver bem o que cada técnica faz, mas tudo se aplica igual a 16x16.

Crie o canvas em File > New. Um truque útil é não trabalhar em um único quadrado de 32x32 isolado. Crie um canvas maior, tipo 128x128 ou 96x96, pra desenhar vários tiles vizinhos ao mesmo tempo e ver como eles conversam. A grade divide esse canvas nos quadrados individuais.

Ligando a grade e o snap

Sem grade, você desenha no escuro. O Aseprite deixa você configurar uma grade que bate exatamente com o tamanho do tile, e é isso que transforma um canvas solto num tabuleiro previsível.

Vá em View > Grid > Grid Settings. Ali você define a largura e a altura da grade. Coloque os dois valores iguais ao seu tile: 32 e 32 (ou 16 e 16). Deixe a origem em 0,0 pra grade começar no canto do canvas. Depois confirme que a grade está visível em View > Grid > Show Grid, ou com o atalho.

Agora o snap. Com o snap ligado, ferramentas como a seleção retangular e o movimento grudam nas linhas da grade em vez de parar em qualquer pixel aleatório. Ative em View > Grid > Snap to Grid. Isso é o que torna viável selecionar um tile inteiro de uma vez, copiar, colar e mover peças sem desalinhar por um pixel. Sem snap, você vai selecionar 31 pixels achando que pegou 32 e não vai entender por que a peça entrou torta na engine.

Um detalhe: a grade e o snap são só ajuda visual e de seleção. Eles não impedem o lápis de pintar por cima da linha. A grade te mostra onde termina um tile e começa o outro, mas quem respeita esse limite é você.

Tile mode: o segredo das bordas que casam

Aqui está a ferramenta que separa um tileset amador de um profissional. O problema central de todo tile de chão ou textura é a continuidade: quando a engine coloca dois tiles iguais lado a lado, a borda direita de um encosta na borda esquerda do outro. Se esses dois lados não combinam, aparece uma emenda, uma linha visível que denuncia a grade e destrói a ilusão de um chão contínuo.

O Aseprite resolve isso com o Tiled Mode. Vá em View > Tiled Mode e escolha Tiled in Both Axes. A partir daí, o canvas mostra seu tile repetido em todas as direções, ao vivo, enquanto você desenha. É como pintar já vendo o resultado montado.

Com o tile mode ligado, o teste é simples: se você vê linhas retas suspeitas cortando a repetição, ou se a textura "corta" bruscamente na fronteira, a borda não casa. O que você faz é desenhar puxando a textura pra fora de um lado sabendo que ela vai reentrar pelo lado oposto. Um tufo de grama que sai pela borda direita reaparece na esquerda. Um pedregulho que encosta na beirada de baixo continua na de cima.

Pra um tile de grama base, a técnica é:

1. Preencha o quadrado com a cor de base do verde.
2. Espalhe alguns pixels de um verde mais escuro e um mais claro pra dar textura, sem formar padrão óbvio.
3. Com o tile mode ligado, olhe as quatro fronteiras. Onde aparecer uma costura, mova ou apague pixels até a transição ficar invisível.
4. Evite qualquer detalhe grande e único no meio do tile. Ele vira um carimbo repetido que o olho pega na hora. Textura de chão quer ser discreta.

O erro clássico de iniciante é desenhar o tile de chão isolado, achar lindo, e só descobrir a emenda depois de montar o mapa na engine. Tile mode mata esse retrabalho porque você vê a emenda no segundo em que ela nasce.

Desenhando um terreno de grama sobre terra

Um tileset de terreno simples não é um tile só. Pra grama encontrar a terra de forma orgânica, você precisa de um pequeno conjunto de peças. O mínimo honesto pra um terreno bom é este:

• Grama cheia: o tile central, todo verde, que se repete sem emenda. É o que você já desenhou no passo anterior.
• Terra cheia: o mesmo, mas marrom, pro chão exposto ou pro subsolo. Mesma disciplina de bordas que casam.
• Quatro bordas retas: cima, baixo, esquerda e direita. Numa borda de topo, a grama ocupa a parte de cima do tile e a terra a de baixo, com a linha de transição irregular no meio. As outras três são rotações da mesma ideia.
• Quatro cantos externos: onde duas bordas se encontram formando uma quina de grama para fora, tipo o canto de um platô.
• Quatro cantos internos: o inverso, uma reentrância, onde a terra invade e a grama faz um canto para dentro.

O ponto de atenção é a linha de transição entre grama e terra. Se você fizer uma linha reta perfeita, o resultado parece um adesivo colado, artificial. A grama de verdade não termina numa régua. Desenhe a fronteira irregular: alguns pixels de grama descem pra dentro da terra, tufos soltos, uma variação de altura de dois ou três pixels ao longo da borda. E, tão importante quanto, os pixels da borda esquerda de um tile de topo precisam casar com a borda direita do tile de topo vizinho, senão a transição salta feio quando você enfileira dois deles.

Um jeito eficiente de trabalhar: desenhe a grama cheia e a terra cheia primeiro. Depois, num canvas com vários quadrados, copie a grama pra dentro dos tiles de borda e vá comendo a parte de baixo com terra, escavando a linha irregular. Os cantos você deriva das bordas, rotacionando e ajustando a quina. Manter tudo no mesmo canvas ajuda a comparar as bordas vizinhas na hora.

Se em algum momento você começar a acumular muitas variações (grama com flor, terra com pedra, caminho de terra batida), vale organizar cada família numa camada separada. A lógica de camadas e como navegar entre elas está no guia de camadas e timeline no Aseprite, e num tileset que cresce isso salva bastante confusão.

O problema da emenda, revisitado

Vale insistir na emenda porque é o defeito que mais aparece em tileset de iniciante, e ele tem duas causas distintas que se confundem.

A primeira é a borda que não casa, que o tile mode resolve. A segunda é mais sorrateira: o detalhe repetido. Mesmo com bordas perfeitas, se o seu tile de grama tem uma pedrinha bem no centro, ao repetir você cria uma grade regular de pedrinhas que o olho lê na hora como padrão artificial. A emenda aqui não é uma linha, é um ritmo.

A defesa contra isso é textura de baixo contraste e distribuída, sem nenhum elemento que puxe o olhar. Se você quer variação, o certo é desenhar dois ou três tiles de grama diferentes e deixar a engine sortear entre eles, em vez de tentar meter todo o interesse visual num único tile que vai se repetir mil vezes. Um bom tile de chão é quase entediante sozinho e lindo em quantidade.

Exportando a folha pronta pra virar tileset

Com os tiles desenhados, falta entregar num formato que a engine entenda. O que você quer exportar é uma folha única, uma imagem PNG com todos os tiles organizados numa grade uniforme, sem espaço entre eles e sem margem. É a partir dessa folha que a engine fatia os tiles de volta.

No Aseprite há dois caminhos, dependendo de como você montou o arquivo.

Se você desenhou tudo num único canvas grande, com os tiles já lado a lado na grade, basta exportar a imagem direto em File > Export ou File > Save As como PNG. A folha já está pronta, é o próprio canvas.

Se você usou frames ou o sistema de tilemap do Aseprite pra organizar as peças, use File > Export Sprite Sheet. Nesse diálogo, o que importa pro seu caso:

• Escolha um layout em grade (Rows ou Columns, ou By Rows).
• Deixe Padding e Spacing em zero. Tileset de engine espera tiles colados. Espaçamento entra como uma borda estranha quando a engine fatia.
• Confirme que o tamanho de cada célula bate com o tile: 32x32 ou 16x16.
• Exporte como PNG, que preserva a transparência das bordas.

Do lado da engine, a Godot 4 importa esse PNG num TileSet configurando o tamanho da região igual ao seu tile. Como as bordas casam e não há espaçamento, os tiles se alinham na grade do mapa e o chão fica contínuo. A parte de configurar o nó de tilemap na engine é assunto de outro dia; aqui o trabalho de arte terminou quando a folha saiu limpa.

Um último cuidado no export: mantenha a escala em 100 por cento. A tentação de exportar "em 2x pra ficar maior" estraga tudo, porque a engine é quem escala o pixel art na tela. Se você exportar já ampliado, perde a nitidez e o alinhamento na grade. A folha sai no tamanho real dos pixels e a ampliação acontece no jogo.

Do tileset ao jogo de verdade

Desenhar o tileset é a metade da arte. A outra metade é ver ele vivo num mapa, com colisão, camadas de fundo e um personagem andando por cima. Esse pulo pra dentro da engine é onde muita gente trava, e é onde um curso estruturado economiza semanas de tentativa e erro. Se você quer o caminho do tileset até um jogo rodando, vale olhar qual é o melhor curso de Godot pra montar o mapa com o que você acabou de desenhar.

Fecho com o resumo do que realmente importa. Escolha um tamanho de tile e não misture. Ligue a grade e o snap pra trabalhar alinhado. Use o tile mode pra ver as bordas casando ao vivo e mate a emenda no nascimento. Desenhe grama cheia, terra cheia, as quatro bordas e os oito cantos pra um terreno com forma de verdade. E exporte uma folha limpa, sem espaçamento e em escala 100 por cento. Faça isso e o seu primeiro chão de grama vai se montar na engine sem uma única linha suspeita cortando o cenário.