Editor de Mapas

Um editor de mapas de tiles baseado em navegador para construir mundos de jogos 2D com sincronização em tempo real e desfazer/refazer completo.

Visão geral

O Editor de Mapas permite criar mapas com múltiplas camadas, pintar tiles dos seus tilesets, posicionar entidades com propriedades personalizadas, desenhar formas de colisão e marcar pontos de interesse. Tudo sincroniza em tempo real e suporta desfazer/refazer completo.

O trabalho é organizado em torno de um projeto, que contém seus mapas, tilesets e definições de entidades. Você trabalha em uma interface com abas - abra qualquer mapa, tileset ou entidade em sua própria aba e alterne livremente.

Projetos

Um projeto é o contêiner de nível superior para tudo no editor. Cada projeto contém seus próprios mapas, tilesets e definições de entidades.

Clique em Novo Projeto na lista de projetos e dê um nome e uma descrição opcional.
Clique em Abrir em qualquer cartão de projeto para entrar no editor.
Exporte um projeto como JSON usando o ícone de download no cartão do projeto.
Excluir um projeto o move para a lixeira. Restaure-o na visualização da lixeira, ou ele será excluído permanentemente após 7 dias.

Mapas

Mapas são as telas onde você constrói seus níveis de jogo. Cada mapa contém camadas, instâncias de entidades, colliders e pontos.

Criando e gerenciando mapas

Abra o navegador de Mapas na barra de ferramentas para criar, pesquisar, renomear ou excluir mapas. Clique duas vezes em um mapa para abri-lo, ou selecione-o e clique em Abrir. Cada mapa aberto recebe sua própria aba.

Camadas

Cada mapa tem uma pilha de camadas de tiles na barra lateral esquerda. As camadas são renderizadas de baixo para cima, com a camada de maior ordem desenhada por cima.

• Clique em + ao lado de "Camadas" para criar uma nova camada.
• Arraste camadas para reordenar. Alterne o ícone de olho para mostrar/ocultar.
• Selecione uma camada para pintar nela - o painel direito mostra suas propriedades.

Propriedades da camada disponíveis no painel direito:

Propriedade	Descrição
Tamanho do Tile	Largura e altura de cada célula de tile em pixels. Camadas podem ter tamanhos de tiles diferentes.
Parallax	Multiplicadores X e Y para efeitos de rolagem parallax.
Deslocamento	Deslocamento em pixels para posicionamento fino da camada.
Tonalidade e Opacidade	Tonalidade de cor e transparência.
Propriedades Personalizadas	Metadados arbitrários de chave-valor legíveis pelo seu motor de jogo.

Primeiro plano e plano de fundo

A lista de camadas inclui uma pseudo-camada Entidades que separa o primeiro plano do plano de fundo. Arraste camadas de tiles acima ou abaixo desta linha para controlar se são renderizadas na frente ou atrás das entidades.

Ferramentas de pintura de tiles

Quando uma camada de tiles está selecionada, use estas ferramentas da barra de ferramentas do mapa:

Ferramenta	Tecla	Descrição
Lápis	`B`	Pinte tiles individuais ou seleções de múltiplos tiles no mapa.
Borracha	`E`	Remova tiles da camada ativa.
Preenchimento Retangular	`R`	Preencha uma região retangular com o tile selecionado.
Selecionar	`V`	Selecione e mova instâncias de entidades ou outros objetos.

Use o seletor de tileset e os botões do seletor de tiles na barra de ferramentas para escolher qual tileset e região de tiles pintar. Arraste para selecionar uma região de múltiplos tiles do tileset.

Auto-tiling de terreno

Para tilesets com camadas de terreno configuradas, mude para o modo terreno. A pintura de terreno usa auto-tiling baseado em bitmask para selecionar automaticamente a variante correta do tile com base nos tiles vizinhos. Veja a seção Tilesets para configuração.

Entidades

Entidades são objetos de jogo reutilizáveis - personagens, itens, gatilhos, pontos de spawn ou qualquer outra coisa que você precise. Defina uma entidade uma vez e posicione instâncias dela em qualquer mapa.

Definindo entidades

Abra o navegador de Entidades na barra de ferramentas para criar e gerenciar definições. Cada entidade tem um nome, uma string de tipo, e pode conter:

• Sprites - camadas visuais dos seus tilesets. Cada um tem posição, deslocamento, origem, escala, rotação, opacidade, tonalidade e z-index.
• Colliders - formas de colisão (retângulo, círculo ou polígono) editadas em um editor de collider dedicado.
• Propriedades - campos tipados (string, número, booleano, enum ou cor) com valores padrão que funcionam como um esquema.

Posicionando instâncias

Mude para a ferramenta Entidade (T), selecione qual entidade posicionar e clique no mapa. Cada instância tem:

• Posição - coordenadas X e Y no mapa.
• Rotação - ângulo em graus.
• Escala - fatores de escala X e Y independentes.
• Substituições de propriedades - substitua qualquer padrão por instância. Redefina para os padrões individualmente.

