HowToUseTiledToCreateStendhalMaps: Difference between revisions

From Arianne
Jump to navigation Jump to search
Content deleted Content added
imported>MiguelAngelBlanchLardin
No edit summary
imported>MiguelAngelBlanchLardin
No edit summary
Line 4: Line 4:
= How to create a Map =
= How to create a Map =
Load template.tmx and resize the map to desired size.<br>
Load template.tmx and resize the map to desired size.<br>
So open Tiled by double clicking in <b>tiled.jar</b> or by running it as:
java -jar tiled.jar


http://arianne.sourceforge.net/wiki_images/tiled_0.jpg
http://arianne.sourceforge.net/wiki_images/tiled_0.jpg

Now click on File and now choose Open, find template.tmx and click Open


http://arianne.sourceforge.net/wiki_images/tiled_1.jpg
http://arianne.sourceforge.net/wiki_images/tiled_1.jpg


We are going to work on a 64x64 map.
We are going to work on a 64x64 map. So click on Map and choose Resize.
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
http://arianne.sourceforge.net/wiki_images/tiled_6.jpg

As you see you can resize the map and make also bigger so you can create a bigger map later.


http://arianne.sourceforge.net/wiki_images/tiled_7.jpg
http://arianne.sourceforge.net/wiki_images/tiled_7.jpg
Line 19: Line 26:
* small_village_collision
* small_village_collision
* small_village_objects
* small_village_objects
* small_village_2_roof
* small_village_roof
* small_village_1_object
* small_village_object
* small_village_0_floor
* small_village_floor


This step is very important because Stendhal use layers' name and not file name to generate game content. So please make sure you named them correctly.
http://arianne.sourceforge.net/wiki_images/tiled_2.jpg


http://arianne.sourceforge.net/wiki_images/tiled_3.jpg
http://arianne.sourceforge.net/wiki_images/tiled_3.jpg


Don't forget to rename all the layers.


Now save this map as small_village.tmx
Now save this map as small_village.tmx by click on File and choose Save as.<br> You need to type the complete name with .tmx

http://arianne.sourceforge.net/wiki_images/tiled_4.jpg


http://arianne.sourceforge.net/wiki_images/tiled_5.jpg
http://arianne.sourceforge.net/wiki_images/tiled_5.jpg
Line 58: Line 64:
http://arianne.sourceforge.net/wiki_images/tiled_10.jpg
http://arianne.sourceforge.net/wiki_images/tiled_10.jpg


Our village is a rich one, so let's look for a nice ground for it.
Our village is a rich one, so let's look for a nice ground for it.<br>
Now click on Fill and fill the floor. ok?
Now click on Fill and fill the floor. ok? It is too tiled, so let's add a few details like borders and a checked board at the main square.<br>
Notice that everything is still done at layer 0.

http://arianne.sourceforge.net/wiki_images/tiled_11.jpg

http://arianne.sourceforge.net/wiki_images/tiled_12.jpg

It is too tiled, so let's add a few details.


http://arianne.sourceforge.net/wiki_images/tiled_13.jpg
http://arianne.sourceforge.net/wiki_images/tiled_13.jpg

Revision as of 11:33, 2 June 2005

How to Use Tiled

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

How to create a Map

Load template.tmx and resize the map to desired size.
So open Tiled by double clicking in tiled.jar or by running it as:

 java -jar tiled.jar

http://arianne.sourceforge.net/wiki_images/tiled_0.jpg

Now click on File and now choose Open, find template.tmx and click Open

http://arianne.sourceforge.net/wiki_images/tiled_1.jpg

We are going to work on a 64x64 map. So click on Map and choose Resize. 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

As you see you can resize the map and make also bigger so you can create a bigger map later.

http://arianne.sourceforge.net/wiki_images/tiled_7.jpg

Now edit layers names, so that they are named like the zone we are going to create.
We are going to create a small village, so we name them 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 use layers' name and not file name to generate game content. So please make sure you named them correctly.

http://arianne.sourceforge.net/wiki_images/tiled_3.jpg

Don't forget to rename all the layers.

Now save this map as small_village.tmx by click on File and choose Save as.
You need to type the complete name with .tmx

http://arianne.sourceforge.net/wiki_images/tiled_5.jpg


Let's start

Layers

As you see there are five layers at the map. It is mandatory for all of them to exists. Although you can let them be empty.

The three firsts layers are the ones that hosts 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

That means that everything will be draw as common games, and roof will be above everything. Right? Ok, now let's edit.

Editing the map

Choose floor Layer.

http://arianne.sourceforge.net/wiki_images/tiled_10.jpg

Our village is a rich one, so let's look for a nice ground for it.
Now click on Fill and fill the floor. ok? It is too tiled, so let's add a few details like borders and a checked board at the main square.
Notice that everything is still done at layer 0.

http://arianne.sourceforge.net/wiki_images/tiled_13.jpg

Yes? But the map still looks too simple. So now let's add some details on the object layer, like walls and so. Make sure you choose object layer.

http://arianne.sourceforge.net/wiki_images/tiled_14.jpg

Again, we draw the basic and add more details. See how to play with layers.

http://arianne.sourceforge.net/wiki_images/tiled_15.jpg

http://arianne.sourceforge.net/wiki_images/tiled_16.jpg

http://arianne.sourceforge.net/wiki_images/tiled_17.jpg

http://arianne.sourceforge.net/wiki_images/tiled_18.jpg

http://arianne.sourceforge.net/wiki_images/tiled_19.jpg

http://arianne.sourceforge.net/wiki_images/tiled_20.jpg


Now let's add a house and a tree for our cementery.

http://arianne.sourceforge.net/wiki_images/tiled_21.jpg

http://arianne.sourceforge.net/wiki_images/tiled_22.jpg

http://arianne.sourceforge.net/wiki_images/tiled_23.jpg

http://arianne.sourceforge.net/wiki_images/tiled_24.jpg

And now the tree

http://arianne.sourceforge.net/wiki_images/tiled_25.jpg

http://arianne.sourceforge.net/wiki_images/tiled_26.jpg

http://arianne.sourceforge.net/wiki_images/tiled_27.jpg

http://arianne.sourceforge.net/wiki_images/tiled_28.jpg

http://arianne.sourceforge.net/wiki_images/tiled_29.jpg

http://arianne.sourceforge.net/wiki_images/tiled_30.jpg

http://arianne.sourceforge.net/wiki_images/tiled_31.jpg

Did you noticed how to handle layers?

Let's add a path to the house and create a door at the wall.

http://arianne.sourceforge.net/wiki_images/tiled_32.jpg

http://arianne.sourceforge.net/wiki_images/tiled_33.jpg

http://arianne.sourceforge.net/wiki_images/tiled_34.jpg

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

http://arianne.sourceforge.net/wiki_images/tiled_35.jpg

Complete the map yourself :)

Finally we need to add two important things:

  • Objects
  • Collision

Collision layer determines what is trespasable and what not. Draw in red everything that is not trespasable.

http://arianne.sourceforge.net/wiki_images/tiled_36.jpg

http://arianne.sourceforge.net/wiki_images/tiled_37.jpg

Finally let's add a portal for tomb and a few zone entries. And of course a waiter for our Bar.

http://arianne.sourceforge.net/wiki_images/tiled_38.jpg

Notice the zone changes on the border of the map.

http://arianne.sourceforge.net/wiki_images/tiled_39.jpg

And done! :)

Now build your own maps.
Surely on your work you will find that some important tiles are missed, if you create a new tile please send it to us so that everyone get it and can see your tile.