From Tiled to PixiJS and back: editable maps in TypeScript

In this story, a TypeScript library named "pixi-tiledmap" is created to load, render, edit, and export Tiled maps using PixiJS v8. The author demonstrates a small map, which includes two islands, four coins, and a missing bridge. The map has three tile layers: Terrain, Details, and Bridge.

To create an editable map, the author installs the library and PixiJS using npm. They then write TypeScript code that runs in a browser project with a bundler. The level.tmj and its tileset image are served as static assets with relative paths. The app is initialized with a specific width, height, and background color. The map container is added to the body of the document.

Next, the author shows how to edit tiles at runtime by clicking on specific tiles and calling the setTile function with the layer name, column, row, and tile from a named tileset. The coordinates and the tileset-local tileId are zero-based, and the library automatically converts the local ID to Tiled's global ID. This process updates the rendered layer and the map data.

The author then provides instructions on exporting the edited map back to Tiled JSON format. They import the exportMap function from pixi-tiledmap, serialize the current map data, and download it as a Tiled JSON file. The downloaded file is placed next to the original map, and when opened in Tiled, the changes are visible on the Bridge layer. The original .tmj file contains the map data, while the tileset images are stored separately, as Tiled's format stores images only as paths.

Finally, the author explains how to package the edited map and its tile images for distribution. They use the fflate library to compress and zip the map file with the referenced tile images. This complete package can be easily shared and opened in Tiled for further editing.