Howto: Using Tiled with cocos2d (Part 1)

This is a short howto for using Tiled (http://www.mapeditor.org) to create tilemaps for cocos2d.

What is tiled?

Tiled is a general purpose tile map editor. It functions as a free tool to allow the easy creation of map layouts. It is versatile enough to allow specifying more abstract things such as collision areas, enemy spawn positions, or power-up positions. It saves all of this data in a convenient, standardized tmx format.

Read the full article about : “Introduction to Tiled Map Editor: A Great, Platform-Agnostic Tool for Making Level Maps”

Nitroman level with tiled


Non-Retina and Retina maps with tiled.

One problem with Tiled is, that it’s not possible to export a level for retina and non retina devices. 

We found 3 Workarounds for the Problem:

Solution Create non retina & retina with tiled Edit tmx file for retina devices Modify tmx file via code
description Create the map for non retina and retina devices with Tiled. Create the map for non retina devices with Tiled, create 2 Tilesets (non retina, retina) and create retina tmx by hand. Create the map for non retina devices with Tiled and write a Tilemap Extension class which dynamically converts the map into a retina map if necessary.
difficulty low (no development know-how needed) mid (xml know-how needed) mid – high
time effort to create retina map high (you need to build the map twice) mid no effort (only 1 time effort to create the Tilemap extension class)
vulnerability to errors This solution is very error prone if you have large maps. You have to create the maps 1:1 identically. You have to change 8 parameters from the tmx file. You create the extension class once and you don’t have to modify any parameter per hand.

Edit tmx file for retina devices:

This is the tilemap file for a non retina map.

  1. To create the the retina tilemap file copy the non-retina tilemap and add the prefix -hd (e.g.: level-hd.tmx) to the filename.
  2. Create a tileset for the retina devices. e.g.: tileset-hd.png
  3. Open the level-hd.tmx file with a text editor and change the following parameter to use the retina tileset:
    • tilewidth=”100″
    • tileheight=”100″

    • tilewidth=”100″
    • tileheight=”100″
    • spacing=”4″

    • source=”../../../../themes/standard/tileset-hd.png”
    • width=”1036″
    • height=”724″

 


Stay tuned for the second part, showing how to write a tilemap extension class.