Map Editor

A browser-based tile map editor for building 2D game worlds with real-time syncing and full undo/redo.

Overview

The Map Editor lets you create maps with multiple layers, paint tiles from your own tilesets, place entities with custom properties, draw collision shapes, and mark points of interest. Everything syncs in real-time and supports full undo/redo.

Work is organized around a project, which contains your maps, tilesets, and entity definitions. You work in a tabbed interface - open any map, tileset, or entity in its own tab and switch freely.

Projects

A project is the top-level container for everything in the editor. Each project holds its own maps, tilesets, and entity definitions.

• Click New Project on the project list and give it a name and optional description.
• Click Open on any project card to enter the editor.
• Export a project as JSON using the download icon on the project card.
• Deleting a project moves it to the trash. Restore it from the trash view, or it is permanently deleted after 7 days.

Maps

Maps are the canvases where you build your game levels. Each map contains layers, entity instances, colliders, and points.

Creating and managing maps

Open the Maps browser from the toolbar to create, search, rename, or delete maps. Double-click a map to open it, or select it and click Open. Each open map gets its own tab.

Layers

Each map has a stack of tile layers in the left sidebar. Layers render bottom-to-top, with the highest-order layer drawn on top.

• • Click + next to "Layers" to create a new layer.
• • Drag layers to reorder. Toggle the eye icon to show/hide.
• • Select a layer to paint on it - the right panel shows its properties.

Layer properties available in the right panel:

Foreground and background

The layer list includes an Entities pseudo-layer that separates foreground from background. Drag tile layers above or below this row to control whether they render in front of or behind entities.

Tile painting tools

When a tile layer is selected, use these tools from the map toolbar:

Use the tileset picker and tile picker buttons in the toolbar to choose which tileset and tile region to paint with. Drag to select a multi-tile region from the tileset.

Terrain auto-tiling

For tilesets with terrain layers configured, switch to terrain mode. Terrain painting uses bitmask-based auto-tiling to automatically select the correct tile variant based on neighboring tiles. See the Tilesets section for setup.

Entities

Entities are reusable game objects - characters, items, triggers, spawn points, or anything else you need. Define an entity once, then place instances of it on any map.

Defining entities

Open the Entities browser from the toolbar to create and manage definitions. Each entity has a name, a type string, and can contain:

• • Sprites - visual layers from your tilesets. Each has position, offset, origin, scale, rotation, opacity, tint, and z-index.
• • Colliders - collision shapes (rectangle, circle, or polygon) edited in a dedicated collider editor.
• • Properties - typed fields (string, number, boolean, enum, or color) with default values that act as a schema.

Placing instances

Switch to the Entity tool (T), select which entity to place, then click the map. Each instance has:

• • Position - X and Y coordinates on the map.
• • Rotation - angle in degrees.
• • Scale - independent X and Y scale factors.
• • Property overrides - override any default on a per-instance basis. Reset back to defaults individually.

Use V to select and drag instances. Right-click for a context menu with delete.

Tilesets

Tilesets are sprite sheet images that the editor slices into individual tiles based on a configurable tile size.

Managing tilesets

• • Open the Tilesets browser from the toolbar to create, search, and delete tilesets.
• • Open a tileset tab to view its image and configure tile metadata.
• • Upload or replace the image using Replace Image. PNG and GIF supported (up to 10 MB).
• • Set tile width and tile height in the sidebar to match your sprite sheet grid.

Tile properties

Click a tile in the tileset view to select it. The properties panel lets you set:

• • Name and Type - for identifying tiles in your game engine.
• • Custom properties - arbitrary key-value pairs (e.g., "walkable": "false").
• • Colliders - per-tile collision shapes with a visual editor.
• • Animation Frames - define frame sequences with per-frame duration to animate tiles.

Create Entity From Tile

Right-click any tile in the tileset view and select "Create Entity From Tile" to create a new entity with a sprite pointing at the selected tile. The entity is named after the meta tile (or the tileset name) and opens in a new tab.

Terrain layers

Terrain layers enable auto-tiling. In the tileset sidebar, click + next to "Terrain Layers" to create one. Select a terrain layer, then assign tiles to bitmask positions. When painting with the terrain, the editor auto-picks the right tile variant based on neighbors.

Colliders

Colliders define collision and trigger areas. They appear in three places:

• • Map colliders - drawn directly on the canvas for walls, floors, and trigger zones.
• • Entity colliders - attached to entity definitions and inherited by every instance.
• • Tile colliders - attached to individual tiles for per-tile collision shapes.

Drawing map colliders

Switch to the Collider tool (C) and click the map to place vertices. Each click adds a point to a polygon collider.

• • Right-click a point to delete it, or a segment to insert a new point.
• • Right-click the body to delete the entire collider.
• • Each collider has name, type, and custom properties in the right panel.

Points

Use the Point tool (P) to place named map points - spawn locations, waypoints, camera targets, or any position marker. Each has a name, type, position, and optional custom properties.

Keyboard shortcuts

Export format

Exporting a project produces a .zip file containing JSON resource files and tileset images. Use these files to load your levels in any game engine.

ZIP structure

.lostproj (Project manifest)

The root file that lists every resource in the project.

.lostset (Tileset)

Defines a tileset image, its tile grid, per-tile metadata, and terrain layers.

.lostentity (Entity)

A reusable entity definition with sprites, colliders, and a property schema.

.lostmap (Map)

Contains layers, entity instances, map colliders, and points.

Tile encoding

Each value in a chunk array is either 0 (empty) or a single integer that encodes the tileset, and the pixel position of the tile in the tileset image.

The exporter converts tile-grid coordinates to pixel coordinates before encoding: pixel_x = tile_x x tileWidth, pixel_y = tile_y x tileHeight. These pixel values are then packed into a 48-bit integer:

Chunks

Chunk keys are "chunk_x,chunk_y" strings (negative values supported). Each chunk value is a flat array of 64 encoded tile integers representing an 8x8 tile grid in row-major order (left-to-right, top-to-bottom).

Entity instances (in maps)