Map Making

This is a tutorial on how to make beautiful looking maps for Andor's Trail.

Preparing the environment

Before we begin, let's set up our environment with the program and files that we will need.

Download Tiled and install it.
Download the Andor's Trail source code by either downloading the prepackaged source files or by downloading the source code via Github (Click “Download zip” in the bottom right hand corner).
Unpack the source files. It doesn't matter where you place the files on your drive, just remember the directory you placed them in. You should get a directory structure something like the following:
Inside the directory AndorsTrail/res/xml should be a bunch of files ending in tmx. These are the existing maps. We will be using them. Open Tiled and open the file “home.tmx” to make sure it shows up correctly. You should see the starting map in the map editor. Examine it if you like. In particular, note the layers available on the right side. Try switching some layers off to see what happens in the editor.
If the file cannot be opened, make sure you are using the same directory structure as listed above. The map files use other files from the “drawable” directory, so make sure that this directory is reachable. Ok, your environment is now ready for making maps.
Ok, your environment is now ready for making maps.

Other Helpful Pages

For more information about layers, please browse the Map Editor.

Making a New Map

Start by opening the file “template.tmx” in Tiled. This file contains the necessary setup for the tiles that we use and the layer names that Andor's Trail uses. It should be an empty 30×30 map.

Use “save as” to save the file to something else. I'm going to make a dungeon map, so I'll save my file as “scarydungeon1.tmx”.

Let's start by making the map the size that we want. Go to “Map” (in menu) → “Resize map” and enter the size you want. I'm going to make my map a 15×11 map.

Paint the ground in the tile type you want, by using the paint tool. For my dungeon, I like to use the following tile type located in map_ground_1.

I usually start by drawing the walls to create the outline of the map by selecting the stamp brush tool. Walls are usually two tiles high before hitting the ceiling. Notice how I can select two tiles at the same time and draw them. Note also that since these cover the whole tile, I can place them in the “Ground” layer (which slightly increases the performance when drawing the map).

There are a couple of things to notice:

Leave a space for where the entrance should be.
Try not to make too many straight lines. In my map, I try to make the outline as “round” as possible without any straight edges.

After that, I'm drawing the the wall corners. They are used for making the edges more smoothly.

Let's finish the walls. For dungeon walls, there are four different tile types that have their edges in four different directions. I'm going to use these as tops of the walls.

Finally, we fill the rest with the non-edge wall type.

I want my dungeon walls to use a partially transparent tile, so I need to place them in “Objects”. To finish the walls we need to place the bottom and top corners.

Ok, this is really starting to look like a map now. Let's add some scary looking graves and other things.

I also want an exit to the north. Let's add a cave opening.

What could be more scary than some broken barrels and crates with cobwebs, right? Let's add that.

The main parts of this map are now complete. Let's add some more clutter to make the map look even more beautiful.

To make the crates look even more creepy, I'm adding some black dust in the “Above” layer. Otherwise, the crate underneath it would be replaced by the dust.

Let's add shadows to the “Above” layer to give the false impression that the map is somehow lit. There is a simple rule for placing the top of the shadow:

If the wall behind the shadow is straight, the shadow's top is straight as well.
If the wall behind the shadow is an edge, the shadow's top is round.

I applied that rule to the shadows in our cave:

Do you see the shadow tile being under the stone corner? I did that by placing the shadow in “Objects” and placing the stone corner in “Above”. Due to this change, the shadow looks more “connected” to the walls.

The visible parts of the map are now done. Let's add the walkable layer. Every tile which is covered by “Walkable” is inaccessible. The bottom tile of the entrance to the north should be reachable though.

Let's add some monsters to the map. Monsters can be found in the monster resource files. If you have downloaded the source code, you can find the monster list file in your res/raw/monsterlist_placeholder.json file. Otherwise, you can browse it online from Github.

To make a new monster, you would have to add it to the monster resource file, and that is a tutorial on its own. Let's re-use some old monster to make it easy. I want to have a basilisk on my map (from the snake cave outside Crossglen), and the basilisk has monster spawngroup “cavesnake2_boss”.

Let's create a spawn area by changing to the “Spawn” layer, and by selecting the “Insert Rectangle” tool in the menu. Now, I'm placing an area on the map (draw from top left to bottom right).

Enable “Snap to grid” under “View”. Due to that feature, the grid has got the same size as the tiles.
Please leave one tile of space between entrances and the spawn areas.

Right click it and select properties, and let's make this a “spawn” type, and specify the monster that we want to spawn here. I can also specify that I want two of them by supplying a “quantity” property.

Ok, let's add some logic to what happens when we enter that north cave. Switch to the “Mapevents” layer and draw a new area on the tile that is the cave exit.

Right click it and select properties, and make the type to “mapchange”. With the “map” and “place” properties, we can specify where the player will end up when stepping on this tile. The “map” should be some other map name, and “place” a name of a mapchange area on that map. (The cardinal points are most commonly used as “place” property.)

I'm making the player end up on the “south” entrance on the next cave in “scarydungeon2”. I should make sure to place a mapchange area with that name on that map when I make it. The “south” area on “scarydungeon2” should also point to the “north” mapchange area on “scarydungeon1”.

That's it. Map complete.