Making Parallax Monkey style (Tutorial)

                                                                                        

Hi everyone,

I have recently taught myself to parallax and after a bit of encouragement I have decided to do a tutorial on the way I make my parallax maps. This I my first tutorial ever so bear with me and let me know what you think ok :D

This tutorial is about the making of a parallax map, focusing on the way I put the map together, It will not show you how to implement  parallax map in your project. I have done the tutorial hoping people who will look at it already know how to implement a parallax map and are looking at tips on how to make them.

If people enjoy and find this tutorial use full, And feel the need a tutorial on it I will quite happily do one on how to implement the maps in to a project using scripts.

Requirements

Photoshop

Patience

Time

And a basic knowledge of Rpg Maker VX Ace

And some awesome resources :D

Credit CELIANNA for the tiles I have used

Ok so this is a in game screen of the map I am going to show you to make. Il go in to detail on what I have done, why and what tips I have learnt along the way :D

So this shot is a forest path I have made in the style my own style :D . The things that I think make my parallax slightly different form others is the water is animated in the editor so there is no need for a script to animate parallax water.

The First Step

The way in which I do my maps is to first make a base . I do that in the editor, and I do that for several reasons.

The first reason is because even though a parallax map allows you to break the grid, it takes a lot of work with scripts and events to get the collisions accurate. So seen as you are restrained by pass ability I find it easier to use the editor.

The second reason is the water placement. So first create a map in the editor, making note of the width and height, and draw out the basic layout of the map.

As you can see in the map there is something odd about the water, Part of it is missing round the edge, That is because in order to get the water to get the parallax map to look smooth and coherent I have edited the A1 file to make the water transparent and removed any edge that was land. It will become clear later on in the tutorial.

Ok so the next step now is to open photoshop and start a new file. This is where the note of the map size comes in. If your map is the default 17 bye 13 like the map in this tutorial the image size will be 32 x 17 and 13. so 540/416 which happens to be the regular game screen size :D

Once the new page is open , go to the edit tab and scroll down to the preferences, Select guides grid and slices and set the grid size to 32. That way the grid will match up to an individual tile from the editor :D

Now take a print screen of the editor and paste it in to photoshop, lining up the map so it fits the new page. Once you have done that the next step is to do some work on the water, first what we need to do it to edit out the funny bit where the edge is.

We do this because we don't want that as part of the finished parallax map, It will be filled in later on in the tutorial.

Now what we need to do is select the water that is left and cop it to a new layer deleting it from the rest of the base layout.

Ok so now we have a base layer with the cliffs and the grass and we also have on a separate layer the water that will show up in the editor. We will only be using this water layer as a guide to where the water will be once we have finished the map and placed it in the editor.

So before we move to the next step their is a few things we need to do.

first I find it use full to create folders for the different aspects of the map. It also makes it easier to create the finished back and overlay later on.

It is down to preference what folders you create, personally I think about what the final layers will show so base and overlay.

The important ones are :

Trees Upper Layer

Trees lower layer

Flowers/base details

Grass/path

Underwater/water edge

The next thing we need to do is create some patters that we will be using to create the path and grass effects.

To do this you open up the A2 tile set in to photoshop, and highlight the middle of the grass auto tile

Once the middle is selected you need to go to the Edit tab. Scroll down to define pattern and select it. Save the pattern as grass.

Now you have a new pattern :D go through the different grasses and paths creating patterns for each so that you can use the in the map and in future maps.

So now we have patterns we need to use them.

First thing first head to your grass/path folder and create a new layer called path/ Select a normal brush of about a 64 size the colour black and draw in the path. Don't worry the path wont stay back lol.

What we do now is to go in to the layer options and overlay the path pattern on the layer. To do that right click on the layer and select blending options. Select the tab pattern overlay in the menu and change the pattern to the one you created of the path

Before you say it yeh I don't have the right layer selected lol the screen shot was more of a method showing shot lol.

So now you should have a nice path base.

Next we need to do the grass, To do this we need to select a few options in the brush tool.

First create a layer above the path called grass, then select a brush of about 130 size and go in to the brush settings. What were doing here is trying to give the grass some authentic look and texture so we are going to select a few options.

First select the airbrush tick box and the texture tick box. If you are using a graphics tablet its use full to select transfer and set it to pen pressure.

So now we have the brush selected , the next thing is to go in to the layer options and again to the pattern overlay and select the grass you wish to paint with. then paint your grass in :D don't be afraid to add more layers with different shades of grass, And its important not to go over the top at first, just put in a basic amount first. Remember you can always keep sketching on the layer later on.

So now we have a decent looking start to a base, now we need to start adding a bit of detail in the form of flowers and rocks and bushes .

So open up a B/C/D/E tile with forest resources and get copying and pasting flowers and other forest stuff in. But so not add and trees yet. for now focus on the other stuff. And of course staying organised helps so stick them in the flower group you made :D

