Tiled Map Editor Online — Uma alternativa gratuita ao Tiled no navegador

Um editor de mapas em tiles é um programa que monta um nível a partir de um pequeno conjunto de imagens de tiles repetidas, em vez de um único fundo grande pintado à mão. O Tiled, o aplicativo de desktop do mapeditor.org, é a implementação de referência dessa ideia: gratuito, offline, flexível quanto aos tipos de grade e antigo o suficiente para que muitos projetos lançados ainda carreguem arquivos .tmx. Esta página cobre o caso em que você quer o mesmo fluxo de trabalho de pintura sem instalar nada e quer apertar Play e caminhar dentro do mapa que acabou de pintar.

O Neta Studio executa o editor em uma aba do navegador. Você importa um tileset, define o tamanho do tile, pinta uma camada de chão e uma camada de detalhes, marca a colisão e joga. A grade se transforma em um mundo 3D renderizado com Three.js, com um personagem controlável e colisão real. Nada para baixar, nenhuma pasta de projeto para manter sincronizada entre máquinas e um link que você pode entregar a outra pessoa para que ela abra o mesmo mapa.

Tiled vs. um editor de mapas em tiles online

O Tiled, do mapeditor.org, faz muita coisa bem. É gratuito e de código aberto, roda offline e há anos oferece suporte a grades ortogonais, isométricas, escalonadas e hexagonais. Camadas, camadas de objetos com retângulos, elipses, polígonos e polilinhas, propriedades personalizadas, modelos, animações de tiles, formas de colisão e conjuntos de terreno/Wang estão todos lá. Ele lê e grava XML TMX/TSX, além de variantes JSON, e o formato é antigo o suficiente para que existam exportadores para a maioria das engines. Se o seu pipeline já consome .tmx, o Tiled é o lugar mais seguro para criá-lo.

O atrito não está na edição. Está em tudo ao redor dela. O Tiled é um aplicativo de desktop, então toda máquina que mexe no projeto precisa da instalação. Os tilesets normalmente são referenciados como arquivos .tsx externos com caminhos relativos, e eles quebram no momento em que uma pasta se move ou o checkout de um colaborador fica em um nível diferente. Não há botão de play: você exporta e depois abre um segundo programa para descobrir se o mapa funciona. Compartilhar significa zipar um projeto e torcer para que os caminhos batam do outro lado.

Um editor de mapas em tiles online muda essas três coisas e nada mais. Sem instalação, porque o editor vem junto com a página. Sem malabarismo com arquivos, porque o tileset e as camadas ficam em um único projeto que você pode reabrir. E sem o ciclo de exportar para testar, porque o mapa é jogável na aba em que você o pintou. O que você abre mão é real: nada de plugins nativos, nada de mapas com script, e projetos muito grandes ficam mais pesados no navegador do que no desktop. Para um mapa que precisa ser visto e percorrido, em vez de entregue a uma engine compilada, a troca vale a pena.

O que é um mapa em tiles (e por que o nome confunde todo mundo)

A palavra faz dois papéis e eles se chocam. Tiled com T maiúsculo é um nome de produto. Um mapa em tiles, em minúsculas, é qualquer mapa construído a partir de tiles repetidos. Você pode fazer um mapa em tiles no Tiled, mas também pode fazê-lo com os nós TileMap do Godot, no sistema Tilemap da Unity, no Phaser, em um importador personalizado ou aqui, sem nunca abrir o Tiled.

Essa divisão é o motivo pelo qual as buscas por um editor de mapas em tiles chegam a dois lugares diferentes. Metade das pessoas quer o aplicativo de desktop específico e seus formatos de arquivo. A outra metade quer construir um mapa baseado em tiles e não se importa com qual ferramenta faz isso. Ambas as posições são razoáveis. Se você está no segundo grupo, a questão não é qual editor tem a lista de recursos mais longa; é qual deles coloca um resultado jogável na sua frente mais rápido.

Mecanicamente, um mapa em tiles é pouca coisa em dados. Uma imagem de tileset, uma largura e altura de tile, um tamanho de grade em tiles e, então, um array de IDs de tiles por camada, onde zero significa vazio. Além disso: uma camada de objetos opcional contendo retângulos e polilinhas, e uma tabela de propriedades de strings chave/valor. Essa é toda a estrutura. Um editor é uma boa interface para editar esses arrays, que é a única razão pela qual os formatos transitam entre ferramentas.

Desenhe seu primeiro mapa em tiles online

