Skip to content

Flash TMX Parser

by pixelpracht on März 31st, 2010

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! :)

From → Tutorials

22 Comments
  1. Paul K permalink

    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

  2. dobosbence permalink

    Cannot use this out-of-the-box. You should copy tiles.png to bin-debugdata. If I hit Enter then I only get a light-blue background, but nothing else happens :(

  3. Thanks for your feedback. You shouldn’t need any png’s in bin-debugdata 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!

  4. dobosbence permalink

    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?

  5. 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!

  6. 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?

  7. Thanks, that was it. I think the default is gzip so that was the problem, I changed it to zlib and it works great! :D

  8. 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.

  9. skondrk permalink

    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).

  10. dobosbence permalink

    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.

  11. I can only get this to work with the tiles.png graphic but not my own; are there restrictions like size? Thanks.

  12. 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!

  13. 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! :)

  14. 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?

  15. Hi Lithander, I was wondering why I can’t make mine to work?

    Here’s my code:

    package
    {
    import flash.events.Event;
    import flash.net.URLLoader;
    import flash.net.URLRequest;
    import net.pixelpracht.tmx.TmxMap;
    import net.pixelpracht.tmx.*;
    import org.flixel.*

    /**
    * …
    * @author jim
    */
    public class PlayState extends FlxState
    {

    private var player:PlayerSprite;
    private var map:MapTilemap;
    private var dialog:FlxDialog;

    private var t:FlxTilemap = new FlxTilemap();

    [Embed(source=”../bin/data/tiles.png”)] private var tilemapPng:Class;

    public function PlayState()
    {

    }

    override public function create():void
    {
    //map = new MapTilemap();
    //add(map);
    var loader:URLLoader = new URLLoader();
    loader.addEventListener(Event.COMPLETE, onTmxLoaded);
    loader.load(new URLRequest(“data/JIM.tmx”));

    player = new PlayerSprite(50, 50);
    add(player);

    FlxG.worldBounds = new FlxRect(0, 0, t.width, t.height);
    FlxG.camera.setBounds(0, 0, 300, 300, true);
    FlxG.camera.follow(player);

    player.cameras = new Array(FlxG.camera);

    }

    override public function update():void {
    super.update();
    //FlxG.collide(player, map);

    if (FlxG.keys.ENTER)
    {
    var blank:Array = new Array();
    blank.push(“You pressed ‘Enter’!”);
    dialog.showDialog(blank);
    add(dialog);
    }
    }

    private function onTmxLoaded(e:Event):void
    {
    var xml:XML = new XML(e.target.data);
    var tmx:TmxMap = new TmxMap(xml);
    loadStateFromTmx(tmx);
    }

    private function loadStateFromTmx(tmx:TmxMap):void
    {

    /*
    var decoration:FlxSprite = new FlxSprite(256,159,ImgBG);
    decoration.moves = false;
    decoration.solid = false;
    add(decoration);
    add(new FlxText(32,36,96,”collision”).setFormat(null,16,0x778ea1,”center”));
    add(new FlxText(32, 60, 96, “DEMO”).setFormat(null, 24, 0x778ea1, “center”));
    */

    //create the flixel implementation of the objects specified in the ObjectGroup ‘objects’
    //var group:TmxObjectGroup = tmx.getObjectGroup(‘objects’);
    //for each(var object:TmxObject in group.objects)
    //spawnObject(object)

    //Basic level structure

    //generate a CSV from the layer ‘map’ with all the tiles from the TileSet ’tiles’
    var mapCsv:String = tmx.getLayer(‘map’).toCsv(tmx.getTileSet(’tiles’));

    t.loadMap(mapCsv, tilemapPng);
    t.follow();
    add(t);

    }

    private function spawnObject(obj:TmxObject):void
    {
    //Add game objects based on the ‘type’ property
    switch(obj.type)
    {
    case “elevator”:
    //add(new Elevator(obj.x, obj.y, obj.height));
    return;
    case “pusher”:
    //add(new Pusher(obj.x, obj.y, obj.width));
    return;
    case “player”:
    //add(new Player(obj.x,obj.y));
    return;
    case “crate”:
    //add(new Crate(obj.x,obj.y));
    return;
    }
    }

    private function removeDialogBox():void
    {
    remove(dialog);
    }
    }

    }

    I’ve even took out some of the irrelevant codes to make it to work but I can’t unfortunately make the map to show.

    Any help would be really appreciated.

    Thanks.

  16. dexter permalink

    what program should i use to open this project there are so many adobe programs

    • pixelpracht permalink

      If you want to focus on code use Adobe Flash Builder. Otherwise use Adobe Flash Professional.

Trackbacks & Pingbacks

  1. More Game « Chad.Stever
  2. Loading Tiled TMX Files in HaxePunk - Matt Tuttle
  3. Tilebased gaming: Bitmap Brothers Gods “Remake” in Flash « InnerDriveStudios.com

Leave a Reply

Note: XHTML is allowed. Your email address will never be published.

Subscribe to this comment feed via RSS