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

Dymdez

Newbie-in-Chief
Veteran
Joined
Feb 4, 2014
Messages
752
Reaction score
154
First Language
English
Primarily Uses
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? :p ) 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 :p

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 :)
 

Sigmma

Dragon's Fire
Member
Joined
Oct 16, 2015
Messages
17
Reaction score
6
First Language
Portuguese
Hi, Dymdez, 

First, i want to say that your work is awesome!!! Gratz fo this tutorial. I'm a RM MV user, but i'm sure i can use these knowledge!

W8ting for the next part!!!

PS. Sory my bad english!  :D
 

Tigersong

Furry Fellow
Veteran
Joined
Oct 22, 2012
Messages
452
Reaction score
44
First Language
English
Primarily Uses
Great tutorial, but I have one complaint. You never told us we'd have to figure out how to apply the clone tool to the whole image! Gimp isn't much help; it just gives you a tooltip saying "Shift for straight lines". It would be good, too, if you'd tell us the name of that first tileset.
 

Dymdez

Newbie-in-Chief
Veteran
Joined
Feb 4, 2014
Messages
752
Reaction score
154
First Language
English
Primarily Uses
Great tutorial, but I have one complaint. You never told us we'd have to figure out how to apply the clone tool to the whole image! Gimp isn't much help; it just gives you a tooltip saying "Shift for straight lines". It would be good, too, if you'd tell us the name of that first tileset.


Hi. There's a lot of tutorials for the clone tool online, definitely better and more in depth than anything I've mentioned here.  The idea is just to use it for patterns to make design easier.  You just click the Clone tool, select the pattern (and size and opacity) and you use it.  What did I miss specifically? Again, check out other tutorials.


Regarding the name of the tileset, these are by far the most well known tilesets for VxAce, Celianna's tilesets, available on her website and plenty others (although she prohibits reposting, you can find them elsewhere.)  The ground patterns can be made from any tileset, they're abundantly available.  The idea is this:


1. Get a base color and fill the map


2. Get a base texture graohic (like grass and dirt and some rocks) and add that on top


3. Use the burn/dodge tool to add slight discoloration so everything doesn't look uniform


4. Add actual texture with the bump map.
 

NightHerald

little demon child
Veteran
Joined
Aug 20, 2016
Messages
42
Reaction score
39
First Language
English
Primarily Uses
This was very useful. Thank you for posting it :)
 

Marquise*

Veteran
Veteran
Joined
Jul 9, 2014
Messages
4,931
Reaction score
8,242
First Language
French-Canadian
I think I wanna save this as .pdf now... for one of those days I will stop doing giant animated sprites and can land my spaceships project somehow!

^^

PS: I think there is a 3 images missing in the middle of your tutorial... o_O Unless my computer decided again to be a pest on me!
 

Dymdez

Newbie-in-Chief
Veteran
Joined
Feb 4, 2014
Messages
752
Reaction score
154
First Language
English
Primarily Uses
I should post an updated one seeing as my skills have drastically improved since I made this.

Not a bad idea for a rainy day!
 

Aryn

Veteran
Veteran
Joined
Jun 24, 2017
Messages
33
Reaction score
10
First Language
English
Primarily Uses
RMMV
I should post an updated one seeing as my skills have drastically improved since I made this.

Not a bad idea for a rainy day!
I'd like to second this, since I was let down not to find a second part to this. So far this tutorial has taken me further than any other, but there is a lot I want to understand as I fumble my way through parallax. If you do another tutorial, could I suggest you perhaps include water? In particular, I haven't been able to figure out how people (if they do) integrate ships/boats, since there's no simple way of marking ship/boat passing, except maybe editing the A1 autotile, which I'm reluctant to try.
 

Dymdez

Newbie-in-Chief
Veteran
Joined
Feb 4, 2014
Messages
752
Reaction score
154
First Language
English
Primarily Uses
I had no idea there was any interest in this still. I can happily do it. Do you want a video or the same format as this?
 

Aryn

Veteran
Veteran
Joined
Jun 24, 2017
Messages
33
Reaction score
10
First Language
English
Primarily Uses
RMMV
I'm late to the Ace game, I guess, so I don't know how many other people are interested, but I've been eking what I can out of the few good parallax mapping tutorials I could find. Once I discovered what it could look like, I just couldn't confine myself to tiles. I find video easier to follow, as long as the person is clear what buttons they're pushing. But I didn't have any trouble following this version either. Thank you for considering returning to this!!
 

Marquise*

Veteran
Veteran
Joined
Jul 9, 2014
Messages
4,931
Reaction score
8,242
First Language
French-Canadian
I would but save it just in case! ;)
 

Aryn

Veteran
Veteran
Joined
Jun 24, 2017
Messages
33
Reaction score
10
First Language
English
Primarily Uses
RMMV
Yeah, ditto. It could be hard to make a live session, but I'd try.
 

Users Who Are Viewing This Thread (Users: 0, Guests: 1)

Latest Threads

Latest Posts

Latest Profile Posts

I made some sideview closets for MV!
You can find them in my MV resource thread.
People1.png & SF_People1.png added!!!!

Adventurer:
"Why your body looks like a bird?"

Stranger:
"Because I'm harpy"

Adventurer:
"Clap along if you feel like a room without a roof"

*Both dancing to Pharrell Williams song*
Stream will be live shortly with a make-up session of the Interactive Text Adventure! Feel free to drop by!

Forum statistics

Threads
105,507
Messages
1,014,276
Members
137,178
Latest member
negociant
Top