A primeira tela tem três regiões: o painel de tileset à esquerda, a tela do mapa no meio e a lista de camadas à direita. Comece criando um mapa. Escolha uma grade ortogonal, defina a grade para 40 por 30 tiles e defina o tamanho do tile para corresponder exatamente ao seu tileset. Com 32 por 32 pixels, isso dá uma tela de 1280 por 960 pixels, um tamanho de trabalho razoável que se mantém responsivo durante a pintura.

Depois, importe a imagem do tileset. As duas configurações que quebram importações são margem e espaçamento. Margem é a borda vazia ao redor de toda a folha; espaçamento é o intervalo entre os tiles. Se sua folha foi exportada com qualquer um dos dois, digite o número. Se você pular isso, cada coluna se desloca um ou dois pixels e o mapa fica sutil e irritantemente errado. Depois disso, pintar é pintar: preencha a camada de chão e então adicione detalhes em uma camada acima dela.

Exemplos de mapas em tiles — mapas que você pode abrir agora mesmo

Seis cenas são entregues como mapas jogáveis, não capturas de tela. Cada uma abre no navegador e você pode conduzir um personagem por ela, o que é a única maneira confiável de verificar se um mapa em tiles funciona.

Três delas são projetos completos. As outras são pequenos mapas de demonstração dentro do editor, que existem para mostrar uma mecânica cada. Abra-os quando quiser ver como camadas, colisão e tamanho de tile foram configurados, em vez de apenas ler sobre isso.

Importando um TMX / tileset para o navegador

A importação é um parser, não um conversor. Lemos o elemento map para obter orientação, largura, altura, largura do tile e altura do tile, depois as entradas do tileset com seu firstgid e uma imagem incorporada ou uma referência a um .tsx externo. Em seguida, cada camada em ordem, com seus dados de tiles. As codificações que importam são CSV e base64, com ou sem compressão gzip ou zlib. Se o arquivo usar uma codificação que não decodificamos, a importação para e a nomeia, em vez de carregar uma grade em branco.

O que sobrevive é a parte estrutural. A referência do tileset é redirecionada para uma imagem enviada, então o caminho .tsx externo do seu projeto de desktop é substituído em vez de seguido. Tamanho do tile, margem e espaçamento são mantidos. Ordem das camadas, visibilidade e opacidade são mantidas. Os IDs de tiles mantêm suas posições relativas dentro de cada camada, e é isso que faz um mapa parecer igual após a importação. Camadas de objetos chegam como retângulos e polígonos com suas propriedades achatadas em strings chave/valor. As animações de tiles declaradas são mantidas.

O que não sobrevive é tudo o que era código. O Tiled oferece suporte a extensões JavaScript, classes de propriedades personalizadas e plugins C++, e nenhum deles roda em uma aba do navegador. Um mapa produzido por um script aqui é apenas seus tiles de saída. Tipos de propriedades personalizadas se degradam para strings. Mapas infinitos com armazenamento em chunks são achatados em uma grade fixa, o que altera o comportamento de memória em mapas muito grandes. E um tileset de coleção de imagens, em que cada tile é um PNG separado, funciona, mas custa uma requisição de imagem por tile. Se o seu mapa depende de um plugin, continue criando-o no Tiled.

Tiled grátis vs. Tiled pago

O Tiled é gratuito. É um software de desktop de código aberto e não há um plano pago com o qual comparar, então uma página que descreve um Tiled grátis versus pago está descrevendo outra coisa, normalmente um pacote comercial de tilesets ou o editor embutido em uma engine. Não estamos afirmando que o Tiled custa dinheiro, porque não custa.

A verdadeira divisão é instalação versus ausência de instalação. O Tiled exige um download em cada máquina, mantém os tilesets como caminhos relativos que quebram quando as pastas se movem e não oferece playtest integrado, então você exporta e abre outro programa. Um editor de navegador exige apenas uma aba, mantém o projeto em um só lugar e joga o mapa na mesma janela. Essa é a troca, e ela não tem nada a ver com preço.

Há coisas em que o desktop ganha. Plugins, mapas com script, trabalhar sem rede alguma e mapas muito grandes com muitas camadas são todas vantagens do desktop, e fingir o contrário seria desonesto. Se o seu pipeline já consome .tmx e você tem pessoas que o mantêm, fique no Tiled. Use o editor de navegador quando o mapa precisa ser visto, compartilhado por link ou percorrido por alguém que nunca vai instalar um editor.

Entre no mundo ao qual ele pertence

Um sprite é um personagem sem lugar para ficar. 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. Todo mundo neste site foi feito a partir de uma única descrição escrita e publicado como uma página que você pode jogar.

FAQ