So the basic flowers and what not are now there, bare in mind when you are putting them in what the player can and cannot walk over , If they cant walk on a bush make sure it is within one of the boxes in the grid.

Things are starting to build up now so its time to add the trees.

In the Tree base group we made start copying and pasting trees in. Keep in mind again the areas in what the character can and cannot walk. Also if you want the trees to have flowers or something at their base add them in as well.

Tips : Use a variety of slight colour changes to the trees, not all trees are the same colour, And using different sized trees will make the map look more natural.

So now were starting to have a really good looking map. So lets turn our focus on the water now.

So as the base layer for a parallax will be technically under the editor, it gives us the opportunity to put things in the water. The water tiles were edited in the A1 tile set from earlier so that they were slightly transparent, So when in the editor anything on the parallax base layer will  look as if it is underwater. So lets fill in the funny edge, maybe create some dirt on the bottom and a few rocks and things using the patterns from before.

Also what we can do is create things sticking out of the water. We do this by adding some things on to the map overlay we will create later.

So deselect all the layers accept the base so that you can clearly  see where the edges of the water will be compared to the rest of the map and with out distraction form the other things in the map.

And get creative aha :D

In the screen shot above I have circled some odd looking objects, what I have done here is to place reeds in the water, I have then created a copy of the weeds and saved the on a separate layer. This is so I can get the effect of them sticking out of the water.

Here is the method behind my madness.

On the layer that will be on the base, or under water. I have erased all the parts of the reeds that I want to look like they are poking out of the water. Leaving me with the funny looking objects in the picture.

the copy layer of the reeds what we want to do is erase the bits we want underwater, I found the best way to do this for the top later is to delete most of the bottom then select the blur tool to slightly blurr the bottoms so it looks like they blend in to the water.

I will highlight exactly what I have done for the top layer(Overlay) in a screen later in the tutorial when we go over making the top layer of the trees for the player to walk under :D

So lets do that shall we.

What we do now is make a copy of the tree layer/layers. I find its easier to combine all the tree layers once you are happy with the placements. It also makes it easier for you to duplicate all the trees at once.

So with the duplication of the trees layer in the upper tree group we can make the next move. De select the tree layer in the lower tree group so we only have the one in view. Then we need to erase all the tree trucks where the player will not be walking under. In other words erase anything that the player will not be able to walk over.

It is this layer we should combine with the copy of the reeds, So the top bits we want to stick out of the water.

By doing this in conjunction with the lower layer will give us the effect of the reeds coming out of the water.

So were almost there now. :D

What we do now is select the underwater group, the grass and path, the flowers and the trees and take a look , if your happy congratulations you have just made the base layer or first parallax. Save the file as a png in to the parallax folder of your project.

So the base is done, now we need to make the overlay or top layer. But wait we have already actually don it :D .

So the top of the trees and the reed layer highlighted before in the screen. That right their is the overlay. All that's left is to select just those groups again and save the file in to the pictures folder of your project :D

Well that completes the tutorial. In the screen shot of the finished map there is light and shadow, which if this tutorial actually helps people I will either edit the thread or create a new one where I add the shadows and any light effects as well.

PS: Always make sure you note down where you are getting the resources you use and the people who have made them. CREDIT!! MUST BE MADE to the people who have spend their hard earned time giving us the awesome resources that allow is to make parallax maps.

Thanks everyone

MonkeyInTartan

NICE JOB MONKEY IN TARTAN YOUR MAPS ARE AMAZING AND THANKS FOR MAKING THIS INSPIRATIONAL TUTORIAL!

This gave me new ideas how I will make water in my future maps (which has been a pretty big pain in the ass). And it's nice to see how other people do the parallaxing process. Nice tutorial!

Wow! What a tutorial!

And here I am, making three different frames for a huge animated parallax river...

well I was dying to try out Celiannas parallax water, so there is that, but your method seems way smarter!  Will surely try it out for a new project.

Now how about that lighting tutorial? ;)

Iv been a bit busy at the moment but I was thinking of doing a tutorial on lighting , and possible one on map making in general, sort of a practical way to look at the functionality of a map as well as making it look good. I find lots of people go for the looks rather than spend the time thinking about how the player will be using the environment.

Yeah, especially with Parallax Mapping it is very tempting to fill a map with nothing but clutter to make it look pretty (I'm guilty in that as well), but forgetting that it can be confusing for the actual player, because no clear direction, pathway is visible. Or it actually hinders the sprites or looks weird to navigate (especially if you have additional moving sprites on the map, like monsters, npcs). I try (emphasis on trying) for a map that is a) playable b ) pretty c) memorable. Last point is also important I discovered. Especially if you have a non-linear game. You don't want to confuse the player with maps that all share same features and look kind of the same. If a player backtracks his step, he should immediately go, ah, yeah, I was already here.


I would be happy to see a general map making tutorial by you. :)