Announcement

[Luneth]

Welcome to my first tutorial guys! I hope that I can help you guys with the way I make maps.
Now, on to the requirements (Yes, I know x_x Requirements suck)

You will need:
The Editor (Duh)
Graphics program such as Gimp or Photoshop
Resources you wish to map with
OriginalWij's Fixed Picture Script http://www.rpgmakervx.net/index.php?showtopic=23402
Imagination!

Step 1: Getting the Blank Template of the map into the graphics project.
(If you wish, you can map out the general layout in the Editor. Skip to Step 1b if you wish to do this.)
You can do both of these methods in Photoshop.
Anyway, there are 2 good ways of doing this:

FOR GIMP USERS

Spoiler:

If you're using Gimp, well, then it's a little harder. Take the Map's Height times 32, and enter that number into the Height in Gimp.
Same process for the Width respectively. This can be done easily with a calculator. If you wish to have a blank template, then this is where
you stop. If you want a general layout for Gimp to have, then use either Option 1 or Option 2. Whichever works best for you

Option 1.)
Create a new map in your project.

Spoiler:

Put in all the attributes that you want. Just remember that the bigger the map the more the hassle it is for parallaxing.
Okay, next we need to look and see if the map that we made fits inside the editor, like so.
(Big image guys)

Spoiler:

As you can see my map fits in the editor in a 1/1 view, so I can get the map template the easy way.
If your's does not, then your method will take a bit longer.

For maps that fit inside the 1/1 view:
Press the Alt and Printscreen button to take a screenshot of your entire monitor's view.
Afterwards all you have to do is paste the image into the graphic program and cut out just the map itself.
Make sure you aren't even a pixel off! It will throw the entire map off balance!
Now paste the map you have cut out into a new document, and delete the transparency squares, so we have a blank template to work with.

Of course, if you're using Photoshop, you can just copy just the map itself and make a new document. Photoshop gets the size of the copied item by itself.

Spoiler:

For maps that do not fit inside the 1/1 view:
Here is the 'fun' way of doing parallax mapping. The easiest way to do this is use this script.
http://www.rpgmakervx.net/index.php?showto...mp;#entry260629
Omegas7's script really saves you time when doing this. Follow the instructions on his thread, and you will end up with a .png image of your map.
I myself just make a HUGE image for the script to save to, then cut out my map when it's done. Much easier than calculating the size.
Cut your map out of the new .png and paste it into a new document. Cut out the transparency squares, and you have a blank template to work with.

Step1b: For maps that have a layout before hand.
Now, for those of you that mapped out the general layout of the map before making it an image, it is still generally the same idea. For maps that fit inside the 1/1 view, just Alt Printscreen it and follow those instructions. For maps that don't fit, use Omegas7's script, and just don't delete the map when you have a new image with
the map dimensions that you want.

