Flash TMX Parser
I’ve created all the key gameplay elements for Rune Hunt and the next step is to build levels to see if they can be used to create fun gameplay. I didn’t want to write my own tools so I searched for a map editor flexible and feature complete enough to meet my requirements. The editor that impressed me the most was the Tiled Map Editor that has comfy features (including Undo!) and exports an xml based level format.
For people interested in using Tiled for their flash game but unsure how to handle the level format I’ve put together a little example. It contains code that parses a tmx file and recreates the data on the flash side in form of custom classes designed to make all the data easily accessible. The code is generic enough to be used in about any AS3 based project. I support XML, CSV, base64 and zlib-compressed base64 encoding.
In my sample I modified a Flixel Framework v2.23 based demo (the original version called FlxCollision is available on githup) to reload the current game state out of a TMX file on keypress. If you run the editor and the swf simultanously you can make changes in the editor, save, switch to the swf, press the Enter key and see the changes taking effect.
Tiled Editor and Demo App
If you’re interested it’s easy to give it a try. No source compiling is required. Just get the files and unzip them somewhere. Then execute the FlxCollisions.swf file found in bin-debug by double clicking it and load the level map01.tmx found in bin-debug/data in the map editor. No restarting of the flash app should be required. Just trigger the reload ingame whenever you changed something!
If you want to use the same approach for your own project all relevant code is included. The interesting parts are found in the PlayStateTmx class where the TMX file is loaded and parsed and then used to populate the FlxState with level content matching the tiles and objects described in the level file. Have fun! 🙂
pixelpracht.net 
Lithander, thanks for sharing this, especially your flixel code! To get your sample to run I had to copy the tileset png to the bin-debug/data folder, and also had to recompile the swf with -local-with-filesystem.
The object and property handling in your TMX loader looks really useful. I have to give Tiled a closer look.
Paul
Cannot use this out-of-the-box. You should copy tiles.png to bin-debug\data. If I hit Enter then I only get a light-blue background, but nothing else happens 😦
Thanks for your feedback. You shouldn’t need any png’s in bin-debug\data because everything except the level file should be embedded in the swf. But I had a typo in the compiler parameters causing the sandbox issues. Should be fixed now! If it still doesn’t work for you please let me know!
You only need the png to load in Tiled (or else you get an error).
With your .tmx everithing works, but I downloaded the newest Tiled, and if I edit the .tmx with Tiled and save it then press Enter in the flash, its hangs up. I think I downloaded a newer version of Tiled, I”am?
Yeah, same thing for me. If i edit the map with tiled the game hangs up when I load the map.
But I can edit the file by hand in a text editor and there it works.
Weird!
It should work even with the most recent version of Tiled. The only thing that comes to mind is that the editor might save the changed map in a different encoding then it originally was. Please go to Edit/Settings and set an encoding that is NOT gzip compressed. Does that help?
Thanks, that was it. I think the default is gzip so that was the problem, I changed it to zlib and it works great! 😀
Nice post! I’m not a Flash developer but I will try it out sometime. 🙂
I think I will change the default compression to zlib, since this is generally easier to decompress than gzip. The current default dates back to the Java version of Tiled, which only has Gzip input/output streams.
Seems like an interesting program and way to get it into Flixel, but Tiled is giving me problems with your map01.tmx (other tmx files work fine).
The error code that Tiled gives reads: “”Error loading tileset image: C:/blah blah … Line 5, column 29.” I think dobosbence was right — Tiled tries to look in the .tmx’s folder for the tileset that the map is trying to use. Moving tiles.png seems to do the trick.
The objects layer is interesting! Should prove to be a cool tool for our new game. One question, though: do you think a slanted floor would be better represented as a tile or a special object like the elevator? I’m thinking the latter so that collision can be measured differently (partial-allow rather than just keep-out).
Wow! After 2 hour of trial and error, finally managed to open the tiles.png from the external data directory too. You can see a working demo at http://dl.dropbox.com/u/292449/PixelMan/index.htm
It uses the map01.tmx:
“data/”+tmx.getTileSet(“tiles”).imageSource nice.
I can send the source anyone who interested.
I can only get this to work with the tiles.png graphic but not my own; are there restrictions like size? Thanks.
Hi
Great job, but I have problem: your library don’t work with this tileset http://i397.photobucket.com/albums/pp57/vierbit/pixelation/rox_zero/tileset.png
Any suggest ???
Thanks a lot
In the demo the tileset is embedded in the application:
[Embed(source="data/tiles.png")] private var ImgTiles:Class;Make sure that source points to the correct location and recompile the demo!Przemeko: I’ve made a version which loads the tileset as PNG also (and I fixed some bug also). I can share the source if you want.
@dobosbence: If you’ve got an improved version that you want to share I can host it and add a link to the post. Contact me per email! 🙂
thanks, it really save my time.
Do you have a modified version that will compile with the flixel framework 2.5 ? I am new to flixel and did some modifications but everytime i hit enter to re-load the map i get an TypeError: Error #1009 bla bla…
PS:I use Flash Builder 4.5
I’m sorry but I’ve not worked with the newer versions of Flixel, so there is no up-to-date sample code available.
Any chance you could be persuaded to see if this works on the Master branch of Flixel? I love using Tiled, and it would be nice to use it for building maps in Flash.
Thoughts?
I think I finally have a good level design workflow, thanks to your parser and Tiled. Thanks so much for sharing this!