Getting to know the Tiled map editor

I came across this tutorial on parsing .tmx maps into AS3. While I find it useful enough to get me started there are still other parts I had to figure out myself.

Using multiple tilesets

When using multiple tilesets additional <tileset> nodes are added to the .tmx file. This means we need to register listeners to each of the images and track when all of them have finished loading. In my case, I implemented a flag on my “onLoaded” function that triggers only when all the images are fully loaded.

Only when the images are fully loaded can you start the actual render process. Else you might end up with a null bitmapdata.

Using the firstgid attribute.

Each <tileset> has an attribute called firstgid. It simply tells the gid of the first element of the tileset. So if you have two tilesets one has firstgid = “1” and the other has firstgid=”301”, the tiles with gids from 1 – 300 are located on the first tileset and >=301 on the second tileset.

two tilesheets

CSV layer parsing

It is possible to specify other encryption methods but I have only tried XML and CSV. Parsing XML layers can freeze the flash player especially on large maps. The CSV layer can be treated as a String so parsing it is only a matter of using split() operations.


4 thoughts on “Getting to know the Tiled map editor”

  1. Nice explanation! And of course you’re right about the XML format. It’s basically deprecated now that Tiled supports the CSV format, which is indeed also very easy to parse.

    The main other interesting format is “base64 + zlib”, which compresses the binary layer data using zlib, and then encodes it in base64 for storage in the XML map file (no encryption is involved, though ;-)). It also loads fast and is interesting because it yields the smallest file size.

  2. @Chetan, Tiled outputs a .tmx file containing info on the map and map layers. It’s up to you on how you might implement that.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s