View Full Version : [Guide] Mapping Tutorial for Beginners

August 22nd, 2013, 1:00 PM
[css-div="background: none repeat scroll 0% 0% transparent; font-weight: normal; margin-bottom: -10pt; padding: 0pt; border-bottom: 1px solid rgb(170,170,170); font-size: 188%;"]Worldslayer's Mapping Tutorial for Beginners[/css-div]
(An Introduction to Mapping)

This tutorial is meant as a tool for beginners in mapping. I may or may not expand on it at a later point in time.

Functional and aesthetic maps are key to a game's success. The world you build for your players to explore not only makes your game look good when done properly, but it also makes it feel good. Well made maps allow for the player to easily explore your world and also let you provide a unique feel to your game to bring it to life.

[css-div="background: none repeat scroll 0% 0% transparent; font-weight: normal; margin-bottom: -10pt; padding: 0pt; border-bottom: 1px solid rgb(170,170,170); font-size: 188%;"]The Basics[/css-div]
(The Building Blocks for a Good Map)

Provide [Space]
Space is something that is not always understood by new mappers or even old ones at times. Space is not just the open area of the map, it is also the area of the map that holds detail.

If you think about space as not only a positive but also a negative, you now have two sides to this coin, and utilizing both properly allows you to create a full and beautiful map.

Positive space, is going to be space that is open. Your player is free to move around in this space and it is often filled with paths or grass, but also detail tiles such as flowers, rocks, city trash etc.

Negative space, is going to be space that is restricted. Your player is unable to move around in this space and it is filled with obstructing tiles, such as trees, buildings, mountains etc.

If you add a third dimension to this, you will have neutral space. This space is space that separates two distinct levels of space. An example of neutral space is water. Something such as a lake is a layer of space that is essentially a different working canvas with the same general properties we apply to any map.

Provide [Flow]
Flow is the way in which the map itself 'moves'.

We all know maps do not actually move. However, all maps have a fluidity within them which creates flow. You see this in positive space. Flow provides open space to grant the player a way to move from one end of the map to the other and it also provides the map with a natural feel.

If you have ever walked along a deer trail or hiking trail, you may notice that the trail weaves between the trees and will sometimes move in and out along the side of of hills, providing continuity.

We will dive further into flow a bit later.

Provide [Depth]
Depth allows your map to visually make sense to your player. It also allows you to provide a good amount of detail. Thinking about maps from the ground up, sets precedence for logical placement of tiles.

Provide [Focus]
Focus is key. Not only in providing a single focus point on your map, such as a key location you want a player to visit, but also a general focus on what where and why's of your map.

What is your map of?

Where is your map located?

Why is your map here?

A general focus allows you to keep your map on topic. I cannot tell you how many times I have seen a mapper create a map that has too much going on. Too much in too little space is a recipe for a messy map.

If you have a town on the side of a mountain with a graveyard, a sanctuary and a lake... you have too much going on to fit it into a single map. You can break it down further than that and provide more of a focus on your map(s). SO perhaps you have a town on the side of a mountain with a Sanctuary built into the cliffs, and inside that Sanctuary there is an entrance to a graveyard and the lake is inside of the mountain, or on top of the mountain etc.

If your focus is too big, narrow it down and if you have to break it into multiple maps, I encourage you to do it. Not only does it give you more maps and better focus on each of them, it will also really demonstrate your love for your project to your player base.

[css-div="background: none repeat scroll 0% 0% transparent; font-weight: normal; margin-bottom: -10pt; padding: 0pt; border-bottom: 1px solid rgb(170,170,170); font-size: 188%;"]Let's Map![/css-div]

RMXP Preparation

I like to make sure I am prepared to map with some basic steps that help me make sure everything is how I want it to be.

First, lets open up a new map. If you are in RMXP, also set up a grid the size of your screen (in tiles). My screen is 8 tiles wide and 6 tall. You can set up your grid by going to the Tools menu in RMXP and selecting Options...

Applying the concept of space, let's establish a map size. I generally try to give my maps a full screen around the borders. This lets me keep the player from seeing where the map stops in game making it feel endless. I want to build in a 16x12 open space, so my map is going to be 32x24


Creating Space

