HTML and CSS Reference
In-Depth Information
Before I dive into the “gritty” details, you should know that there's lots of great content that Tiled dumps out on
our behalf. Here's the overall layout of the file, highlighting the things to care about:
Height, width, orientation, tile height, tile width, and version
Properties dictionary (name-value pairs)
Layers array
Data (array of integers specifying which tile to draw)
Layer name
Width, height, visibility, opacity
Layer type (tile layer or object layer)
Tilesets array
Image (
grits_master.png )
firstgid (this is very important—it lets you know what tile you're referencing
in the data).
img width, img height, margin, spacing, tile width, tile height
Parsing the Map Data
Parsing the map data is quite simple: once you've received the JSON data, you have to convert them to a JavaScript
object, using the JSON.parse method. For the sake of ease, you cache some of the values' directions so that you can
fetch them later without an indirection:
//from TILEDmap.js
//go ahead and parse the JSON data using the internal parser
//this will return an object that we can iterate through.
this.currMapData = JSON.parse( mapJSON );
//simply cache all the values from the map for ease-of-use
var map = this.currMapData;
this.numXTiles = map.width;
this.numYTiles = map.height;
this.tileSize.x = map.tilewidth;
this.tileSize.y = map.tileheight;
this.pixelSize.x = this.numXTiles * this.tileSize.x;
this.pixelSize.y = this.numYTiles * this.tileSize.y;
In Tiled, an artist can drop in a group of images and start placing tiles from any of the images on the map as he
or she sees fit. During the loading of your tiled data, you must also load the atlases that were used to create the map,
listed inside the .JSON file (see Figure 17-2 ).
Search WWH ::

Custom Search