Como Fazer um Mapa em Tiles — Guia Passo a Passo com um Editor Grátis

Aprender a fazer um mapa em tiles é, em grande parte, questão de tomar quatro decisões na ordem certa: o tamanho da célula, o layout do tileset, o empilhamento de camadas e onde ficam as colisões. Tome essas decisões uma vez e pintar o mapa se torna mecânico.

Os passos abaixo seguem a ordem que usamos quando uma descrição escrita se transforma em um mundo jogável no Neta Studio: escolha ou gere um tileset, fixe a grade, bloqueie o terreno antes dos detalhes, divida as camadas e depois deixe o autotiling resolver as bordas. Nada aqui exige instalação. O editor roda no navegador, e cada número abaixo pode ser alterado depois sem redesenhar o mapa.

O que é um mapa em tiles? (Definição clara + diagrama)

Um mapa em tiles é uma grade de índices, não uma grade de imagens. Cada célula guarda um número inteiro que aponta para um tile dentro de um tileset, e o renderizador consulta esse índice e desenha o tile na posição da célula. Um mapa de 20 por 12 com células de 32 px são 240 inteiros que cobrem 640 por 384 pixels.

Essa indireção é o ponto central. Um tile de grama é armazenado uma vez na folha e referenciado por centenas de células, então o arquivo do mapa continua pequeno e carrega rápido. Como um mapa em tiles é dado e não arte, você pode gerá-lo a partir de uma função de ruído, editá-lo como texto, comparar duas versões no Git ou transmiti-lo em blocos conforme a câmera se move.

O diagrama no topo desta página é montado com os nossos próprios tiles em uma grade de 12 por 8 a 32 px. A grama preenche o interior, a areia percorre as bordas esquerda e inferior, e a água fica no canto inferior direito, onde a areia termina. Lido como dados: a célula na coluna 3, linha 0 contém o índice de grama, a célula na coluna 0, linha 7 contém o índice do canto de água, e todas as outras células contêm um índice simples de areia. A origem é no canto superior esquerdo, x aumenta para a direita e y aumenta para baixo. Se a sua engine usa a origem no canto inferior esquerdo, o mapa é renderizado de cabeça para baixo até você inverter o índice da linha para linhas menos 1 menos y.

• A gradeColunas e linhas, fixadas quando o mapa é criado. Um mapa de 20 por 12 e um de 40 por 24 se comportam de forma bem diferente no mesmo zoom de câmera.
• O tamanho da célulaA pegada em pixels de uma célula: 16, 32, 48 ou 64. Precisa corresponder exatamente ao tamanho de tile do tileset, ou a amostragem cai no meio do tile.
• O conjunto de tilesA imagem para a qual os índices apontam, mais uma definição de quantas colunas e linhas ela tem.
• A camada de índicesUm inteiro por célula por camada. A camada de chão é densa, a camada de detalhes é quase toda vazia, e a camada de colisão guarda flags em vez de arte.

O que é um tileset? (e como ele se diferencia)

O tileset é o livro de figuras; o mapa em tiles é a página de referências para ele. Um tileset é dono dos pixels: uma folha, mais a regra que diz que a folha tem, por exemplo, 8 colunas de tiles de 32 px. Um mapa em tiles é dono do posicionamento: qual índice fica em cada célula de cada camada.

As duas palavras são trocadas o tempo todo porque a maioria dos editores as mostra lado a lado no mesmo painel, e porque um formato de arquivo único pode esconder a separação. No Tiled a separação é explícita, com um arquivo de tileset separado do arquivo do mapa. Na Unity, um asset Tile contém o sprite e um componente Tilemap contém as células. No Godot, TileSet e a camada de mapa em tiles são recursos separados.

A consequência prática: mudar o tileset altera todos os mapas que o referenciam, enquanto mudar um mapa em tiles altera um único nível. Troque uma folha de 32 px por uma de 48 px e cada índice ainda é resolvido, mas agora todo mapa é desenhado em outra escala e pode amostrar tiles vizinhos nas bordas. Trate o tileset como uma interface publicada, com um número de versão.

Passo 1: Escolha ou crie um tileset

Você tem dois caminhos: pegar uma folha existente ou gerar uma. Uma folha existente é mais rápida, mas você herda a paleta, o tamanho de célula e a licença dela. Verifique a licença antes de construir quarenta mapas em cima dela, e confira se é uma folha em grade em vez de um atlas empacotado. Um atlas guarda coordenadas de retângulo por tile em vez de uma célula uniforme, o que dificulta a indexação e torna o autotiling complicado.

Se o terreno precisa combinar com uma paleta específica, gere-o. O Agent Sprite Forge produz uma folha de tiles a partir de uma descrição escrita com um tamanho de célula consistente, o que elimina a causa mais comum de desalinhamento: uma folha em que um tile tem 33 px de largura porque o artista adicionou um brilho fora da célula.