Now is a good time to set up our space. As stated earlier, I use the outer 'screens', which is the extra space around the map, as negative space to fill in with trees. This prevents the player from ever seeing the actual edge of the map.

On layer 1, fill in some grass.

On layer 2, fill in the outer 'screens' with some tree bases. We are going to avoid using water or mountain edges for now. The primary reason is because we are creating space, starting with positive space.


We now have our primary positive space and negative space designated. From here we wan begin to start working with it in a little more detail, by utilizing the concepts of space as well as flow. But first, let's clean things up.

On layer 3, add the tops of the trees and any edges on the sides if your tree tiles have them.

If you run into a situation like this :


Go under it a layer with the tile. This is a display of depth and it will also help you avoid tile errors in your finished map.

Our map now has definitive positive as well as negative space. But I like some more dimension than that.

Adding an additional level of space is often done by adding water or mountains. They give an aesthetic feel but also provide additional space for not only mapping, but also developmental points in your game. They allow you to expand. Let's add some water to this map.


It is starting to take shape!

I also want to add some mountains in here somewhere, but this is a pretty tight little map and adding it might really divert us from our primary focus of this little route. But while we are looking at our map, let's go over the grid once again.

Now that it is starting to look like a map, these grid squares give you a little insight to what the player will see in game, without having to actually load up your game. Each of these squares represents a screen, and your character will be in the center of these squares. If you imagine moving that center, you will actually begin to see that the player will never see beyond the edges of our map.

This is particularly useful when you run into situations where you want the player to see detail as well. Moving the screen allows you to see if certain things are too repetitive in game. Ask yourself:

Is the player going to see this detail too much in this map?

If the answer is yes then keep that in mind, and work on it later. For now, let's continue building our map!

Establishing Flow

As we covered earlier, flow is the fluidity and continuity in which your player moves through the map based on space.

We are working with a smaller map here, so flow is not always the easiest thing to establish. Even so, small maps also have flow.

Flow is not established by creating negative space that intersects with positive space. Flow can also be created by using aesthetic tiles that fit into positive space while maintaining positive space. A good example are things like paths.

If you look at our map, you might notice that we actually, inadvertently began creating flow by adding the water. The water provides and entrance to the map, which means there is already the beginnings of a set path for the player's movement.

We can continue this by placing another point of entry or exit to our map as well, but placement is important when there is already established flow. Placing it in an awkward and unnatural spot can make for low quality maps.

Let's look at our options.



Putting an entrance/exit point directly across from the map is bad. Don't do it unless you have something distracting in between, such as negative space the player has to go around to essentially not notice this placement.

The top or bottom are fine as well, creating a kind of right angle sort of map.

In this particular map, I would use the top or the upper left. I am going to use the upper left.


Our map now has some continuity to it. However, it looks a bit square.

If we jump back to our concept of space, we can add negative space or reduce it to create a less square like map. Try to keep this to a minimum. Reducing or adding too much negative space can start to break down map flow and give an unnatural feel to your map.

Here are a few examples.


I personally liked a few aspects of all of them, but I kept the one with the trees in the center of the map and then added an additional tree to the lower left, which helps break up the square corner a bit. I was going to do the same with the top right corner, but that can be filled in with grass or something to distract the player from the square corner.

Here is mine.


We still have flow going around the tree, so everything is looking good.

The Focus and Details

The focus of this map is pretty simple, it is an small outdoor route.

Earlier I said that I was not going to add a mountain, however, there are a lot of trees here and that corner is plum full of them. So I want to add a bit more to kind of spruce up the map a bit.

After a bit of playing around and creating some tile fusions I am happy with the bit of detail added.


Using the grid once again, we can see that the player is going to be able to see a fair amount of this mountain if they venture into the corner of the map, but not all of it. This allows us to give them some visual detail to see outside of just endless trees and it makes for a nice map presentation when you showcase your entire map, regardless of if it is all visible in game or not.

So we have out space, we have our flow and we have our focus. Let's fill in some details starting with the path.


As you might unknowingly sense, these block paths do not look or feel right. They are quite disruptive of the how the map flows and being blocky does not help it feel natural at all. So let's edge out the paths a bit and give it a more rugged and natural feel, as well as clean up and remove what parts of the path do not foster the flow of the map.


