Editor de Mapas em Tiles — Criador de Tilemaps e Editor de Níveis Online Grátis

Um editor de mapas em tiles é uma grade, um tileset e um pincel. Você importa um PNG ou gera um conjunto a partir de um prompt, define um tamanho de célula, pinta células em várias camadas, marca as sólidas para colisão e exporta. O editor de mapas em tiles desta página roda no navegador: sem download, sem conta, sem etapa de build, e o editor é a primeira coisa que você vê em vez de uma captura de tela dele.

Tudo o que vem a seguir descreve o que a ferramenta realmente faz e onde ela quebra. Por que uma folha com margem de 1 px é importada errado se você informar apenas o tamanho do tile. Por que uma regra de autotile com dois estados por borda precisa de 47 variantes em vez de 16. O que o TMX carrega que um PNG não consegue. E por que poder apertar play e caminhar pelo mapa que você acabou de pintar muda a rapidez com que você consegue corrigi-lo.

O editor de mapas em tiles (ferramenta ao vivo)

A ferramenta ao vivo é a primeira coisa nesta página. O canvas é uma grade, o tileset fica ao lado dela, e a lista de camadas é uma pilha de grades independentes que você pode ocultar e travar uma de cada vez. Pintar uma célula é um clique. Arrastar pinta uma sequência de células. Uma ferramenta de retângulo preenche uma área, um preenchimento por inundação cobre o chão aberto, e uma borracha limpa de volta até a camada de baixo.

Quatro capacidades fazem o trabalho. A grade fixa um único número para todo o documento, o tamanho da célula em pixels, e cada pincel, camada e exportação é medido nessa unidade. Os pincéis decidem o que um clique escreve: tile único, bloco retangular, preenchimento por inundação, linha ou borracha. As camadas empilham grades separadas para que terreno, decoração e colisão continuem editáveis de forma independente. A colisão marca uma célula como sólida e a armazena como dado em vez de pintá-la na arte, então repintar uma parede nunca significa refazer o seu volume de bloqueio.

Não há diálogo de salvamento nem etapa de compilação entre pintar e jogar. O documento que o editor escreve é o documento que o runtime lê, o que elimina toda aquela classe de bugs em que um mapa parece correto em um programa e se desloca meio tile assim que carrega em outro.

Importe um tileset ou gere um

Há duas rotas de entrada. Importe um PNG que você já tem ou gere um conjunto a partir de um prompt de texto e pinte com ele. As duas terminam no mesmo lugar: uma folha de tiles alinhada ao lado do canvas.

Se você preferir não desenhar nenhuma das duas, a biblioteca de tilesets grátis é um catálogo de folhas prontas em tamanhos de célula comuns. O Agent Sprite Forge cuida da outra metade do problema, personagens e objetos, que seguem regras diferentes do terreno e normalmente querem mais quadros por ação.

O editor pede o tamanho do tile antes de carregar qualquer coisa, e esse número precisa corresponder exatamente à arte. Uma folha de 256 por 256 com tiles de 16 px tem 16 colunas por 16 linhas. Se a folha tem uma margem de 1 px ao redor da borda e 1 px de espaçamento entre os tiles, um padrão comum em ferramentas de sprite, a aritmética bruta dá a contagem de colunas errada, então informe também a margem e o espaçamento, ou recorte a folha. Se você errar, a grade se distorce: a primeira coluna parece certa e cada tile depois dela fica deslocado por um erro que cresce ao longo da folha.

Outras três coisas quebram a importação de um tileset. Tiles com 15 ou 33 px porque a arte foi escalada por um fator não inteiro. Arte desenhada 1 px dentro da célula do vizinho, o que aparece como uma linha fina do tile adjacente ao longo de cada emenda e piora quando a engine faz amostragem com filtragem ativada. E um canal alfa em que a região transparente na verdade é preta, o que transforma cada célula vazia em um bloco sólido assim que o mapa é renderizado.

Em vez disso, descreva o conjunto: tamanho da célula, vista, paleta e os papéis de tile de que você precisa, como chão, parede, canto de parede, porta e borda de água. O gerador de tileset com AI devolve uma folha já alinhada ao tamanho de célula solicitado, então ela é importada sem a aritmética de margem.