Use V para selecionar e arrastar instâncias. Clique com o botão direito para um menu de contexto com excluir.

Tilesets

Tilesets são imagens de spritesheet que o editor divide em tiles individuais com base em um tamanho de tile configurável.

Gerenciando tilesets

• Abra o navegador de Tilesets na barra de ferramentas para criar, pesquisar e excluir tilesets.
• Abra uma aba de tileset para visualizar sua imagem e configurar metadados de tiles.
• Faça upload ou substitua a imagem usando Substituir Imagem. PNG e GIF suportados (até 10 MB).
• Defina a largura e altura do tile na barra lateral para corresponder à grade do seu spritesheet.

Propriedades do tile

Clique em um tile na visualização do tileset para selecioná-lo. O painel de propriedades permite definir:

• Nome e Tipo - para identificar tiles no seu motor de jogo.
• Propriedades personalizadas - pares chave-valor arbitrários (ex.: "walkable": "false").
• Colliders - formas de colisão por tile com um editor visual.
• Quadros de animação - defina sequências de quadros com duração por quadro para animar tiles.

Criar entidade a partir do tile

Clique com o botão direito em qualquer tile na visualização do tileset e selecione "Criar entidade a partir do tile" para criar uma nova entidade com um sprite apontando para o tile selecionado. A entidade recebe o nome do meta tile (ou do tileset) e abre em uma nova aba.

Camadas de terreno

Camadas de terreno habilitam auto-tiling. Na barra lateral do tileset, clique em + ao lado de "Camadas de Terreno" para criar uma. Selecione uma camada de terreno e atribua tiles às posições de bitmask. Ao pintar com terreno, o editor seleciona automaticamente a variante correta do tile com base nos vizinhos.

Colliders

Colliders definem áreas de colisão e gatilho. Eles aparecem em três lugares:

• Colliders de mapa - desenhados diretamente na tela para paredes, pisos e zonas de gatilho.
• Colliders de entidade - anexados às definições de entidade e herdados por cada instância.
• Colliders de tile - anexados a tiles individuais para formas de colisão por tile.

Desenhando colliders de mapa

Mude para a ferramenta Collider (C) e clique no mapa para posicionar vértices. Cada clique adiciona um ponto a um collider poligonal.

• Clique com o botão direito em um ponto para excluí-lo, ou em um segmento para inserir um novo ponto.
• Clique com o botão direito no corpo para excluir o collider inteiro.
• Cada collider tem nome, tipo e propriedades personalizadas no painel direito.

Pontos

Use a ferramenta Ponto (P) para posicionar pontos nomeados no mapa - locais de spawn, waypoints, alvos de câmera ou qualquer marcador de posição. Cada um tem nome, tipo, posição e propriedades personalizadas opcionais.

Atalhos de teclado

Atalho	Ação
`Cmd/Ctrl+Z`	Desfazer
`Cmd/Ctrl+Shift+Z`	Refazer
`V`	Ferramenta de seleção
`B`	Ferramenta lápis
`E`	Ferramenta borracha
`R`	Ferramenta de preenchimento retangular
`T`	Ferramenta de entidade
`C`	Ferramenta de collider
`P`	Ferramenta de ponto
`H`	Alternar grade
`F`	Alternar tela cheia
`Delete`	Excluir item selecionado
`Escape`	Desselecionar / cancelar

Formato de exportação

Exportar um projeto produz um arquivo .zip contendo arquivos de recursos JSON e imagens de tileset. Use estes arquivos para carregar seus níveis em qualquer motor de jogo.

Estrutura do ZIP

project.zip ├── project.lostproj # Manifesto do projeto ├── resources/ │ └── tileset.png # Imagens de tileset ├── tilesets/ │ └── forest.lostset # Definições de tileset ├── entities/ │ └── hero.lostentity # Definições de entidade └── maps/ └── level1.lostmap # Dados do mapa

.lostproj (Manifesto do projeto)

O arquivo raiz que lista todos os recursos no projeto.

{ "version": "1.0", "name": "My Project", "hash": "a1b2c3...", "lastModified": "2026-01-25T12:00:00Z", "resources": { "tilesets": ["tilesets/forest.lostset"], "maps": ["maps/level1.lostmap"], "entities": ["entities/hero.lostentity"] } }

.lostset (Tileset)

Define uma imagem de tileset, sua grade de tiles, metadados por tile e camadas de terreno.

{ "version": "1.0", "id": "uuid", "name": "Forest", "order": 1, "imagePath": "resources/forest.png", "tileWidth": 32, "tileHeight": 32, "tiles": [ { "x": 0, "y": 0, "width": 32, "height": 32, "name": "grass", "type": "ground", "colliders": [ { "id": "uuid", "name": "floor", "type": "solid", "position": { "x": 16, "y": 16 }, "points": [{ "x": -16, "y": -16 }, ...], "properties": {} } ], "properties": { "walkable": "true" } } ], "terrainLayers": [ { "id": "uuid", "name": "Ground", "tiles": [{ "tileId": 5, "bitmask": 255 }] } ] }

