Whats is TileD?


TileD is a cross platform tile map editor available for free at www.mapeditor.org.
TwoDEngine supports the native TileD TMX xml map format, though not yet all of its features.

The currently supported features are:
  • Multi-Layer orthogonal maps
  • Hidden map layers
  • Tile properties
More will likely be added over time.

How do I use TileD with TwoDEngine?


Below are detailed instructions for creating a TMX and using it in TwoDEngine. The examples are currently all in Visual Studio Express 2010 and the Windows Phone SDK 7.1. Monogame usage is analogous and a monogame example will likely be added in the future.

These examples use existing tile set images. See the section of this wiki on tileset creation for more information on how to do that.

Step 1: Start TileD and Set Preferences


Screen Shot 2013-03-28 at 12.21.39 PM.png

When you start Tiled it will look something like the above.
Select the preferences dialog with the menu slection Tiled->Preferences and you should see a dialog that looks like this:




Screen Shot 2013-03-28 at 12.28.27 PM.png



Set "Store tile layer data as" to XML like this and click close:



Screen Shot 2013-03-28 at 12.28.27 PM.png


Step 2: Create a new Tilemap

Before you can do anything with TileD you need to have a tile map to work on.
Create a tile map by selecting File->New from the menu bar. That will bring up the new tile map dialog like this:


Screen Shot 2013-03-28 at 12.38.12 PM.png


Make sure that Orientation is set to orthogonal and that your Tile size settings are the width and height of one tile in your tile set. Set the map wise to the number of tiles you want in width and depth of the tile grid.

Click OK and your screen should now look like this:

Screen Shot 2013-03-28 at 12.42.35 PM.png

Step 3: Import your tileset

You can import your tile set by simply dragging the tile set image file from your desktop and dropping it in the tile set window on the lower right. This will pop open the import tileset dialog:


Screen Shot 2013-03-28 at 12.46.29 PM.png


This dialog may be fine as is, but pay particular attention to the Use Transparent Color check box. If your tileset uses an alpha channel for transparency do not click this. On the other hand if your tiles are on a colored background that you want to be invisible in the map, check the box and set the background color in the color picker next to it (most often its pure white.)

Repeat this step for every tile set you wish to use in your final map. When done your environment will look something like this:


Screen Shot 2013-03-28 at 12.51.03 PM.png

Step 4: Paint your tile map

You may create as many layers as you like for your map and check or uncheck them to make them visible or invisible in your game. You may also assign properties to tiles which will allow you to search for them and retrieve values from them at run time. See www.mapeditor.org for more instructions in using TileD.

Step 5: Save your map and import it to your Visual Studio Project

Save your map using CTRL-S (APPLE-S on the mac) or using either File->Save or File->SaveAs from the main program menu. Now open your visual studio and create an XNA game project if you havent't already. That should look like this:


Screen Shot 2013-03-28 at 12.59.05 PM.png





Screen Shot 2013-03-28 at 1.06.21 PM.png
Find your tilemap TMX file and tileset image files and drag them all to the Content project root (In my case, TileDemoProjectContent). After you have done that, the project area should look like the one on the right.

You will need to reset the properties on the TMX file. Select it and then click the properties tab at the bottom. This will change the view to the properties view like below:


Proepties1.png

Set Build Action to None
Set Copy to Out to Copy of newer


The properties for your TMX file should now look like this below:

Proeprties2.png

DO NOT SET THE PROPERTIES ON THE PNG FILES LIKE THIS!

They are already fine the way they are.

Step 6: Fix the tileset paths

Important: The latest release of TwoDEngine does not require this step IF (a) your tilesets are in the same content directory as your tile map AND (b) you pass false as the third parameter (useTilsetPaths) to the Scenegraph constructor.

Inside the TMX file are the paths to the tile set files as they were when you made the tilemap. But to run in our game we want the paths to just be to where they are in the contents folder. If you put them at the root of your content project, like suggested above, that means they are at the root of the program's content and we can just remove the paths.

To do this we open the TMX in Visual Studio by double clicking it. When you do that you should see something like this:

TMX in VS.png

At the top of the XML are a set of <tileset> elements. Each one contains an <image source="..."> element.

TilesetXML.png

You want to remove the paths from the source strings, leaving just the PNG file names. It should look something like this:

edited TilesetXML.png

Save the TMX and you are ready to write your display code!

Step 7: Displaying a Tile Map with TwoDEngine

TwoDEngine uses a scenegraph to control the display. A tile map is just a scenegraph object line a sprite, but one that draws itself in multiple layers based on the tile map data.

To display the scene graph, open the Game1.cs file in the game code project (In my case, TileDemoProject). At the top you will see a set of using statements. These import various parts of various libraries:

usingbefore.png









To these add the following lines:
using TwoDEngine;
using TwoDEngine.Scenegraph;
using TwoDEngine.Scenegraph.SceneObjects;

So the top looks like this:

usingafter.png













Now we need to create a scenegraph. To do that we go down to the constructor:

constructor before.png

And add the line:
new Scenegraph(this);

So it now looks like this:

public Game1()
{
    graphics = new GraphicsDeviceManager(this);
    Content.RootDirectory = "Content";
 
    new Scenegraph(this);
}


Finally, we need to create the Tilemap. To do that we go down to LoadContent method and add the following line:

new TileMap(this,Registry.Lookup<Scenegraph>(),@"Content\DemoMap.tmx");

DemoMap.tmx should be replaced with the name of your tile map. The LoadContent method should then look something like this:

protected override void LoadContent()
{
    //Create a new SpriteBatch, which can be used to draw textures.
     spriteBatch = new SpriteBatch(GraphicsDevice);
 
    //TODO: use this.Content to load your game content here
    new TileMap(this,Registry.Lookup<Scenegraph>(),@"Content\DemoMap.tmx");
}



Thats all you need! Compile and run it!