Option 2.)Take each of your map dimensions (Width and Height) and take them times 32. This will give you the number of pixels the map is. Then just create a
new document in a graphics program and enter the dimensions in the right places, and you're done.
(I don't like doing this, because it's math for one thing, and another thing is that it's just tedious.)

Step 2:
(If you made a layout of the map before you made it into an image, you can skip this step unless you want to jazz up the ground/left some stuff out.)

Begin with your ground. Open up your image that contains the ground you wish to use, and copy and paste it, like this.

Spoiler:

Until it is full up like this

Spoiler:

Now that that's done, merge all the pasted layers into one. Call this layer 'Ground' or something you can recognize so you realize it is the bottom layer.
After that, it's time to make some fancy stuff
If you want to have a path going through your forest, or darkened ground or grass, then you can make it look pretty nice. Go copy the the additional tiles (i.e. grass, decayed land, path, etc.) and just select it in the middle of the bottom half of the image like so!

Spoiler:

I know the rectangular marquee is hard to see, but it's the dotted lines in the middle...
Now, copy the selection, and put it into a new document.

Spoiler:

After that, go to Edit > Define Pattern and name it whatever you want. (i.e. "grass" for grass, "path" for path, etc.)
Then click the OK button.
Now, for all you photoshop newbies out there, what we just did was create a new pattern, but you guys probably gathered that much.
Now, do this for all the ground tiles that you wish to use in your map, and go back to your map image.
Create separate layers for each different ground tile. Now, I recommend that you do this order for the layer from bottom to top.
Basic Ground, Dark Ground, Grass, Path.

Spoiler:

FOR GIMP USERS

Spoiler:

Your method is a bit different. Follow Step 2 until Edit>Define Pattern. For Gimp users, you must select whatever you wish to be the pattern
with your marquee. You must copy this selection for it to show up in the patterns! After that, go to Windows > Dockable Dialogues > Patterns.

Spoiler:

After that, choose your Paint Bucket, and make sure that Pattern Fill is checked under Fill Type.
After that, you can fill your pattern into the ground.
The layout of Gimp and Photoshop are quite comparable, so you are able to do layers just like that of Photoshop

And select an airbrush. I myself always go with a bigger one, since it has more fade to it.
Make sure that a color that stands out is selected, and begin to paint wherever you wish for the Dark Ground to be (Or any other ground tile).

Spoiler:

I used a 100 size airbrush for this. Don't flip an omelet, it's supposed to be like this.
Next, double click the layer that is currently selected. (If the name highlights, click off the layer, then try again)
This menu should come up.

Spoiler:

Now, click on Pattern Overlay, and click the little arrow by the image, and select the ground tile you are looking for.

Spoiler:

Now that black catastrophe is a airbrushed dark ground! Do this for the on the above layers, and replace the dark ground with the pattern you want.

You should end up with something like this...

Spoiler:

FOR GIMP USERS

Spoiler:

Now, remember how I said you had to select the area you wish to become a pattern and copy it? Well, select darker grass, path, grass, etc and copy them. Go to your map, and choose a Circle brush tool. Mark wherever you want the selected pattern to be. After that, choose the Paint Bucket and fill it. After that, choose the
Eraser tool, and choose the Fuzzy Circle (19) brush, and scale it to about 6-7. Now, the fun part. Do you see those really hard looking lines around your pattern?
Well, you have to take the eraser and trace it around so the hard edges are obscure. Since it's like an airbrush eraser, you can make it fade in or out. In this way,
it is both more tedious, but you have MUCH more control of what you're doing than with my Photoshop method. Rinse and repeat until your desired effects are achieved.

That wasn't too hard
Now, this is COMPLETELY OPTIONAL, but you can add water if you wish. I would do it at this point right now. There are some pretty good water tutorials out there,
like ak47lol's, and plenty of others, so pick your method! I'm not going to include water in this map though.

Step 3:

Now comes the details. Oh, the details! These things are going to steal much time from your life
To start with, the first thing you should do is trees. Why? Because we want our players to see even the small details, not just trees. If we paste the trees first, we can make sure our small stuff like plants or rocks can be seen, and not covered up.
Pick and choose the tree you wish to use, our site has dozens of them. I'll use... Celianna's trees because they kick ass .
Open up the image with the trees you want, and begin going to work on pasting them onto the map. Be sure to have a general path or direction the player must go, so
you don't make an impassible forest path.
Also, notice I said trees. Using one type of tree in a forest area with no variation makes it boring. Even a simple hue change or a slight edit, maybe even a small shadow change, something to change it up, so the players' eyes are drawn to different parts of the map.
And, a simple forewarning...

Spoiler:

This. This is a map breaking error unless you keep it out of sight. The player's eyes will be drawn immediately to that error because it is
so different from the rest. I say map breaking because once you save the finished product as a .png, there is no way to fix that without excessive cutting and pasting and erasing and all other fubar things to get it right again. Just a forewarning
Now, you will want to go from top to bottom when pasting the trees into the map, so you don't have to mess with the layers.
Now, here's what I came up with after making the border trees.

Spoiler:

Alright! The trees are set, so now we can merge them into one layer! But, before you do this! Make a group in the layers toolbar and copy ALL the tree layers into it, so in case you screw up you will have a backup. You can do this easily by moving all the existing tree layers to the group folder, merging them all, selecting and copying them all, undue so they are separate again, and paste the merged trees above the group. Minimize the group and click the eye next to it to hide all of the un-merged trees.

Now we can start with the small details. My motto is big to little when doing this, so hills/huge rocks should be put in first. Do what you will with this, get creative!
The limit is only what your mind cannot imagine. Now, with the smaller details, you will want to pay special heed to the 32X32 grid in RPGVX, because if you do
this wrong then it will create a very awkward looking map.
I suggest turning the gridlines on.
To set this up, go to Edit > Preferences > Guides Grid & Slices

Spoiler:

Then, set up the pop up Preferences window like mine.

Spoiler:

Finally, after that, select this option and tick the Show Grids option.

Spoiler:

FOR GIMP USERS

Spoiler:

Now, to make a grid, go to Edit > Preferences, then go to Default Grid. Set both Spacing areas to 32, then click okay.
After that, go to View > Show Grid, and then you got your grid

Now that you know how to turn the Grids on, you can toggle them on and off while you paste the details into the map.
You should end up with something like this...

Spoiler:

Now that all the details are in place, do the same thing with them as I had you do with the trees, for safe keeping.
Aaaand here comes another optional part, it's something that I came up with while I was writing this tutorial!
Have you ever noticed how the rtp fallen log is completely small? Like, impossibly so. So! I decided to
edit one of Celianna's trees and make it a fallen log! Like so...

Spoiler:

What's the reason? Well, it's to demonstrate unique attributes of a map, which we will get into right now!

Step 4:
Now we get to the actual saving and mechanics of getting this map to work. First off, make any last minute changes to the map.
Mac tiles don't really go with Cel's trees in my opinion, so I just changed the Bottom Layer of ground to Cel's ground.
(If you want you can just color the bottom layer black and then pattern overlay it, like I did)

Spoiler:

And finally, add any shadows that you want to be under the players' feet.

Spoiler:

FOR GIMP USERS
To do shadows, select Circle Fuzzy (19) and set the brush opacity to around 30%, and you'll have a shadow brush

Like so.
Finally, save the map to someplace you can find. MAKE SURE TO KEEP THE PSD. You will want it if you spot an error in the map.
Now, the hardest part of the whole process... The overlay effect.
Make sure you have saved it as a psd before you do this. Merge all the small details layers together (if you haven't already), leaving the trees and special details on another layer for each. To begin with, hide all the layers except the tree layer. Go to Select > Color Range. After the window pops up, click part of the brown or the color that the tree trunk/bark is. After, go to Select > Similar until the tree trunks are selected. Do not delete branches in the leafy part of the tree!
Delete the parts of the tree that cannot be walked on. When that is done, hide the tree layer, then go to the small details layer, and turn the grid on. Figure where impassible objects would stop the player from moving, and where things would overlap the camera behind the player. Delete all impassible tiles. Remember, our Engine is a top down engine, so that means that it has a very slight angle, so keep that in mind. Delete all the details that the player can walk over as well, so they don't appear on top of them, such as leaves or small patches of grass. Use your head, many of the things that are passible in many of our games really shouldn't be, if you
think about it. We usually can't walk through a thick bush without some difficulty. Anyway, after the small details layer is done, hide it and if you have a special layer then unhide that. You have to know what you're doing with this layer, with what to delete and what not too. Anything that you plan on being displayed over the character.
After all that, your overlay is done.
Now, save the image with "[FIXED]" at the beginning, without the quotes though.

FOR GIMP USERS
To select the colors for the tree trunks, just use the Color Selector tool, and click the color you want to select, and then you can delete it! BE CAREFUL, you'll want to use an eraser to delete the colors you want to.

Here's what I came up with.

Spoiler:

Now, some of you are thinking "Why are the trees around the borders different?" This is because if you want any birds flying overhead, they don't fly under a tree stump. When birds are flying close to the ground, they fly between the beginning of the leafy part of the tree to the end of it, so the bush of the tree would still obscure them, but the trunk of the tree would not.

After all that, it's time to import it into the editor! Almost done
Import the Map itself into the Parallax folder, and import the [FIXED] picture into the pictures folder.
Go back to that blank map we started with and set it's parallax with the map, and tick the Show in Editor option in the Map properties.
After that, pick the most obvious tile and trace it over every single space you want to be passible, like this.

Spoiler:

Then take a blank tile with the passibility on it ticked to true (When it has a O instead of a star or an X) and select the paint bucket. Then fill all the obvious tiles in with
the passible tile.

Now, for the Eventing part.

Spoiler:

You don't HAVE to make the tint screen and the tint picture, but if you tint screen, you ought to tint the picture too.

And, here is the finished result guys!



If any of you have questions, then PM me and I'll try my best to answer them!
Thanks for reading my topic and I hope this helps you all with your mapping! Until next time

This post has been edited by Luneth: Jan 20 2012, 10:02 PM

[ryguy60]

Very nice tutorial! I was always wondering how to get the forest floor to mix like that. Thanks alot!

[Titanhex]

Amazing tutorial! I have already bookmarked this and have no doubt I'll be using it.

[Luneth]

Thank you both! I'm glad that it's helping some people out

[Faalhaasje]

Great tutorial. there have been several like this one, but this has attention to detail and photoshop settings. good job!

[Luneth]

Yeah, that's why I was so reluctant to post this... But, as long as it helps someone, I'll be glad I did
And, thanks Faal, glad you liked it!

[Luchino-chan]

This is a very informative tutorial you have here, Luneth. Certainly one of the better ones I've seen here with regards to parallax mapping techniques. The only gripe I have against it is that it can make for a rather large game file size if all the maps are to be parallaxed. Oh, and not to mention the patience required. That is a must.

But great job anyway.

[Luneth]

Thank you Luchino! And yes, file size is quite inflate a game file to HUGE proportions if you don't handle other files on your game right(I am mega guilty on this )
And yeah, the patience part does suck. I went for about 2 months without making a new map because of so many redo's and fixups I kept doing, but it paid off
Thanks for stopping by, glad you liked it ^^

[Nightmar]

OOOO Thank you so very much. I might be able finally get my forests to look right now = ) thank you tomorrow I'll let you see what I come up with.

BUT what about items that are above your character or pictures you want to appear in front of your character like say.... a desk or like a counter an say you walk into a shop an it has flags how will you do that with parallax mapping?

Would you use Tile sets for this?

This post has been edited by Nightmar: Jan 24 2012, 02:18 AM

[Luneth]

OOOO Thank you so very much. I might be able finally get my forests to look right now = ) thank you tomorrow I'll let you see what I come up with.

