Arianne

HowToUseTiledToCreateStendhalMaps: Difference between revisions

← Older edit
Content deleted Content added
VisualWikitext
imported>Ufizavipupu
No edit summary
imported>AntumDeluge
→Parallax Background Support: how to specify multiple tilesets to ignore
 
(89 intermediate revisions by 5 users not shown)
Line 1:
=[http://axufizyfe.co.cc This Page Is Currently Under Construction And Will Be Available Shortly, Please Visit Reserve Copy Page]=
{{Navigation for Stendhal Top|Contributing}}
{{Navigation for Stendhal Contributors}}
 
= How to Use Tiled =
Tiled is a tile editor that supports layers and different tilesets. WeYou usecan download the official Java (not Qt)latest version fromat Mapeditor, and prefer version [http://sourceforgewww.net/projects/tiled/files/Tiled/0.6mapeditor.1org/tiled-0.6.1-bin.zip/download 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 here], and you will need to update these tiles by double clicking the ''update.bat'' - be patient - it really takes some time to run!
 
If you don't have the map files from Stendhal already, please follow these instructions to setup a development environment with the latest source code and map files: [[Stendhal on Eclipse]]
= How to create a Map =▼
 
▲= How to create a Mapnew map =
To start Tiled double click on the <b>tiled.jar</b> file or use the following command line:
java -jar tiled.jar
 
{{TODO|update these screenshots to the most recent version of Tiled}}
[[Image:Tiled1.png]] <br><small>Figure 1: The Tiled map editor</small><br>▼
 
Before you create a new map, I suggest, that you open some existing maps and look around how they are built. And there are many places in Stendhal already, that could use some improvements or additions.
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>▼
 
 
[[Image:Tiled2.png]] <br><small>Figure 2: How to open the template map</small><br>▼
▲[[Image:Tiled1.png]] &lt;<br&gt;&lt;><small&gt;>Figure 1: The Tiled map editor&lt;</small&gt;&lt;><br&gt;>
 
▲First you need to load the &lt;<b&gt;>template.tmx&lt;</b&gt;> map file and resize the map to the desired size.&lt;<br&gt;>
▲Click on &lt;<i&gt;>File&lt;</i&gt;> and now choose &lt;<i&gt;>Open&lt;</i&gt;>, find where you extracted the stendhal_mapeditor-2.00.zip find &lt;<b&gt;>template.tmx&lt;</b&gt;> and click &lt;<i&gt;>Open&lt;</i&gt;>
 
▲[[Image:Tiled2.png]] &lt;<br&gt;&lt;><small&gt;>Figure 2: How to open the template map&lt;</small&gt;&lt;><br&gt;>
 
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.
 
[[Image:Tiled3a.png]] &lt;<small&gt;>Figure 3: Layers view&lt;</small&gt;&lt;><br&gt;>
 
Then click on &lt;<i&gt;>Map&lt;</i&gt;> and choose &lt;<i&gt;>Resize&lt;</i&gt;>.
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.
 
[[Image:Tiled3.png]] &lt;<br&gt;&lt;><small&gt;>Figure 4: The Map Menu&lt;</small&gt;&lt;><br&gt;>
 
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.'''
 
[[Image:Tiled3b.png]] &lt;<br&gt;&lt;><small&gt;>Figure 4: The resize dialog&lt;</small&gt;&lt;><br&gt;>
 
Don't change the layer names from:
Line 44 ⟶ 46:
etc etc seen on the template file.
 
Now save this map as &lt;<b&gt;>Level 0/semos/small_village.tmx&lt;</b&gt;> by clicking on &lt;<i&gt;>File&lt;</i&gt;> and choosing &lt;<i&gt;>Save as...&lt;</i&gt;>.&lt;<br&gt;>Note: You need to type the complete name with the extension &lt;<b&gt;>.tmx&lt;</b&gt;>.
 
[[Image:Tiled5.png]] &lt;<br&gt;&lt;><small&gt;>Figure 6: Save As...&lt;</small&gt;&lt;><br&gt;>
 
==Tilesets==
 
The map &lt;<b&gt;>template.tmx&lt;</b&gt;> doesn't come with any tilesets preloaded. To load a tileset, click on &lt;<i&gt;>Tilesets&lt;</i&gt;> and choose &lt;<i&gt;>New Tileset ...&lt;</i&gt;>. Now tick the box next to &lt;<i&gt;>Reference tileset image ...&lt;</i&gt;> and Click on the &lt;<i&gt;>Browse&lt;</i&gt;> button. This lets you choose your tileset image. They are all located in the tiled/tileset/ folder.
 
[[Image:Tiled6.png]]
Line 108 ⟶ 110:
[[Image:Tiled7.png]]
 
Any image not in ''tileset/'' shouldn't be used. If you want to you can fill in a &lt;<i&gt;>Tileset name&lt;</i&gt;> to help you find it later. You can leave everything else as it is. Then click 'Ok' and your tileset is ready to use!
 
[[Image:Tiled8.png]]
Line 119 ⟶ 121:
These five layers are the ones that host the game graphics:
* 0_floor
* 0_floor_parallax ''(optional alternate floor layer for clients that support parallax backgrounds)''
* 1_terrain
* 2_objects
* 3_roof
* 4_roof_add ''(optional layer)''
 
The ''logic'' layers
Line 144 ⟶ 147:
 
= Editing the map =
Choose the &lt;<i&gt;>0_floor&lt;</i&gt;> Layer.
 
Our village is going to be a rich one, so let's look for a nice ground tile for it.&lt;<br&gt;>
 
Click on &lt;<i&gt;>Fill&lt;</i&gt;> and fill the floor with your chosen tile.
 
[[Image:Tiled9.png]] &lt;<br&gt;&lt;><small&gt;>Figure 7: The ground on the floor layer&lt;</small&gt;&lt;><br&gt;>
 
Ok, but the map still looks too simple.
 
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/daisy_white.png''.
Make sure you choose &lt;<i&gt;>1_terrain&lt;</i&gt;> layer. &lt;<br&gt;>Then in the &lt;<b&gt;>bottom left hand corner&lt;</b&gt;> you will see a small square with a tile in it. Click this and a &lt;<b&gt;>tile selecter dialog&lt;</b&gt;> 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!&lt;<br&gt;>
Dot some bushes and flowers around
 
[[Image:Tiled10.png]] &lt;<br&gt;&lt;><small&gt;>Figure 8: Adding some plants&lt;</small&gt;&lt;><br&gt;>
 
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 &lt;<i&gt;>2_object&lt;</i&gt;> layer now (or terrain is ok too) to add tombs to the graveyard.
 
[[Image:Tiled11.png]] &lt;<br&gt;&lt;><small&gt;>Figure 9: adding a path&lt;</small&gt;&lt;><br&gt;>
 
Now let's add houses and a tree to our village. As you can see adding elements isn't hard, you simply must flip between layers.
 
And now for the tree. Trees are a bit more complex than houses because they are split over two layers: 1 and 2. &lt;<br&gt;>Make sure that the &lt;<b&gt;>upper part&lt;</b&gt;> of the tree is &lt;<b&gt;>always&lt;</b&gt;> on either &lt;<b&gt;>3_roof or 4_roof_add&lt;</b&gt;>. This will mean it is drawn over player when they stand 'behind' it.
 
First we add ''tileset/plant/tree/spruce.png'', and then draw the lower part of it to the ''1_terrain'' layer.
[[Image:Tiled12.png]] &lt;<br&gt;&lt;><small&gt;>Figure 10: The foot of the tree on the terrain layer&lt;</small&gt;&lt;><br&gt;>
 
Now switch to the roof layer. The roof layer is for objects that are drawn on top of players and creatures in the game.
Line 176 ⟶ 179:
Draw the upper part of the tree on roof layer.
 
[[Image:Tiled13.png]] &lt;<br&gt;&lt;><small&gt;>Figure 11: The upper part of the tree on the roof layer&lt;</small&gt;&lt;><br&gt;>
 
Let's practice this. Let's add another tree.
 
[[Image:Tiled14.png]] &lt;<br&gt;&lt;><small&gt;>Figure 12: The bottom of our second tree&lt;</small&gt;&lt;><br&gt;>
 
Remember how to deal with two layers? Make sure the top of the tree is on the roof layer.
 
[[Image:Tiled15.png]] &lt;<br&gt;&lt;><small&gt;>Figure 13: The Top of our second tree&lt;</small&gt;&lt;><br&gt;>
 
A village would not be much of a village without houses. Let's draw one. Start with the wall.
 
[[Image:Tiled16.png]] &lt;<br&gt;&lt;><small&gt;>Figure 14: The start of a house - a wall&lt;</small&gt;&lt;><br&gt;>
 
The wall was drawn on terrain this time, so we can add some decorations to 2_object to make it a bit more interesting.
 
[[Image:Tiled17.png]] &lt;<br&gt;&lt;><small&gt;>Figure 15: Wall decorations added&lt;</small&gt;&lt;><br&gt;>
 
The roof can be drawn on 3_roof, so that a player walking behind the house will be covered by it.
For our map we also add the top of the door there, as the window borders already used the space in 2_object.
 
[[Image:Tiled18.png]] &lt;<br&gt;&lt;><small&gt;>Figure 16: House with a roof&lt;</small&gt;&lt;><br&gt;>
 
The front of the blue roof does not have a border like the rest of it. Also we have another problem:
Line 203 ⟶ 206:
So we draw the missing border to 4_roof_add, and move the skull there too.
 
[[Image:Tiled19.png]] &lt;<br&gt;&lt;><small&gt;>Figure 17: Finished house&lt;</small&gt;&lt;><br&gt;>
Still there? Good, now let's add lots of details to make a good map!
 
[[Image:Tiled20.png]] &lt;<br&gt;&lt;><small&gt;>Figure 18: The map with more details&lt;</small&gt;&lt;><br&gt;>
 
Complete the map yourself :)
Line 216 ⟶ 219:
* Protection (to define non pvp areas)
 
The collision layer determines what is passable and what is not.&lt;<br&gt;>
You need to add the new tileset ''tileset/logic/collision.png'' and in then choose the red square. To define what cannot be travelled over draw a red square in the Collision layer on each non passable tile. It is helpful to drag the opacity of this collision layer to about 30%.
 
[[Image:Tiled21.png]] &lt;<br&gt;&lt;><small&gt;>Figure 19: Collision Tile selected and we have marked the house&lt;</small&gt;&lt;><br&gt;>
 
[[Image:Tiled22.png]] &lt;<br&gt;&lt;><small&gt;>Figure 20: The completed collision map&lt;</small&gt;&lt;><br&gt;>
 
Once you have completed this we have to add objects that are real entities in the Stendhal server. Things like NPCs, some portals, creatures and so on ... Notice what layer we are working on. To add monsters, select them from ''tileset/logic/creature/'' in the ''objects'' layer.
Line 227 ⟶ 230:
We'll add some sheep, sheep food, and a couple of chickens.
 
[[Image:Tiled23.png]] &lt;<br&gt;&lt;><small&gt;>Figure 21: The active objects have been added and can been seen in white&lt;</small&gt;&lt;><br&gt;>
 
We want to make the whole area protected, to we add the tileset ''tileset/logic/protection.png'' and fill on the ''protection'' layer
[[Image:Tiled24.png]] &lt;<br&gt;&lt;><small&gt;>Figure 22: The finished map with the protection layer.&lt;</small&gt;&lt;><br&gt;>
 
And you are done! :)
 
Now, go build your own maps.&lt;<br&gt;>
 
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.
Line 246 ⟶ 249:
* When you put the portals in for new levels, interiors need only the plain white tile saying 'Portal' (even if you are going upstairs). This is because all interior portals are coded by hand so they need the plain white one, not an arrow pointing up or down.
* To help you understand and to have similar approach, take a look on similar dungeons, outside houses or interiors
 
= Parallax Background Support =
 
A parallax background is an image that scrolls at a different rate relative to normal map layers. It is drawn under map layers and visible where tile image data is not used (fully transparent through all layers). The image can be specified in a zone's XML config using the attribute name "parallax" (example: {{StendhalFile|9c0315793a16907c83d3e0dce761e8e6a66ae115|data/conf/zones/kikareukin.xml#L58|6_kikareukin_islands}}). The value should be a path relative the ''data/maps/parallax'' directory. For example, the value "semos_surrounds" would tell the client to use the image ''data/maps/parallax/semos_surrounds.png''.
 
However, when adding parallax backgrounds to maps, there are some things to consider for maintaining backward compatibility with the classic Java client. Transparent areas in a map will simply be black in the Java client. So, unless specifically desired, map data should not contain fully transparent areas. But there are two methods that can be used to instruct supporting clients on where to draw transparency on the map:
# You can specify tilesets to be ignored by the client when building map data. Use the attribute "parallax_ignore_tiles" in the zone's XML config. An example of how to do so can be found in the configuration of {{StendhalFile|9c0315793a16907c83d3e0dce761e8e6a66ae115|data/conf/zones/kikareukin.xml#L18|7_kikareukin_clouds}}. Multiple tilesets can be defined using a comma-delimited value (example: image1,image2,...).
# An additional layer named "0_floor_parallax" can be added the TMX map file. The layer should be identical to "0_floor" excluding the portions that should be transparent. An example of how this is done can be found in map of {{StendhalFile|9c0315793a16907c83d3e0dce761e8e6a66ae115|data/maps/Level%206/kikareukin/islands.tmx|6_kikareukin_islands}} ([https://www.mapeditor.org/ Tiled Map Editor] needed to view).
 
= How to use the map in Stendhal =
Line 252 ⟶ 263:
Add the zone to data/conf/zones.xml as explained in [[HowToAddMapsServerStendhal | How to add new maps to server]]
 
Finally if you want to fine tunning the map by adding NPC, or something else, just create a new file name &lt;<b&gt;>base name of your map&lt;</b&gt;>.java &lt;<i&gt;>( in our example that is your area )&lt;</i&gt;> and edit it. See other files on the same folder to know how to do it, and more explanation in [[HowToAddMapsServerStendhal | How to add new maps to server]]&lt;<br&gt;>
<br>
&lt;br&gt;
 
= Trouble shooting =
* If you are submitting this for inclusion in the game, please edit the path for the tilesets so it is correct. usually &quot;"../../tileset/XX/YY.png&quot;". It is easiest to do this by opening the .tmx file in a text editor.
* Tiled will only resize visible layers. If you want to resize a map, make sure all layers are visible (the tick box 'Show' is selected) before you resize. But don't worry, if you forget to do this, you can open the .tmx file in a text editor and manually change the sizes of the layers which have been missed out.
<br>
&lt;br&gt;
<br>
&lt;br&gt;
[[User:Danter | Danter ]] Has made an extended tutorial, that focuses on changes made to the stendhal map format and a few techniques he uses, check that out aswell: &lt;<br&gt;>
[[HowToUseTiledToCreateStendhalMaps2 |How To Use Tiled To Create Stendhal Maps: Continued]]&lt;<br&gt;>
<br>
&lt;br&gt;
<br>
&lt;br&gt;
----
[[ Stendhal | Back to stendhal main Wiki page ]]
Retrieved from "https://meet.konsthol.eu/w/index.php?title=HowToUseTiledToCreateStendhalMaps"