Tiled TSJ to Atlas
Convert a Tiled tileset JSON file to an atlas definition in TypeScript.
The converter assumes that the atlas image file is a vertical strip of tiles,
with 1px padding in each direction to prevent bleeding.
Note: this utility only creates the atlas definition as a TypeScript source
file. You still need to create the atlas image file:
src/sprites/atlas.png.webp and include it in
src/index.html and in
<img hidden src="./sprites/atlas.png.webp">
It's recommended to use the Makefile found in the
src/sprites directory to
create the atlas image file and the atlas definition at once:
make -C src/sprites
Supported Tiled Features
Create a tileset in Tiled and save it as TSJ (which is JSON). Choose
Type: Collection of Images and leave
Embed in map unchecked.
The converter supports the following features:
- Tiles of different sizes.
- Animated tiles.
- Collision tiles via the custom
If all tiles are the same size, you can remove the
from the atlas, and hard-code the size in the
As long as the tilesheet image is a vertical strip of tiles, you can remove
x property from the atlas.
It's also possible to hack the ids of the tiles in Tiled to make them
sequential, modify the atlas structure to be an array, and refer to tiles by
index instead of the