BUT what about items that are above your character or pictures you want to appear in front of your character like say.... a desk or like a counter an say you walk into a shop an it has flags how will you do that with parallax mapping?

Would you use Tile sets for this?

That is one way you could do it, the other is just use a picture for it like we did for the trees. I usually do that, because the only thing I use my tilesets for now is small details I forgot to put in, or details that should be interactive (Through Events).
Anyway, look under Step 4, overlay objects are covered there.
Thanks for reading, and sorry if I wasn't clear on that.
Happy RMing!

This post has been edited by Luneth: Jan 24 2012, 05:00 PM

[The JJ]

Great tutorial, I thought I knew about all that I needed to know about parallax mapping before this tutorial but I guess not, I did learn a thing or too like the pattern overlay.

[Nightmar]

That is one way you could do it, the other is just use a picture for it like we did for the trees. I usually do that, because the only thing I use my tilesets for now is small details I forgot to put in, or details that should be interactive (Through Events).
Anyway, look under Step 4, overlay objects are covered there.
Thanks for reading, and sorry if I wasn't clear on that.
Happy RMing!

NO that is quit alright. And thank you for the reply as the tutorial was very helpful =^-^=.

[Luneth]

Thanks Nightmar I'm glad I could be of help!
And thanks for stopping by JJ!

