Arianne

HowToUseTiledToCreateStendhalMaps: Difference between revisions

← Older editNewer edit →
Content deleted Content added
VisualWikitext
imported>Kymara
add navigation for contributors
imported>Kymara
first attempt at updating this since the old had very old gfx.
Line 3:
 
= How to Use Tiled =
Tiled is a tile editor that supports layers and different tilesets. We use the official version from [http://mapeditor.org mapeditor.org], and prefer version 0.6.1. Download the zip and extract it.
You can download our Stendhal's map tiles [http://downloads.sourceforge.net/arianne/stendhal_mapeditor-2.00.zip?modtime=1177281124&big_mirror=0&filesize=5113162 Download here], and you will need to update these tiles by double clicking the ''update.bat'' - be patient - it really takes some time to run!
 
= How to create a Map =
'''Always update your system so that you are in sync with CVS files'''
 
To start Tiled double click on the <b>tiled.jar</b> file or use the following command line:
java -jar tiled.jar
 
http[[Image://arianneTiled1.sourceforge.net/wiki_images/tiled_0.jpgpng]] <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 where you extracted the stendhal_mapeditor-2.00.zip find <b>template.tmx</b> and click <i>Open</i>
 
http[[Image://arianneTiled2.sourceforge.net/wiki_images/tiled_1.jpgpng]] <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. '''First make sure all layers are visible, before you resize.''' Do this using the 'Show' tick boxes in the dialog at the side panel. Then click on <i>Map</i> and choose <i>Resize</i>.
 
[[Image:Tiled3a.png]] <small>Figure 3: Layers view</small><br>
 
Then 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[[Image://arianneTiled3.sourceforge.net/wiki_images/tiled_6.jpgpng]] <br><small>Figure 34: The 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. '''Make sure all layers are visible before you resize any map.'''
 
http[[Image://arianneTiled3b.sourceforge.net/wiki_images/tiled_7.jpgpng]] <br><small>Figure 4: The resize dialog</small><br>
 
Don't change the layer names from:
* protection
* collision
* objects
* 4_roof_add
* 3_roof
* 2_object
Line 36 ⟶ 41:
* 0_floor
 
etc etc seen on the template file. ''(the pictures here show renamed layers, but we shouldn't do this!)''
 
Now save this map as <b>Level 0/semos/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>.
 
http[[Image://arianneTiled5.sourceforge.net/wiki_images/tiled_5.jpgpng]] <br><small>Figure 6: Save As...</small><br>
 
==Tilesets==
 
The map <b>template.tmx</b> doesn't come with any tilesets preloaded. To load a tileset, click on <i>Tilesets</i> and choose <i>New Tileset ...</i>. Now tick the box next to <i>Reference tileset image ...</i> and Click on the <i>Browse</i> button. This lets you choose your tileset image. They are all located in the tiled/tileset/ folder.
 
[[Image:Tiled6.png]]
 
Finding what you want should be easy as the tilesets are split into folders depending on what they are used for:
Line 96 ⟶ 103:
:*cloud
 
We are going to need grass, so we go to ''tileset/ground'' and select ground.png
Any image not in tiled/tileset/ shouldn't be used. If you want to you can fill in a <i>Tileset name</i> to help you find it later, or just leave it Untitled. You can leave everything else as it is. Then click 'Ok' and your tileset is ready to use!▼
 
[[Image:Tiled7.png]]
Click on the square in the bottom left corner of the Tiled application to bring up the palette chooser. There's more on this later, so read on ...▼
 
▲Any image not in tiled/''tileset/'' shouldn't be used. If you want to you can fill in a <i>Tileset name</i> to help you find it later, or just leave it Untitled. You can leave everything else as it is. Then click 'Ok' and your tileset is ready to use!
<b>Note</b> Loading tilesets is time consuming. So, if you're making a map which is going to have very similar tiles to another which is already made, you could open that map instead of <b>template.tmx</b>. And then Save As ... and name it with the new name and location. You can delete the stuff on each layer so you still start with an empty map if you like, but at least you have a lot of tilesets already loaded.
 
[[Image:Tiled8.png]]
 
▲Click on the square in the bottom left corner of the Tiled application to bring up the palette chooser. There's more on this later, so read on ...
 
==Layers==
AsThe youmap havelayers alreadymust seennot therebe arerenamed atand leastmust fiveall layersexist, inapart thefrom map.''4_roof_add'' <b>Theywhich must allis existoptional. However, theyany of the layers can be empty.</b>
 
TheThese five first layers are the ones that host the game graphics:
* 0_floor
* 1_terrain
* 2_objects
* 3_roof
* 4_roof_add ''optional layer''
 
theThe ''logic'' layers
*objects
*collision
Line 136 ⟶ 147:
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[[Image://arianneTiled9.sourceforge.net/wiki_images/tiled_13.jpgpng]] <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 terrain layer (walls and so on).
So now let's add some details to the terrain layer (flowers, and bushes). We need to load those tiles, so repeat the steps to load ground tiles, but look for ''tileset/plant/bush/bushes.png'' and ''tileset/plant/flower/dasiy_white.png''.
Make sure you choose <i>1_terrain</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>
Dot some bushes and flowers around
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[[Image://arianneTiled10.sourceforge.net/wiki_images/tiled_17.jpgpng]] <br><small>Figure 118: Adding flowerssome plants</small><br>
 
We need a path, so we add ''tileset/ground/green_paving_3.png'' to our palette, and draw one on the ''1_terrain'' later.
We change to the <i>2_object</i> layer now (or terrain is ok too) to add tombs to the graveyard.
 
http[[Image://arianneTiled11.sourceforge.net/wiki_images/tiled_18.jpgpng]] <br><small>Figure 129: Addingadding tomba objectspath</small><br>
 
Now let's add a househouses and a tree to our cemeteryvillage. 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.
Line 191 ⟶ 183:
 
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!
Retrieved from "https://meet.konsthol.eu/w/index.php?title=HowToUseTiledToCreateStendhalMaps"