Parallax Mapping & Custom Maps for Beginners (Step by Step Walkthrough)

[Dymdez 77]

NOTE: This tutorial is TWO part. The second part will be posted soon. The first part is a step by step (literally) tutorial for generating a parallax map with GIMP and the second part will be learning how to use Yami's Overlay Script to use our new creation. This is a tutorial for beginners and I will go through the entire process with PAINSTAKING detail.

Please notify me of any errors! I will make an advanced tutorial after I finish this one.

PART 1: Parallax Mapping for Beginners.

Step 1: Laying our foundation

OK, let's click NEW and make a decent sized map, let's do 640x480.



Let's right click the "Background" layer and delete it, then right click and New Layer and let's make a transparent layer. We should be here.



Now we need some resources. As I'm truthfully unsure of the rules of secondary distribution, I will provide primary links when possible for any resources used here. We all need to be on the same playing field, but be mindful that you should be learning the principles of map development here, the resources are really not the crucial part as you will soon find that you can even use the RTP to make really staggering maps. At the end of the tutorial I will give a short talk regarding everything you need to know about for resources. So -- the first step for making our map is going to be deciding what type of map we want to make.

I will happily take requests for ANY type of map in the future (I prefer medieval themed). For this tutorial, we will make a autumn-themed rural area with a house. I choose this because it will give us a decent opportunity to see a bunch of various tricks.