[Nightmar]

And your welcome. Hmmmmm do you know any good animated parallaxing script like say for water?

This post has been edited by Nightmar: Jan 29 2012, 01:36 PM

[OBubblesO]

Honestly, i needed to post a reply here.

AWESOME tutorial, im a parallax mapper but there are so many techs i didn't knew how to do, thanks for posting this.

Good luck and keep doing those awesome tutorials.

[Luneth]

@Nightmar
Sorry for the late reply! The best (and only) animated water tutorial that I of is ak47lol's tutorial.
You can find it here: http://www.rpgmakervx.net/index.php?showtopic=48327
He uses modern algerbra's script to animate the parallax. I myself find this one to be my favorite one.
I personally use the method he teaches there, because it has the nicest effects. There are other ways, but his is by far the quickest and easiest.

@OBubblesO
Thank you! I'm glad I was able to help, and I should be able to complete another tutorial on towns in the next week!

This post has been edited by Luneth: Feb 9 2012, 10:18 PM

[jaydee15]

@Luneth:
Your tutorial has helped me a lot in improving my maps. I really thank you for it. Kudos!

[Luneth]

Hooly crap this is a late reply 0_0 I apologize. I'm glad that it helped you, and thank you for reading!

[Project667]

And theres me scratching my behind wondering how people create such amazing maps.

Very informative tutorial Luneth, easy to read and follow. Going to have to start making all my maps like this! Worth the extra time.

Kudos

Now the fun begins starting from scratch...

[Luneth]

Thank you for reading! I hope that this can be a great help to you