Tiled JSON maps #8

When you're creating your maps you almost always needs the following:


  • have an IDE with a visual interface where you drag and drop elements, entities, textures, collision tiles etc.

  • export the map in a machine readable format (JSON, CSV, XML, etc)


This is where Tiled comes in handy. Tiled is free and is the best map editor out there. Are there any others? I never looked back since I've discovered it.


When I started working on the first prototype of the game I actually started by creating a map maker myself (I even made a Fireworks plugin that exports all the layer information and object positions). But you might find that to be extremely tedious and time consuming at first. That's when Tiled shines.


Making a brand new map in Tiled. Notice the layers on the right.

Since the game is in TypeScript I had to map the exported JSON format from Tiled to a bunch of interfaces and then an utility class that contains Tiled specific mappings.

Tiled specific interfaces in TypeScript

Sprites imported from tilesheets that get changed or moved can throw you off during iterations.

Takeaways:

  • I used a big file called tilesheet.png for all my sprites. It's not a good idea since you cannot scale easily. Adding new sprites can be a chore.

  • Splitting sprites into multiple tilesheets is a good idea, but you need to re-make your existing maps because the mappings get lost.

  • The way you use the Tiled features is up to you. I have a layer called "collisions" for the collision tiles. Depending on the engine you're using this conventions might greatly differ.

Here is the full game dev video log: