Tmx Loader

author:
Shaun Mitchell
description:
Load and display a Tiled .TMX map
lastupdate:
2012-07-30
compatible:
v1.1
tag:
tilemap, TMX, tiled
homepage:
https://gist.github.com/3216598
download:
https://gist.github.com/gists/3216598/download

Overview

This extension will load TMX files created in the Tiled application which can be found here http://www.mapeditor.org/

It is not set up into packages so you can set it up as you see fit. This extension enables easy tile maps using starling. It creates dynamic texture atlases for each tilesheet.

The extension is easy to use and only requires a small amount of code to load and display a tilemap.

Use it like so to load dynamically:

TMX = new TMXTileMap();
TMX.addEventListener(Event.COMPLETE, drawLayers);
 
TMX.load("test.tmx");
 
private function drawLayers(event:Event):void
{
   for(var i:int = 0; i < TMX.layers().length; i++)
   {
	addChild(TMX.layers()[i].getHolder());
   }
}

Or to use embedded files you can use it like so:

private var TMX:TMXTileMap;
private var tilesets:Vector.<Bitmap> = new Vector.<Bitmap>();
 
[Embed(source="wood.png")]
private static var wood:Class;
 
[Embed(source="car.jpg")]
private static var car:Class;
 
[Embed(source="test.tmx", mimeType="application/octet-stream")]
private static var mapXML:Class;
 
TMX = new TMXTileMap();
TMX.addEventListener(starling.events.Event.COMPLETE, drawLayers);
 
tilesets.push(Bitmap(new car()));
tilesets.push(Bitmap(new wood()));
 
var x:XML = XML(new mapXML());
TMX.loadFromEmbed(x, tilesets);

And draw as per the original dynamic code above. One note is that you will have to push your tilesheets into the array in the same order that they are listed in the TMX file or the correct sheet will not be used.

I left out a draw layer function to keep it more extendable and reusable, you can get access to all of the properties of the tile map and only draw certain layers if needed.

Changelog

  • 2012/07/31 07:12: First public version
  • 2012/08/06 09:26: Added support for embedded files

Source Code

User Comments

The TMX file should be saved as base64 (zlib compressed) from Tiled. Hoping to save other people some headache. It will error on any other compressions, and not display anything without error if it's saved as XML.

Question

From the above code it looks like the map layers are drawn to their full extent. This can have serious performance issues if the map is too large. Or may be I am not understanding it properly.

Anyways, is there a way to render part of map layers that are currently in view?

Thanks.

Answer

Since the TMXMap is a display object, you can quite easily only render it to a set size canvas and then move it inside the canvas accordingly.

  extensions/tmx_loader.txt · Last modified: 2015/03/11 14:05 (external edit)
 
Powered by DokuWiki