Announcement

[C-7]

[-Graphics-] Parallax Mapping Techniques, Part 2
Difficulty: Moderate, Mildly Difficult

By: C7

It is assumed that you are familiar with the techniques from the first parallax tutorial of mine. It can be found here

Now there's a unique charm to tiles and they can be visually attractive. In general, though, they're limited in what they can pull off. Since they're square-based, it can be difficult to make anything curved or even angular. A solution to this would be to use a parallax, which can be completely unique at all times. It can be quite difficult to create maps from scratch, though, and many people are quite good with tiles and would like to make them a little more unique. This section of the tutorial will teach some effective ways to modify a tiled map (doctoring) to make it stand out.

Doctored Tile Maps
Sizing

Spoiler:

The first step would be to get the map into an image-editing program. The first thing to do is to make your image file. If you refer to your map in rpgmaker, you should be able to see the dimensions of your map in tiles. Multiply each of these numbers by 32 to get the pixel size of your map. For instance, an 18x21 map would be 576x672.

Getting your map into your image editor

Spoiler:

The easiest way to get it into your program that I'm aware of would be to make sure your rpgmakervx program is open to your map and the window is maximized. Be sure you're not in event view--you don't need the grid across your map. A higher desktop resolution can make this easier for you, by the way. Press alt+Print Screen (the button is at the top-right-ish part of your keyboard) to take a screenshot of the window. Now, in your image editing program, paste it either via Edit>Paste or press ctrl+v. You may need to repeat this a few times and piece it together to get the entirety of the map.

 full01.jpg ( 1.06MB ) Number of downloads: 1387

Editing the map -- removing the blockiness

Spoiler:

The first thing that I like to do at this point is eliminate some of the blockiness inherent in tiles. For this map, I decided that the houses were fine, but the blocky pathways and cliffs were unacceptable. I still wanted to keep the essence of the map--I'm not trying to hide that it was originally tiles. I'm just trying to make them look better. I used the clone stamp tool in photoshop with a blurred brush to modify the dirt path and grass borders. I distorted and skewed and just played around with the cliffs to make them look less blocky and more irregular.

 img01.jpg ( 1.03MB ) Number of downloads: 1702

Lighting and Shadowing

Spoiler:

The next important step for me is the lighting and shadowing. Each of the rooftops got just an omni light placed on them. My lighting source for this is sort of the left side of the map. I just wanted something subtle--people will notice. At this point, because I didn't do it when making the tiled map, I used the clone stamp tool (and the marquee selector tool so I could be lazy!) to remove the shadows from the autotiles. This was because I wanted to create my own shadowing.

I used the polygon lasso tool to block out where I wanted my shadows to go, filled them in with black, and applied some blurring and a little motion blur in the direction of the shadowing to make it look like it was casting across the ground. When doing this part, be sure to pay special attention to the shadows being cast on objects at different levels, etc. It is important to do lots of details on their own separate layers for flexibility later. I lowered the opacity of the shadows a bit and voila!

Next, I added some shadows from the clouds on another layer and blurred them. These should be subtle so that they're not distracting. I also added some yellow, faded lighting on another layer coming from the left side to drive home the look of the sun.

 img02.jpg ( 966.52K ) Number of downloads: 1527

The Grass (and water)

Spoiler:

The grass is the next area of attention. This part can take some real effort, but it is entirely worth it. The grass in this sample map is made up of three layers to make it have more depth. Each is made up of grass of different hues. Photoshop has a grass brush, so I used that to cover everything. Small grass is important for a lived-in area. I used layering styles to include a really subtle bevel and drop shadow on each of the layers of grass. This gives a bit of depth and helps it to not look too flat. One more subtle thing I did to make the beveling add detail instead of detract was to use the eraser tool, using the same grass brush, and breaking things up on each of the layers. And since the grass hues are mostly derived from the grass tiles in VX, it was okay if you could see through in a few spots. Lastly, I applied omni lighting effects on each of the layers (each differently) in different sections of the map to create variance. I went ahead and made some water refractions on two different layers as well.

 img03.jpg ( 1.03MB ) Number of downloads: 1573

Walking behind objects and minor edits - finishing the map!

Spoiler:

After this, I made a few detail changes. For instance, I moved the barrels beside the large building a little bit so they overlapped a little. I also made copies of the tops of the houses and cliffs to insert on the layer that will go over the player so that they will now be able to pass behind them (there's ground there and, in perspective, you should be able to pass behind these parts). I painted on some dirt and a crack here or there on the walls and maybe touched up a place or two. The map's all done!

 full02.jpg ( 968.76K ) Number of downloads: 1891

Inserting the parallax

Spoiler:

Now it should be inserted the same way you would any parallax--remember, it must be the same size as the map or it will scroll differently. Apply the second layer as a characterset as shown in the first tutorial and set your passability with invisible squares (also shown in the previous tutorial).

Final
And there you have a doctored tile map! It retains the functionality and charm of a tile map while adding the graphical flair and eye candy of a parallax map. This method ensures that your map will also line up perfectly with the player in gameplay. Enjoy!


Animated Parallaxes
Important
This is a great technique that can add tons of depth and life to your maps. This example will use the map we just created in the last portion of the tutorial. We're going to start with something simple to begin with. But to do any of this, you'll need to download modern algebra's animated parallax script, which can be found here. The directions are simple to use and contained in the script. The files I'll teach you how to make in this will be compatible with his script.

For this map, I'd like to have the grass blowing in the wind and have the specular highlights of the water moving around a little. These are surprisingly easy to accomplish. For the purposes of this demonstration, I chose to have four frames of animation that loop smoothly. This is a minimal amount of work that will make a massive difference.

Starting out

Spoiler:

The first frame of animation is done. Congratulations! Now, we need some movement. I want the wind to come from the left in this map so movement should be moving from left to right. Remember how we made the grass on three different layers? Now they can move at different rates to really sell the effect. Basically, I nudged the main layer one pixel to the right, another layer diagonally one pixel, and the other layer (which has the smallest amount of grass) two pixels to the right. I also nudged the two layers of water effects in different directions. One was nudged down, the other right. One of them was nudged two pixels, the other was nudged 3 or 4. That's plenty of movement for this one frame. Go ahead and save this file as your second frame.

Naming the files

Spoiler:

Now let's talk a moment about frame naming. You should name them in this format: mapname_1.png, mapname_2.png, mapname_3.png, etc. This is how the script is set up to read your files. When you insert the parallax, be sure to pick the first of your maps as the background because it will cycle from that number upwards. Be sure to activate the animation and find a good rate of frame change for your map and put them in the script's editable region towards the top. You may need to test a few times to find a good rate of change to make it look natural. Also remember how big your map is and be aware of any processing hit this may cause.

Continuing

Spoiler:

We need a third frame now. For the grass and water movement, I just repeated the nudging I did last time around. Its quite simple and will definitely look okay. I saved this as the third frame. Since this is a type of animation that would just go back and forth, I duplicated the second frame and named it the fourth. This way, it will go from the first to the third frame and smoothly back to the first. Insert these into your parallax folder in your game's root folder and be sure to set your map up in the animation script. That's all there is to it. Test your game to make sure it looks alright.

Notes

Spoiler:

This technique can be used to create all sorts of effects such as a moving engine room, a flowing river, or pretty much anything you want. It's also a great way to make more abstract maps as well with flowing, swirly stuff in the background or whatever you can imagine. Just remember that with any animation, movement from one frame to the next should be pretty minimal to make things move smoothly and naturally.

Motion Blur
This is a quick and easy way to make your map's animation even smoother! While moving the grass, it would be more ideal to move some of the grass half of a pixel at a time--which is no small feat. But since things are in motion, we can estimate and get it looking pretty close.

Renaming

Spoiler:

You need to make space in your filenames for the extra frame you'll be adding in. Your original frames will now be given odd numbers and your new frames will fill in the even numbers. Since we had four frames before, our new map names will be map_1.png, map_3.png, map_5.png, and map_7.png to ensure no mistakes. We'll be making frames 2, 4, 6, and 8.

Making the in-between frame

Spoiler:

This is an extremely simple method that goes a long way. The first thing you need to do is open your first frame. I recommend now saving it as map_2.png or whatever so that you don't make any mistakes. You need to have an editing program that allows for opacity changes and layering (photoshop, etc). Now open up your formerly-second (now your third) frame. Select and copy the whole thing on top of the other so that it is a second layer on top of it. Lower the opacity of this frame to 50%. Save your file as map_2.png and, if you're worried or paranoid, close out all of the frames. You now have the first three frames! Repeat this step inbetween frames 3 and 5 to make the fourth frame. Be sure to read the next part.

Saving time - Filename chart

Spoiler:

Since this animation is going back and forth the whole time, we can reuse these two frames that we just made. Since currently, frames 3 and 7 are identical, the transitions between them and frame 5 should be the same as well. This means that you should copy you second and fourth frames and rename them as your sixth and eighth frames respectively. See the diagram to make sure you did it right. Now you have the full animation with some motion blurring to smooth things out!

Adjusting framerate

Spoiler:

If you had the animation in the script changing frames every 20 frames (three times per second), we now need to make it change twice as fast to keep the same animation speed but make it smoother. As such, the frame changes need to occur every 10 frames (six time per second). Make that simple change and check your map out--test it--to make sure things look right and that this framerate increase has not screwed the performance of your game. It shouldn't, but it could with a large map at a fast speed.

Conclusion
I showed you a few ways to greatly improve the look of your maps. Be sure to download the demo and try it out! The demo is open source as well so that you can see how any of it is done and grab any necessary scripting. I hope you enjoy this and I hope, like the previous tutorial, to see people trying out some of this stuff!

The demo can be found here: Download the demo here (20MB)

This post has been edited by C-7: Sep 13 2009, 03:33 AM

Attached File(s)

 chart.png ( 49.51K ) Number of downloads: 967

 

[Etheral]

This is amazing. Only problem I see with this is that the file size of the game ends up being too large this way. But it's definitely still amazing.

[C-7]

This is amazing. Only problem I see with this is that the file size of the game ends up being too large this way. But it's definitely still amazing.

It does increase the file size a lot, but the parallax folder in this case includes I believe 12 high-resolution parallaxes. I have the full 8-frame animation (quite large images) as well as the 4 frames necessary for the animated parallax without the motion blur. I left those 4 in for anyone who wanted to try it out and see the difference.

Thank you very much for your compliments, though!

[Yuri !!]

wooww.. this is nice very nice
i like ur style

[Fina]

Great tutorial and demo, but one question though.

Why doesn't your demo lag to kingdom come with a parallax map so large?

I'm using parallaxes for the insides of houses and shops to make them more diverse, but there is a tiny bit of lag on the map that didn't exist before using the parallax. In the shops I have a shopkeeper event and some NPCs walking around to talk to...but no more than 5 in a single shop.

Yet you can feel the lag.

I really wanted to create parallax maps for my first town, but decided to see how it worked in a small house at first. I noticed the lag on a small map and thought it was be impossible on a larger one, but your map is several times the size of my shops and I noticed no lag at all.
I am even using a script to help reduce lag.

I want to use more parallaxes, but it lags >_<

[C-7]

@Fina: I'm really not sure. The more CPU-heavy stuff is, the more likely lag is in games but I have plenty of events on that map and its changing parallaxes every 9 frames I think--that's pretty quick for a full-map change. Perhaps you have a lot of scripts running in your game that are getting in the way? That demo is pretty bare-bones as far as scripts go, but a non-animated parallax map of most sizes should be pretty manageable. Did you have some parallel processes running on your test map that could've been making things chug? That's all I could guess--scripts or parallel events clogging up your cpu. Let me know if you find a solution.

[Fina]

No parallel processes on the indoor maps.
But I do have a lot of scripts in my game. I didn't realize that having more scripts would cause this problem. I even have several scripts that I have not even used yet.
Perhaps I should go through the list of ones I have and remove some of the ones I don't really need.
Thanks.

[Stef-san]

this tutorial is rly amazing
thanks for your work on it. I will try it later on and say my opinion about it and try it one time by myself

[Runefreak]

This is very nice C-7, hope to see more from you.

[Tamar]

Spectacular! I may try a hand-drawn game with this... I could even do maps in watercolors and scan them. O-O Opens up a world of possibilities.

Just one thing... on the animated maps section, where you say you'll need a particular script, "which can be found here"... I'm not seeing a link to anything ^^; Is it just me?

[terry1387]

Hey, im using photoshop cs-3 and my problem is:

I do what the tut tells me to, i take the size of my map wich is 25x25
i do the 25 times 32 thing and i get the answer 800x800, so i created a new file with that size.
Here comes the problem. When i paste it into Photoshop i only get a part of the map. I suppose thats because
the maplist the tilesets and eveything is included in the screenshot too.
Not only the map... Is there any way to quickly only take a picture of the map?

( i'm terrible at explaining )

Edit: ahh, just had to paste it into paint.net first and choose the map
with the box-ish-copy tool.

This post has been edited by terry1387: Sep 12 2009, 11:15 AM

[C-7]

@Tamar: Oops! Nice catch. The link is edited now to go to here http://rmrk.net/index.php/topic,29866.0.html (off-site link). Sorry 'bout that! And I hope you do try a hand-drawn game!

@terry1387: Alternately, you could paste it into your new document and then use the move tool (the top-right one with the black arrow thing) to move the map over and line it up with your document. But glad you found a way that works for you!


Also, thanks Stef-san, Runefreak, and whoever else.

[Robocroakie]

God, this is freaking awesome.

But, honestly, the water in the demo... ehh.

I'm trying to think of a way to fix it, like how there's two parallax layers... if underneath the 2nd layer, you redo the outer water tiles, excluding the shore, so that it has motion as well?

Just a thought.

[Gingercake]

Downloading the demo now to check it out. Either way, from what I can see here, amazing stuff! Showing us more and more that we can do with parallaxes .

[C-7]

God, this is freaking awesome.

But, honestly, the water in the demo... ehh.

I'm trying to think of a way to fix it, like how there's two parallax layers... if underneath the 2nd layer, you redo the outer water tiles, excluding the shore, so that it has motion as well?

Just a thought.

Mr. Anonymous has written a script for me to use water tiles beneath the parallax to fix that issue. Even better, though, in my own game I just made all of the water from scratch and it looks really nice.


EDIT - for robo, here's a shot (sort of) of it.


This post has been edited by C-7: Sep 13 2009, 09:45 PM

[Robocroakie]

Oh, awesome. Wanna show us a screenshot?

[chibigoten23]

Thanks, this helps a lot, great tutorial, and first part too.
Keep up the good work.

[HanzouMasta]

Umm... what's the idea of making the water "cloudy"...? O_o
Great tutorial by the way... It's really something worth learning.

[kamekh]

Fantastic tutorial. Maps can now contain pretty much whatever you would want. Thanks so much for this.