TileD Import and Usage

TileD is a tile map editor written in Java and available here. Slick provides support for loading and rendering orthographic maps created in this tool.

The TiledMap class allows the developer to load a map, interegate the data and render the tiles to the screen. Loading the map is similar to loading images and sounds, simply construct a TiledMap class with a reference to the map to load. The map XML can specify a reference to a tileset to use on the map, this is done as a relative path. If required the constructor can take both the reference to the tile map XML and a base path to use to look up the tilset files. Assume that I keep all my resources (tilemaps and tilesets included) in a directory called “res” in my classpath an appropriate constructor would be:

TiledMap map = new TiledMap("res/testmap.tmx","res");

To render this whole map we'd simply call the render method:

map.render();

Or to render just a section of the map (maybe based on the location of the current player) the render method can take parameters:

// render(int x, int y, int sx, int sy, int width, int height) 
map.render(100,100,0,0,10,10);

Which would render the section of the map in tiles from 0,0 to 10,10 at the screen position 100,100. This can be be very useful for performance when scroll round large tile maps.

The other option provided when rendering is to render “lineByLine”. This option indicates that the each row of the tilemap rendering should be done seperately allowing you to render characters in the appropriate places on RPG Maker style maps. For instance, you may want to render your character before the items at a greater y axis location so that the character appears to behind some item.

To get a chance to render between these lines you must subclass TiledMap and override the renderedLine() method. This method is a notification that a single line of the map has been rendered and gives you a chance to render character/entity sprites.

The other extremely useful thing about Tiled maps is the ability to assign meta data to the tiles that are placed. A good example is collision - it's wonderful to be able to assign a proprty to a particular tile in a generic editor that indicates the tile blocks movement.

The Slick TiledMap support allows you to integrate the properties of a given location based on the properties assigned to the tiles in Tiled. This is a two stage process, first we must identify the ID of the tile at the given location using:

// getTileId(int x, int y, int layerIndex) 
int tileID = getTileId(10,10,0);
Which gets the ID of the tile at location 10,10 on layer 0. We can then use this ID to look up meta data properties like so:

// getTileProperty(int tileID, String propertyName, String def) 
String blocked = getTileProperty(tileID, "blocked", "false");

Note that we can specify a default value that will be returned if the specified property is not defined for the given tile ID. This makes conversion code tidier, for example.

boolean blocked = "true".equals(getTileProperty(tileID, "blocked", "false"));

Finally, it's worth noting that the meta data properties are not stored in a way that is suitable for high perfromance use. It much better for game development to read the properties at initialisation time and store them in some more perforant format later. Check tile properties on a per frame basis is likely to be slow.

NOTE: Slick only supports maps that are created with tilesets that use a single image for the tiles. You can have multiple tilesets, but only one image per set. Essentially, this means that animations on tiles are not supported.