Trate o resultado como um ponto de partida. Conjuntos gerados são fortes em superfície e fracos em continuidade: o décimo sexto tile de chão raramente se encaixa sem emendas no primeiro, e os tiles de borda normalmente precisam ser repintados antes que o autotiling os aceite como um terreno conectado.

Pinte tiles, adicione camadas e colisões

Um mapa que continua fácil de editar tem três camadas, não uma. O chão contém o terreno sobre o qual o jogador caminha. O detalhe contém tudo o que é desenhado por cima, como paredes, árvores, caixas e adesivos, para que você possa reestilizá-lo ou ocultá-lo sem tocar no chão. A colisão não contém nada visível: é uma máscara de células nas quais o jogador não pode entrar.

Mantenha a colisão como dado na própria camada, não como tiles escuros embutidos no terreno. Se os volumes de bloqueio forem pintados na arte do chão, editar a arte muda o design do nível e editar o design do nível muda a arte. Com uma camada separada, você pode repintar o chão quantas vezes quiser e as paredes permanecem onde estavam.

O modo de falha a que você deve ficar atento é uma célula não marcada em uma fileira de paredes. Uma única célula de colisão ausente em uma parede de quarenta tiles é um buraco pelo qual o jogador passa, e é invisível no zoom normal. A rotina que pega isso: oculte todas as camadas exceto a de colisão, olhe para o mapa como uma silhueta e verifique se o contorno está ininterrupto.

Autotiling e o conjunto de 47 tiles explicado

O autotiling é a parte de um editor de mapas em tiles que escolhe qual tile desenhar com base no que o cerca. Em vez de escolher um canto de parede à mão, você pinta qualquer tile de parede e o editor inspeciona as células vizinhas, monta uma máscara de bits e troca pela variante que corresponde. Pinte uma segunda parede ao lado da primeira e as duas células se atualizam.

A versão simples da regra olha quatro vizinhos, norte, leste, sul e oeste, o que dá dois elevado a quatro, ou 16 combinações. Esse conjunto é fácil de desenhar e falha em um ponto específico: o canto interno. Pegue uma célula de chão com uma parede ao norte e uma parede a leste, e nada mais. Não é um caso exótico, é o que o interior de uma sala em formato de L parece em toda parte. Um conjunto de 16 tiles não tem nenhuma variante que desenhe uma borda ao longo dos lados norte e leste de uma mesma célula, então você fica com um pixel de chão perdido, uma borda duplicada ou um buraco visível.

O conjunto de 47 tiles, também chamado de blob tileset, acrescenta os quatro cantos. Acompanhar os oito vizinhos de forma ingênua dá dois elevado a oito, ou 256 combinações, e a maioria delas é redundante: um canto só muda a imagem quando as duas bordas que o tocam estão preenchidas. Um canto situado entre duas bordas vazias é renderizado de forma idêntica nos seus quatro estados. Aplicar essa única redução colapsa 256 casos em 47 distintos, que é de onde vem o número.

Os editores normalmente armazenam um blob set como uma tabela de consulta indexada por uma máscara de 8 bits: 1, 2, 4 e 8 para as bordas, 16, 32, 64 e 128 para os cantos. Quando você pinta, o editor recalcula a máscara da célula pintada e de cada vizinho que também está em autotiling, então um clique pode reescrever até nove células. A consequência prática é que o autotiling quer a sua própria camada de terreno. Misture objetos colocados à mão nessa camada e cada atualização de autotile terá que decidir se sobrescrevê-los é aceitável.

Mapa de Tiled vs mapa em tiles — qual deles você quer dizer?

Duas buscas diferentes chegam aqui e querem coisas diferentes. Um editor de mapas em tiles é a categoria: qualquer ferramenta que pinte uma grade de tiles e produza um mapa. O Tiled é um programa específico dentro dessa categoria, o editor de desktop publicado em mapeditor.org, e as pessoas costumam digitar «tiled map editor» quando querem dizer esse programa pelo nome.

Se você quis dizer a categoria, a ferramenta ao vivo desta página é um editor de mapas em tiles e não precisa de instalação. Se você quis dizer a marca, o que provavelmente quer é algo que abra os arquivos que você já tem, os projetos TMX e os tilesets TSX que um fluxo de trabalho de desktop produz, e que permita continuar trabalhando sem instalar nada na máquina em que você está. A página de alternativa ao Tiled cobre isso diretamente: quais dos seus arquivos são mantidos, quais configurações não são e como os formatos de exportação se correspondem entre os dois.

