HowToUseTiledToCreateStendhalMaps: Difference between revisions

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

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

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

First you need to load the <b>template.tmx</b> map file and resize the map to the desired size.<br>

Click on <i>File</i> and now choose <i>Open</i>, find <b>template.tmx</b> and click <i>Open</i>

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

We are going to work on a 64x64 (64 tiles by 64 tiles) map. So click on <i>Map</i> and choose <i>Resize</i>.

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 <br><small>Figure 3: Map Menu</small><br>

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 <br><small>Figure 4: The resize dialog</small><br>

Now you must edit the default layer names so that they are named like the zone we are going to create.<br>

So, for example, here we are going to create a small village, so we preceed each layer name by <b>small_village</b>:

<b>This step is very important</b> 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 <br><small>Figure 5: Rename the layers!</small><br>

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

http://arianne.sourceforge.net/wiki_images/tiled_5.jpg <br><small>Figure 6: Save As...</small><br>

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

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

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.

Choose the <i>floor</i> Layer.

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

Click on <i>Fill</i> and fill the floor with your chosen tile. <br>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.<br>

Notice that everything on the ground is still done on layer 0.

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

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 <i>object</i> layer. <br>Then in the <b>bottom left hand corner</b> you will see a small square with a tile in it. Click this and a <b>tile selecter dialog</b> 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!<br>

We are going to make a small cemetery.

http://arianne.sourceforge.net/wiki_images/tiled_14.jpg <br><small>Figure 8: Adding some walls</small><br>

http://arianne.sourceforge.net/wiki_images/tiled_15.jpg <br><small>Figure 9: The completed walls</small><br>

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

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

http://arianne.sourceforge.net/wiki_images/tiled_17.jpg <br><small>Figure 11: Adding flowers</small><br>

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

http://arianne.sourceforge.net/wiki_images/tiled_18.jpg <br><small>Figure 12: Adding tomb objects</small><br>

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 <br><small>Figure 13: Starting to add the house</small><br>

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

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 <br><small>Figure 15: Covering up the fault</small><br>

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 <br><small>Figure 16: More details to break up the large areas of the same tile</small><br>

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

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

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

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

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

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

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

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

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 <br><small>Figure 21: The completed graveyard</small><br>

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

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

Finally we need to add two more important things:

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

The collision layer determines what is passable and what is not.<br>

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 <br><small>Figure 23: Collision Tile selected and we have marked on of the walls</small><br>

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 <br><small>Figure 24: The completed collision map</small><br>

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 <br><small>Figure 25: The active objects have been added and can been seen in white</small><br>

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

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

And you are done! :)

Now, go build your own maps.<br>

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.