Qualquer que seja o caminho, a primeira passagem não é desenhar. É medir. Abra a folha em zoom de 100%, conte as colunas e as linhas e anote o tamanho da célula em um lugar onde o resto da equipe possa encontrá-lo.

• Um único tamanho de célulaTodos os tiles com a mesma largura e altura, incluindo os que são quase vazios. Um único tile de 33 px em uma folha de 32 px desloca todos os índices seguintes se o exportador empacotar em ordem de leitura.
• Transparência de verdadeAlfa, não branco. Uma folha com fundo branco opaco desenha caixas brancas sobre o seu céu no navegador.
• Uma grade documentadaRegistre colunas, linhas e se há preenchimento. O cálculo do índice é linha vezes colunas mais coluna, começando em zero, lendo da esquerda para a direita e de cima para baixo.
• Uma decisão sobre o espaçamentoFolhas com preenchimento adicionam 1 ou 2 px entre as células para reduzir o sangramento de textura, ao custo de um deslocamento no cálculo da amostragem. Decida qual você vai usar antes da primeira pincelada.

Passo 2: Defina o tamanho do tile e a grade

O tamanho da célula é decidido por três coisas: o zoom em que o jogador realmente joga, a resolução de renderização que você mira e quanta arte você está disposto a desenhar. Um tile de 16 px em uma viewport de 1920 px de largura dá 120 células na horizontal, o que é muito nível por tela e muito pouco espaço para detalhes. Um tile de 64 px dá 30 células e pixels suficientes para desenhar uma árvore legível.

A restrição rígida é aritmética. O tamanho da célula precisa dividir a folha. Uma folha de 256 px de largura a 32 px dá exatamente 8 colunas; a 48 px dá 5,33, então a última coluna é uma fração de tile e cada índice depois dela se desloca. As dimensões da folha não são escolhas estéticas, são múltiplos do tamanho da célula.

Use escala inteira. Se a viewport não é um múltiplo inteiro da grade, as células caem em meio pixel, a filtragem amostra dois tiles vizinhos e uma emenda de um pixel aparece por todo o mapa. Resolva pelas duas pontas: filtragem nearest-neighbour na engine e um zoom de câmera que seja um número inteiro.

Passo 3: Pinte o chão, depois os detalhes

Pinte em passagens, e sempre o terreno primeiro. O terreno é o que você vai mudar; a decoração é o que você não vai querer mover. Coloque sessenta árvores e depois desloque a linha costeira quatro células para a esquerda, e cada uma dessas árvores fica de repente dentro da água.

Comece com um único tile. Bloqueie o mapa inteiro com um índice de grama, observe a silhueta no zoom de jogo e só então deixe o autotiling resolver as bordas. Os detalhes vêm depois que a forma está definida, e as colisões vêm depois dos detalhes, porque descobrir que um objeto é caminhável é uma edição de colisão, não uma repintura.

Pinte tudo o que o jogador pode ver. Células vazias mostram por padrão o que quer que o renderizador desenhe atrás do mapa, o que normalmente não é o fundo que você pretende. Uma cor de fundo definida na câmera é mais segura do que confiar em uma tela limpa.

Passo 4: Adicione camadas, profundidade e colisões

Um mapa em tiles deixa de ser plano no momento em que você o divide em camadas. O empilhamento mínimo útil é de três: uma camada de chão densa, uma camada de detalhes esparsa e uma camada de colisão que não contém arte nenhuma. Uma camada de sobreposição acima dos personagens vale a pena ser adicionada cedo se algo no mapa deve esconder o jogador.

A profundidade vem da mesma grade. Em um mapa de vista de cima, ordene pela borda inferior de cada objeto: o que tem os pés mais baixos é desenhado por último. Para os tiles isso é de graça, porque o y da célula já codifica a posição. Para personagens em movimento você precisa de uma ordenação por objeto com um desempate determinístico, normalmente o y do objeto mais o seu deslocamento fracionário dentro da célula. Sem isso, dois objetos na mesma linha piscam entre quadros.

As colisões se mapeiam na grade como um array paralelo com as mesmas dimensões. Dê a cada tile uma flag de solidez no tileset, para que pintar uma parede também a marque como sólida, e use a camada de colisão para exceções por mapa. Flags por célula não conseguem expressar rampas, plataformas de sentido único ou paredes finas dentro de uma célula. Essas pertencem a objetos separados sobrepostos à grade, e não ao mapa em tiles.

• Camada de chãoDensa: cada célula contém um índice. Esta é a única camada que você pode autotilar com segurança.
• Camada de detalhesEsparsa e transparente onde está vazia. Árvores, pedras, decalques. Nada aqui deve bloquear o movimento por acidente.
• Camada de sobreposiçãoDesenhada acima dos personagens: copas de árvores, pontes, telhados. Qualquer coisa que deva esconder o jogador.
• Camada de colisãoSem arte. Um array booleano do mesmo tamanho do mapa, semeado pelas flags de solidez do tileset e editado à mão para exceções.

