HowToUseTiledToCreateStendhalMaps

How to Use Tiled

Tiled is a tile editor that supports layers and different tilesets.

How to create a Map

To start Tiled double click on the tiled.jar file or use the following command line:

 java -jar tiled.jar

http://arianne.sourceforge.net/wiki_images/tiled_0.jpg
Figure 1: The Tiled map editor

First you need to load the template.tmx map file and resize the map to the desired size.
Click on File and now choose Open, find template.tmx and click Open

http://arianne.sourceforge.net/wiki_images/tiled_1.jpg
Figure 2: How to open the template map

We are going to work on a 64x64 (64 tiles by 64 tiles) map. So click on Map and choose Resize. Note, a 64x64 map is not big (it will take a player around 40 seconds to move from one end to the other) but it is big enough for our example.

http://arianne.sourceforge.net/wiki_images/tiled_6.jpg
Figure 3: Map Menu

As you see in the resize dialog you can resize the map and even position the current map at any point in the new map size. Hence you can always resize your map later.

http://arianne.sourceforge.net/wiki_images/tiled_7.jpg
Figure 4: The resize dialog

Now you must edit the default layer names so that they are named like the zone we are going to create.
So, for example, here we are going to create a small village, so we preceed each layer name by small_village:

• small_village_collision
• small_village_objects
• small_village_2_roof
• small_village_1_object
• small_village_0_floor

This step is very important because Stendhal uses the layer's name and not the file name to generate game content. So please make sure you have renamed the layers correctly.

http://arianne.sourceforge.net/wiki_images/tiled_3.jpg
Figure 5: Rename the layers!

Now save this map as small_village.tmx by clicking on File and choosing Save as....
Note: You need to type the complete name with the extension .tmx. Don't forget to rename all the layers.

http://arianne.sourceforge.net/wiki_images/tiled_5.jpg
Figure 6: Save As...

Layers

As you have already seen there are five layers in the map. They must all exist. However, they can be empty.

The three first layers are the ones that host the game graphics:

• floor
• object
• roof

The draw order is:

1. roof
2. object and sprites like players, monsters, etc... sorted from lowest y, lowest x
3. roof

This basicly means that any objects closer to the bottom of the screen, ie the foreground in our pseudo 3D world will be on top of other objects, and roof will be above everything.

Ok, now let's edit.

Editing the map

Choose the floor Layer.

Our village is going to be a rich one, so let's look for a nice ground tile for it.

Click on Fill and fill the floor with your chosen tile.
You will notice it looks too tiled (i.e. not good), so let's add a few details like borders and a checkered board in the main square.
Notice that everything on the ground is still done on layer 0.

http://arianne.sourceforge.net/wiki_images/tiled_13.jpg
Figure 7: The ground on the floor layer

Ok, but the map still looks too simple. So now let's add some details to the object layer (walls and so on). Make sure you choose object layer.
Then in the bottom left hand corner you will see a small square with a tile in it. Click this and a tile selecter dialog will open. On the right you will see the available Tilesets for Stendhal and on the left all the tiles. Tip: if you drag the pallet out and make it bigger you can eventually get all the like tiles to align (so for example the tiles that make up a tree will all be together) and it will make your life a lot easier!
We are going to make a small cemetery.

http://arianne.sourceforge.net/wiki_images/tiled_14.jpg
Figure 8: Adding some walls

http://arianne.sourceforge.net/wiki_images/tiled_15.jpg
Figure 9: The completed walls

Now we change to the floor layer to add grass and flowers.

http://arianne.sourceforge.net/wiki_images/tiled_16.jpg
Figure 10: Adding grass to the floor layer

http://arianne.sourceforge.net/wiki_images/tiled_17.jpg
Figure 11: Adding flowers

We change back to the object layer now to add tombs to the graveyard.

http://arianne.sourceforge.net/wiki_images/tiled_18.jpg
Figure 12: Adding tomb objects

Now let's add a house and a tree to our cemetery. As you can see adding elements isn't hard, you simply must flip between layers.

http://arianne.sourceforge.net/wiki_images/tiled_21.jpg
Figure 13: Starting to add the house

http://arianne.sourceforge.net/wiki_images/tiled_22.jpg
Figure 14: The house is surrounded by brown due to faulty tileset

As you can see there is a border around the house. The tileset is faulty, so we need to do something to patch this fault and make it look better.

http://arianne.sourceforge.net/wiki_images/tiled_23.jpg
Figure 15: Covering up the fault

To correct the problem we add some dirt (sand) around the building to make it look like this is part of the design.

http://arianne.sourceforge.net/wiki_images/tiled_24.jpg
Figure 16: More details to break up the large areas of the same tile

And now for the tree. Trees are a bit more complex than houses because they are split over two layers: 1 and 2.
Make sure that the upper part of the tree is on layer 2 always. This will mean it is drawn over player when they stand 'behind' it.

http://arianne.sourceforge.net/wiki_images/tiled_25.jpg
Figure 17: The foot of the tree on the floor layer

We add the bottom of the tree, tile by tile.
Now switch to the roof layer.

http://arianne.sourceforge.net/wiki_images/tiled_26.jpg
Figure 18: The roof layer is for objects on top of everything

Now we add the upper part of the tree on layer roof

http://arianne.sourceforge.net/wiki_images/tiled_27.jpg
Figure 19: The upper part of the tree on the roof layer

Let's practice this. Let's add another tree.

http://arianne.sourceforge.net/wiki_images/tiled_28.jpg
Figure 20: The bottom of our second tree

Remember how to deal with two layers? Make sure the top of the tree is on the roof layer. Let's also add a path to the house and create a door on the wall.

http://arianne.sourceforge.net/wiki_images/tiled_31.jpg
Figure 21: The completed graveyard

Still there? Good, now let's add lots of details to make a good map!

http://arianne.sourceforge.net/wiki_images/tiled_34.jpg
Figure 22: The whole of our village with some extra details

Complete the map yourself :)

Finally we need to add two more important things:

• Objects (Entities, active game objects, this includes portals, signs, NPCs etc)
• Collision

The collision layer determines what is passable and what is not.
Use the tile pallet and in the collision Tileset choose the red square. To define what cannot be travelled over draw a red square in the Collision layer on each non passable tile.

http://arianne.sourceforge.net/wiki_images/tiled_36.jpg
Figure 23: Collision Tile selected and we have marked on of the walls

Once you have completed this we have to add objects that are real entities in the Stendhal server. Things like NPCs, Portals, Creatures, zone change points, and so on ... Notice what layer we are working on. The active objects can be found in the Objects Tileset in the tile pallet.

http://arianne.sourceforge.net/wiki_images/tiled_37.jpg
Figure 24: The completed collision map

Let's add a portal to our tomb and a few zone entries. And of course, a waiter for our Bar.

http://arianne.sourceforge.net/wiki_images/tiled_38.jpg
Figure 25: The active objects have been added and can been seen in white

Note: zone changes go on the border of the map.

http://arianne.sourceforge.net/wiki_images/tiled_39.jpg
Figure 26: The completed graveyard and bar with collision and objects

And you are done! :)

Now, go build your own maps.

Please note that, if during your work you find that some important tiles are missing please create the tile and send it to us so that everyone get it and can see your tile.