Campo	Descrição
order	Posição alfabética indexada a partir de 1 entre os tilesets do projeto. Usado na codificação de tiles.
tiles[].x / y	Coordenadas da grade de tiles (coluna e linha na imagem do tileset).
colliders[].position	Centróide da forma do collider.
colliders[].points	Vértices relativos ao centróide.

.lostentity (Entidade)

Uma definição de entidade reutilizável com sprites, colliders e um esquema de propriedades.

{ "id": "uuid", "name": "Hero", "type": "character", "sprites": [ { "id": "uuid", "name": "body", "type": "", "tilesetId": "tileset-uuid", "rect": { "x": 0, "y": 0, "width": 32, "height": 32 }, "offset": { "x": 0, "y": 0 }, "origin": { "x": 0.0, "y": 0.0 }, "scale": { "x": 1.0, "y": 1.0 }, "rotation": 0, "zIndex": 0, "tint": { "r": 255, "g": 255, "b": 255, "a": 255 } } ], "offset": { "x": 0, "y": 0 }, "rotation": 0, "colliders": [ { "id": "uuid", "name": "hitbox", "type": "solid", "position": { "x": 0, "y": 0 }, "points": [ { "x": -16, "y": -16 }, { "x": 16, "y": -16 }, { "x": 16, "y": 16 }, { "x": -16, "y": 16 } ], "properties": {} } ], "properties": [ { "name": "health", "type": "number", "default": "100", "options": [] } ] }

Campo	Descrição
sprites[].rect	Retângulo de origem na imagem do tileset em pixels (x, y, largura, altura).
sprites[].tint	Valores {r, g, b, a} de 0 a 255.
properties	Um array de definições (esquema), não valores de instância. Cada entrada tem name, type, default e options.
colliders	Retângulo = 4 pontos de canto, círculo = aproximação de 16 pontos, polígono = vértices brutos.

.lostmap (Mapa)

Contém camadas, instâncias de entidades, colliders de mapa e pontos.

{ "version": "5.0", "id": "uuid", "name": "Level 1", "layers": [ { "id": "uuid", "name": "Ground", "visible": true, "foreground": false, "order": 0, "tileWidth": 32, "tileHeight": 32, "chunkWidth": 8, "chunkHeight": 8, "parallaxX": 1.0, "parallaxY": 1.0, "offsetX": 0.0, "offsetY": 0.0, "tint": { "r": 255, "g": 255, "b": 255, "a": 255 }, "properties": {}, "chunks": { "0,0": [4294967328, 0, ...], // 64 encoded tile values "-1,0": [...] } } ], "entities": [ { "id": "uuid", "x": 128, "y": 256, "entityDefId": "entity-uuid", "rotation": 0, "scale": { "x": 1.0, "y": 1.0 }, "properties": { "health": "50" } } ], "points": [ { "id": "uuid", "x": 100, "y": 200, "name": "spawn", "type": "player_start", "properties": {} } ], "colliders": [ { "id": "uuid", "name": "wall", "type": "solid", "position": { "x": 64, "y": 96 }, "points": [...], "properties": {} } ] }

Codificação de tiles

Cada valor em um array de chunk é 0 (vazio) ou um único inteiro que codifica o tileset e a posição em pixels do tile na imagem do tileset.

O exportador converte coordenadas da grade de tiles em coordenadas de pixels antes da codificação: pixel_x = tile_x x tileWidth, pixel_y = tile_y x tileHeight. Esses valores de pixels são empacotados em um inteiro de 48 bits:

Codificação

tile_id = (tileset_order << 32) | (pixel_y << 16) | pixel_x

Decodificação

tileset_order = tile_id >> 32 pixel_y = (tile_id >> 16) & 0xFFFF pixel_x = tile_id & 0xFFFF tile_col = pixel_x / tileWidth tile_row = pixel_y / tileHeight

0 = tile vazio
tileset_order = posição alfabética indexada a partir de 1 do tileset (corresponde ao order no .lostset)
pixel_x / pixel_y = coordenadas em pixels do canto superior esquerdo do tile na imagem do tileset
Divida pelo tileWidth / tileHeight do tileset para obter coluna e linha da grade
Inteiro de 48 bits - requer BigInt ou um tipo inteiro de 64 bits na maioria dos motores

Chunks

As chaves de chunk são strings "chunk_x,chunk_y" (valores negativos suportados). Cada valor de chunk é um array plano de 64 inteiros de tile codificados representando uma grade de tiles 8x8 em ordem row-major (esquerda para direita, cima para baixo).

Instâncias de entidade (em mapas)

Campo	Descrição
entityDefId	Vincula ao campo id em um arquivo .lostentity.
properties	Mapa plano {"name": "value"} - contém apenas valores substituídos. Mescle com os padrões da definição da entidade.
x / y	Posição em pixels na tela do mapa.
scale	Fatores de escala X e Y independentes.

Documentação