tmx-loader.js

Features

• Easy loading of TMX Files
• Easy access to Tile Layers and Object Layers
• Easy access to Objects
• Easy access to Data (CSV Format Only so far)

---

Demo

Use the W,A,S and D keys to navigate around this small map (Objects are bordered in red):

---

Running the Tests

By downloading and hosting the files and accessing testRunner.html you can run some tests which exercise the various properties discussed above

View the Latest Test Run

Note: When running locally, Chrome errors with the warning:

XMLHttpRequest cannot load file:<tmxfile> Origin null is not allowed by Access-Control-Allow-Origin.

To fix this either run Chrome with the --allow-file-access-from-files option. Or serve the files from a server.

Downloads and Source Files

View on Github

Grab the files as a ZIP File

Grab the files as a TAR Ball

---

How to use

Make sure you have include jquery, and tmx-loader.js

<script type="text/javascript" src="assets/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="tmx-loader.js"></script>

In your javascript files you can then simply call:

tmxloader.load('tmxfile'); 

To load your TMX File. The following is a quick review of the common functions:

tmxloader.load('tmxfile'); 

//Common Map Properties
tmxloader.map.width; 
tmxloader.map.height; 
tmxloader.map.tileWidth; 
tmxloader.map.tileHeight; 

//Accessing Layer Data
tmxloader.map.layers[0].name;
tmxloader.map.layers[0].data[y][x]; //Get the value of the 1st tile map layer at co-ordinates (x,y);

//Accessing Object Groups
tmxloader.map.objectgroup['Enemies'].objects.length; // Get the number of objects in the Object Group 'Enemies'
tmxloader.map.objectgroup['Enemies'].objects[0].name; //Get the name of an object

//Common Object Properties
tmxloader.map.objectgroup['Enemies'].objects[0].x ;
tmxloader.map.objectgroup['Enemies'].objects[0].y;
tmxloader.map.objectgroup['Enemies'].objects[0].width;
tmxloader.map.objectgroup['Enemies'].objects[0].height;

//Custom Object Properties (User Specified)
tmxloader.map.objectgroup['Enemies'].objects[0].propeties['state'];