Passo 5: Autotiling e o conjunto de 47 tiles

O autotiling é a parte que falha em silêncio. Um tile de terreno com oito vizinhos tem 2^8, ou 256, configurações de vizinhança possíveis. Os cantos só importam quando ambos os lados adjacentes estão preenchidos, e essa simetria reduz os 256 casos a 47 tiles únicos. É por isso que a maioria das engines e editores usa um conjunto de 47 tiles por terreno, organizado em um layout documentado.

Você também vai encontrar um conjunto de 16 tiles, que lê os quatro vizinhos laterais e ignora os cantos, e um conjunto de minitiles 2x2, em que cada célula é desenhada a partir de quatro quartos de tile, de modo que 13 a 16 minitiles cobrem todos os casos. O conjunto de 16 tiles é mais simples de desenhar, mas produz cantos rombudos. A abordagem de minitiles precisa de menos imagens, mas obriga você a criar cada terreno em quartos, o que suaviza a pixel art.

Como fazer um mapa em tiles que faz autotiling sem lacunas

A máscara é o mecanismo inteiro. Para cada célula, monte um inteiro de 8 bits a partir dos seus oito vizinhos: bit 0 para norte, bit 1 para nordeste, bit 2 para leste, e assim por diante no sentido horário. Escolha uma ordem, anote-a ao lado do código e nunca a mude. Uma máscara errada por um bit ainda produz terreno plausível, e é por isso que convenções incompatíveis sobrevivem meses antes de alguém perceber que os cantos estão errados.

Depois converta a máscara em um índice de tile. Há duas formas: uma tabela de consulta completa de 256 entradas, que é trivial de gerar e fácil de depurar porque você pode imprimir a linha, ou uma tabela de 47 entradas mais uma função de simetria. Prefira a tabela completa, a menos que o alvo tenha restrição de memória. Ela elimina uma classe inteira de bugs de canto.

Modos de falha do autotile que vale conhecer antes de montar o seu

As emendas nas bordas do mapa vêm de tratar as células fora dos limites de forma inconsistente. Decida uma vez se o mundo fora do mapa é vazio ou o mesmo terreno, e aplique essa regra a todos os terrenos.

A segunda falha comum é a sobrescrita. O autotiling reescreve as células que controla, então qualquer tile que você pintou à mão para um visual específico some na próxima passagem. Ou bloqueie a camada de terreno depois do autotiling, ou guarde as exceções manuais em uma lista separada que é executada por último.

Exemplos de mapas em tiles que você pode abrir e jogar

Ler um mapa que funciona ensina mais do que ler a descrição de um. The Cyclops' Island é um mapa jogável construído sobre um único conjunto de terreno com uma camada de colisão separada. Percorra a linha costeira e observe onde a transição de areia para água troca de tiles: esses são os 47 casos de blob em uso.

Mini World é o exemplo menor. Abra-o para ver o empilhamento de camadas — chão, detalhes e sobreposição — e para ver como são poucos os tiles de detalhe necessários para que um mapa pareça finalizado em vez de vazio.

O 3D Game Builder pega a mesma grade e a extruda. Cada célula vira um bloco, a camada de colisão vira paredes verticais, e a ordenação por y se torna profundidade real em uma cena Three.js. Se o seu mapa 2D é coerente, a versão 3D custa quase nada; se as camadas estão misturadas, a extrusão expõe isso imediatamente.

• The Cyclops' IslandUm mapa caminhável para estudar as bordas do terreno com autotiling na velocidade de jogo, em vez de no zoom do editor.
• Mini WorldUma grade pequena para inspecionar o empilhamento de camadas sem rolar a tela.
• O 3D Game BuilderO mesmo mapa em tiles extrudado em blocos, onde a camada de colisão se torna geometria e a profundidade se torna real.

Download de modelo de tileset (grade para PS / Aseprite)

O modelo é um auxílio de desenho, não uma obrigação. É uma tela transparente com guias a cada célula, uma marca interna de um pixel para a área segura e números de índice ao longo da linha superior e da coluna esquerda, para que você veja onde um índice cai enquanto desenha. Desenhe por cima dele e oculte-o antes de exportar.

Ajuste o modelo ao projeto. Uma tela de 512 por 512 contém uma grade de 16 por 16 células de 32 px. Com células de 16 px, o mesmo arquivo contém uma grade de 32 por 32, e você deve diminuir a opacidade das guias, porque nessa densidade elas escondem a arte.

Entre no mundo a que ele pertence

Um sprite é um personagem sem onde pisar. O último passo é o que ninguém mais oferece: pegue a folha que você acabou de montar e coloque-a em um mundo pelo qual alguém possa caminhar — uma pequena ilha, um planeta, uma esquina chuvosa. Cada mundo neste site foi feito a partir de uma descrição escrita e publicado como uma página que você pode jogar.

FAQ