Mecanicamente, a diferença está em onde o documento vive. Um editor de desktop grava os projetos no disco local e depende de essa máquina ter o programa instalado para reabri-los. Um editor de navegador mantém o documento na sessão e no armazenamento do navegador, e depende de a exportação ser completa o suficiente para reconstruir o mapa em qualquer outro lugar. Isso faz dos formatos de exportação a verdadeira ponte entre os dois, que é o assunto da próxima seção.

Exporte o seu mapa (PNG / TMX / JSON)

Três formatos, três funções. Escolha pelo que vai ler o arquivo, não pelo que soa mais oficial.

PNG é uma imagem achatada. O exportador renderiza o mapa no tamanho da célula multiplicado pelo tamanho do mapa, então um mapa de 40 por 25 com células de 32 px vira 1280 por 800 pixels, com as camadas achatadas em uma única imagem ou gravadas em um arquivo por camada. Use-o para maquetes, miniaturas, fundos de menu ou uma conversa com um artista. Não o use como entrega para uma engine: um PNG não carrega grade, nem identidade de tile, nem colisão, então nada a jusante consegue distinguir uma parede de um chão exceto pela cor.

TMX é o formato de intercâmbio XML do Tiled e o mais próximo que o ecossistema de ferramentas de tiles tem de uma língua franca. Ele carrega camadas, referências de tileset, propriedades por tile, camadas de objetos e propriedades personalizadas, e a maioria das engines e conversores consegue lê-lo. Um detalhe causa a maioria dos bugs: os IDs de tile no TMX são globais em todos os tilesets do mapa, deslocados por um firstgid por tileset. Combine duas folhas e erre esse deslocamento, e cada célula que usava a segunda folha carrega com um tile da folha errada. Nada dá erro. Simplesmente fica errado.

JSON é o que a maioria das engines e runtimes web consome diretamente. Normalmente é uma lista de camadas, cada uma com um array plano de índices de tile mais o tamanho da célula, com a colisão como um array separado. Como o consumidor monta o mapa em tempo de execução, a convenção de ordem das linhas importa: inverta-a e o mapa inteiro se espelha na vertical, o que é óbvio em um mapa com uma linha costeira e invisível em uma masmorra simétrica. Células vazias também precisam de um valor definido, já que alguns formatos usam 0 e outros usam -1, e escolher o errado coloca um tile real em cada lacuna.

Entre dentro do seu mapa (demo jogável)

A demo jogável desta página é The Cyclops' Island, um jogo isométrico de pixel art construído a partir de um mapa em tiles pintado no mesmo editor. Aperte play e a câmera mergulha no mapa. A camada de colisão vira paredes, a camada de chão vira o piso sobre o qual o personagem caminha, e a camada de detalhe é desenhada atrás ou na frente do personagem dependendo de onde ela está.

Esta é a etapa que a maioria das páginas de ferramentas pula. Pintar um mapa e exportá-lo significa que a primeira vez que você vê o nível na escala do jogador é em outro programa, com outra câmera, depois de um build. Jogá-lo no próprio lugar transforma o design de níveis em um loop que você pode rodar dez vezes por minuto: pinte um corredor, percorra-o, perceba que está um tile largo demais, repinte-o.

As projeções isométricas acrescentam uma coisa com que um mapa ortogonal nunca precisa se preocupar: a ordem de desenho. Um tile mais abaixo na tela está mais perto da câmera, então o renderizador ordena por profundidade, mais ou menos por linha e depois por camada, ou um personagem é desenhado por cima de uma parede que deveria ocluí-lo. O sintoma é um sprite que atravessa o topo de uma parede ao caminhar por trás dela. Quando você vê isso em uma demo, a causa é a ordenação por profundidade, não a máscara de colisão.

A partir daí o mapa pode seguir dois caminhos. Mantenha-o em 2D e ele continua um mapa em tiles com um controlador de jogador por cima. Leve-o para o 3D Game Builder e a mesma grade vira geometria, com cada célula sendo extrudada em uma laje de chão ou uma parede, que é a abordagem por trás do Mini World. O Agent Sprite Forge cobre o lado dos personagens. A grade que você pintou não muda em nenhum dos casos.

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 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 de rua 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