The second step we need is our foundation, a base that we can build off of.
Ok - Let's get our hands on Celianna's A2 tileset, it should look like this. (I can't find it on Celianna's website, and the alternate link isn't working, it can be found HERE: http://hunter-maker.forosactivos.net/t670-tilesets-increibles) I will replace this link once I can find a proper one. If this link is removed, just google it, it's there.



Please be mindful of our layers on the right. If a layer is ABOVE on the list, it will take precedence over and layers below. Click the little "eye" symbol to close the view on that layer. We have a handful of tools on the left here, they look like this. Do not be intimidated by this, once you get the hang of it, you'll do all of this mindlessly.

Ok, let's take a look at three tools right off the bat, our SELECTION TOOLS. 1) Rectangular Selection, 2) Ellipse Selection, and 3) Free Selection. In my experience, only worry about the 1) and 3) and forget about 2). These tools will allow us to make a selection. They look like this:



Selections are extremely important because they allow us to chop up images and only make alterations to certain parts, etc. They are crucial.

Now take a look at this tool, the Clone Tool. Another crucial tool.



This one will allow us to take a PATTERN and use that pattern. What's a pattern? It's simple: we take a selection (rememeber those? ) and turn our selections into patterns to draw with. In other words, we can take a selection of grass, and then turn our whole screen into grass. We can do the same for dirt, and some rocks, etc... This is how we build our base. Let's build our base, shall we?

Take the following selection of Celi's A2 tilset.



Right click (or shortcut) Edit > Copy then Right Click > Edit > Paste As > NEW PATTERN

A window will pop up (might take a second) and let's name our first pattern "Light Grass." There's a couple things we need to do, but first let's go up top to the toolbar where you see "File, Edit, Select, View, Image...etc" and click "Select" and click "None." It's important to de-select your selections. Forgetting to do so will cause some frustrating issues. Now let's click our recent friend, the Clone Tool. Then click the Tool Tab, pictured here:



The tool tab will give you the relevant tool information for whichever tool you have selected. The important ones below are "Opacity" "Size" "Hard Edge" and most importantly, "Pattern." Pictured here:



Briefly, opacity will control how much of magnitude is behind whatever you are drawing.

If you have a low opacity, you won't be able to see it very well. Well, why would we do that? Take a look at 100 opacity grass vs. 50 opacity.

Sometimes, we just don't want the full image. Sometimes we do. Is it a light trail? Is it the deep forest? Context matters And we will be able to make the same image bend to our needs once we learn the tricks of the trade

OK where were we? Right. Size will control how large your drawing size is (be mindful of the brush box which controls how we draw, which shapes, etc..). Hard Edge will eliminate opacity and always use 100% opacity if it is checked off. And lastly let's click "Pattern" and select the grass we just highlighted, Light Grass! Now let's just select Hard Edge, put the size @ 250, change the brush to the first one "Pixel." Now let's draw on the whole map and fill it with grass. Be mindful of whatever layer you're using (you should be using the new layer we made above!) Take a look:



Very nice! Alright, now click that funny "eye" symbol next to our first layer and let's go back to Celi's A2 tileset. Remember what we did above to make a new pattern? We are going to do that again for the dark green grass and the dirt. Make a pattern out of the following two selected graphics, name them respectively Heavy Grass and Dirt:



Make sure, after your two new patterns are added, to go to Select > None. Let's go back to our first layer. (click the eye to make it appear) and make sure that layer is highlighted. Any changes to the map will only occur on the highlighted layer, so be mindful of which layer is highlighted. I can't tell you how many times I've done TONS of work on an invisible layer only look up and wonder where all my work went. Terrible.

Alright, let's go back to the clone tool, and this time uncheck Hard Edge and let's bring our opacity to 50 and select Heavy Grass. Again, let's add it all over the map. Should look like this!



Only click down once, if you click again, it will be more opaque than the previous click! OK time to give our map a little bit of character! Select our dirt pattern, go to opacity 15 and lets grab that Acrylic 05 brush and fill the whole map up. Should look like this:



We are almost done with our base. Let's learn about another tool, the Dodge/Burn tool. It looks like this:



This tool is extremely important and it is very versatile. When you get confident to make maps on your own, you will realize that this can be used for so much. Dodging means you make the colors LIGHT and burning means you make the colors DARK. It's great for giving the effect of sun shining on one side of an object, dark on the other side. If you have SHADOWS selected, it will affect the darkest colors (black) more than the other colors.

If you have midtones, it will affect (you guessed it!) colors in the middle of the darkest and brightest, and highlights will be the brightest colors. Let's select this tool and, im not joking, randomly burn and dodge on our map. Control + Z = undo if you want to take back any changes. Just swirl it about, make the grass look original. This is what I got!



We have just finished our base. Now we have a base and it is OURS. ITS OURS. There are no RTP graphics for grass that look like this. There are probably no other maps in the world that look exactly look your base does. Let's compare what we have to the RTP. Don't laugh





Right? Is this even a joke? The difference is enormous. And it's so subtle. And it's so EASY. That takes.. maybe.. 2 minutes to do TOPS. Alright, but our map looks awfully barren. We need.. More.. Let's grab our Clone Tool and select Dirt but this time we are going to do 50 opacity. Keep our brush on the Acrylic but let's reduce the size to 70.

Now let's draw a path. You don't need to copy me exactly, but maybe it would be best to do it similar just for our current purposes. I got this:



Alright, great. Now let's do some magic. Right click in the layers box and "New Layer" and name this one "BUMP." Highlight our BUMP layer and select the tool with the icon of the paint bucket tipping. Now Select the foreground color square and lets change the HTML notation to "808080" which is grey. Confused? Take a look:



Once we have grey foreground color selected, just click anywhere in the screen. The bucket fill tool will fill the entire screen (or current selection, remember those?) with the color chosen. We chose grey for a reason. I won't explain now. Your screen should be entirely grey. But its okay! We didn't lose any work. We just need to re-order our layers! Drag the BUMP layer under our first layer. All should be restored! Now what do we do with the bump layer? Click the pen tool, select our Acrylic 05 tool, go to 75 opacity and 70 size for the tool. Make sure the color is now black (html code = 000000). And now, this might be confusing, but just trust me, we are going to select the BUMP layer (even though we cant see it), and we are going to trace our path with the black pen onto the bump map. Weird. The Bump layer should look like this now. But why?



Let's make sure we have the first layer (not the bump layer) selected and now let's go up to Filters > Map > Bump Map. You should be here.



At the top, where it says "bump map" select our bump layer. Let's put our depth at 2. Feel free to mess with the controls, but I'm going to leave the other options alone for now and hit OK with 2 depth. VOILA! We have a beaten path! Look at that. Three textures have done SO MUCH work for us!



Looking good, but it just looks so empty. Let's grab some beautiful resources. Go to: http://pixanna.nl/materials/celiannas-tileset/ and find tileB(1). Drag it into our program and let's get to adding details! Please be mindful of Celianna's distribution policy. You can use her graphics if you credit her with a non-commercial game. For a commercial license, you must contact her. Always be mindful of the licensing requirements for all artists whose material you use! It's the rules.

OK Remember our selection tool friends? Let's select a beautiful tree. (I erased some stuff around it to get a nice, clean selection.) Copy and paste and right click our floating selection in the layer box and click "To New Layer."



Ok click the "eye" symbol to get rid of the TileB(1) layer and let's zoom out a bit. Take a look at the move tool, it looks like intersecting arrows. Click it and then under it click "move the active layer." Now lets right click our tree layer and "duplicate layer."

Make a bunch and let's scatter them! WAIT. We can't just scatter them, dummies, we need to make sure where they are placed, are in positions that are not awkward for the player. (we should have done this when we made our trail, oops). It's okay. Go to Image > Configure Grid, and type in 32x32 under 'Spacing' and click OK. Then go to View > Show Grid. Take a look.



This is displaying how the player will move from tile to tile -- where the player will go. We need to make sure we aren't causing weird awkward positioning for the player. Now, let's place some trees! To illustrate what I mean by placing the trees perfectly, take a look at these placements, the red is where we will assign that the player cannot walk in the program. Of course, this is all up to you, and there are lots of work arounds, but let's stick with the basics for now.



Ok. We need more detail! Get your resources and ADD THEM! I'm going to this link: http://pixanna.nl/materials/celiannas-parallax-tiles/exterior-tiles/ and grabbing the second of the medieval houses. I really like these two in particular.



Well, I like the building on the left, but I wish it looked a bit more worn down. Right click that building layer on the map and go to Colors > Hue/Saturation and let's do -10 for each option there. Let's look at our house now.



Cool cool cool. I like the barn on the right, but not the building. Hmm.. Go to our selection tool and let's just highlight the barn and Control + X (cut) or right click Edit > Cut.



And lets paste that to a new layer and get rid of the rest of it. Let's place our buildings somewhere nice. Notice that I place the house door DIRECTLY in front of a tile so the player can seamlessly trigger an event on the door. But I don't do the same for the barn because (unless you have the capabilities) we don't have any obvious interaction with the entrance of the barn like we do with the house.



Shouldn't there be a path between the two? Select our first layer and let's add a path.

You remember how! If not, scroll up! Remember that our path here should be a bit lighter, so maybe only 40 opacity on our black bump layer trail. My path came out a little too dark for my liking, so I dodged it a bit. Here's what I got!



We are missing the most important part to any map. ...DETAILS! Find some fine resources and add some flowers, dirt, rocks, smaller trees, a well, more grass, big stones, and always keep in mind that you can add event details too, like a fluttering butterfly and some birds, etc. Here's what I got!



Jeez. There's so much more to learn! But this is a great start. And there's also so much more to add! A farmer chopping wood, leaves fluttering through the air, it's all so accessible. Sound effects, too, birds chirping, wind on its way to somewhere.

Feel free to send me or post your maps that you made while following along, I would love to see them. The next part of this tutorial will be how to get your map into your game seamlessly! How do we make sure the parts of the tree that are supposed to be over the player go there? What about the parts that aren't? It seems daunting, but it's all very easy, I assure you.

Until then, fellow traveler