It is starting to look like a real map!

Let's add in some grass. Now that we have our flow pretty much established, we can use things like grass to draw the player's attention to the flow so they can understand and navigate the map how we want them to.


Now that our map is pretty much complete, it is time to bring it to life, and everything in it together.

Detail tiles are important, I cannot stress this enough, it took me a long time to figure this out. Detail tiles decrease your work load to a degree. Having a diverse selection allows you to add detail and break through repetitive mapping situations as well as provide a beautiful, clean presentation to viewers and players alike.

Scour all the tiles you can, collect detail tiles from all the public works you can and bring them up to date to match your entire tile set. With these types of tiles, it is very common for them to have completely different styles. Use them anyways, and update them to match your other tiles so they do not stand out.

Here is my map after adding the finishing touches.


[css-div="background: none repeat scroll 0% 0% transparent; font-weight: normal; margin-bottom: -10pt; padding: 0pt; border-bottom: 1px solid rgb(170,170,170); font-size: 188%;"]Reduction to Practice[/css-div]
(Your Community is Here to Help)

Reducing all of this down to practice is a simple way to really summarize everything. The more you work on mapping, the better you become. However, there are a number of things that can help you along the way.

Understanding various ideas, theories and practices can really help you develop your skills efficiently and always remember that you can post your maps in the Map Showcase and Review Thread (http://www.pokecommunity.com/showthread.php?t=280454) for feedback to help you improve your skills.

We are a community, and helping each other is how we all grow.

Until next time,

- Worldslayer

[css-div="background: none repeat scroll 0% 0% transparent; font-weight: normal; margin-bottom: -10pt; padding: 0pt; border-bottom: 1px solid rgb(170,170,170); font-size: 188%;"]More Guides by Worldslayer[/css-div]

So You Want to Make a Game... (http://www.pokecommunity.com/showthread.php?t=269965)
Building your World - Design Styles (http://www.pokecommunity.com/showpost.php?p=7033717&postcount=14)

August 22nd, 2013, 3:22 PM
Awesome, I like this a lot, and it will help me a lot too.
Thanks for sharing this with us : D

August 22nd, 2013, 3:44 PM
Wow, this is very helpful! Even though I feel like I should've known all that, I didn't, so I'm really glad you elaborated on the flow and placement of things. Thanks for sharing!

August 22nd, 2013, 3:49 PM
This is a wonderful guide, thank you so much!

Although I wonder about the shirtless guy. . .I suppose you can never have too much detail, right? ;)

August 22nd, 2013, 4:06 PM
Wow, this is very helpful! Even though I feel like I should've known all that, I didn't, so I'm really glad you elaborated on the flow and placement of things. Thanks for sharing!

I think a lot of the basic concepts people know, and apply unknowingly. I wanted to discuss them because the more aware you are about them, the stronger your maps will be. Not necessarily on the assumption people to not know or understand them. So you probably already knew it... unknowingly :P.

This is a wonderful guide, thank you so much!

Although I wonder about the shirtless guy. . .I suppose you can never have too much detail, right? ;)

Haha that made me laugh. I just added him for kicks, I have been working on OW's for Pillars of Destiny quite a bit lately and this was my most recent, so I threw him in.

Glad everyone seems to like it.

August 27th, 2013, 3:31 PM
I'm still relatively new to mapping, and I often practice using Advanced Map with a Emerald ROM (Some of my OK maps are in my profile). But... where did you get that tile set? What kind of tile set is it? Again, my little world of mapping is restricted to the boring tiles of Gen-3, and I would really like to try using the tiles you used. Other than that, great tutorial. It sure will come in handy in the future :)

If you could answer, I would be extremely grateful. Thanks!

August 27th, 2013, 7:38 PM
It is a custom compiled tileset from various public, private and semi-private tiles from around the community.

This is also an RMXP tileset, just a heads up. This is Game Dev, not ROM Hacking.

August 28th, 2013, 7:28 AM
Ok. I'll have to start using RMXP then. Thanks!

August 28th, 2013, 9:00 PM
Not a bad tutorial at all. Very good should help alot of beginners. I love how you go into detail.