[-Graphics-] Parallax Mapping Techniques, Part 2 Difficulty: Moderate, Mildly Difficult
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
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
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.
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.
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.
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.
Walking behind objects and minor edits - finishing the map!
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!
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.
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
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.
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.
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.
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
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
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!
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!
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.
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.
@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.
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.
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
Thats me as a Sprite.
Darkness rising: file got corrupted
Working on a new project, wich im yet to name.
Wich FF character am i?
Lol i have no idea who that is ( he looks like a fag (jk)
@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.
Dripping ruby rain Leaking from a crystal heart hanging among the trees
A heart of bright gold Corroded em'rald green Pierced with icy lance
A light in the dark Embraced by the coldest depths Refused hope's last wish
Moon in the morning -- A sil'vry cresent of light On an orange canvas
With a pen in hand I can raise nations from dust Or tear it to ash
Never clsoe your mind Free your imagination Unleash your true dreams
A single picture A moment in time held still Always to be seen
There, an apple sits Dark red, the color of blood Crying once bitten
Skies of baby blue In the infinite beyond Always out of reach
A plastic device Warmed by my aching fingers Texting to my friends
A bright ray of light Breaking through the clouds above Upon a trash heap
Rain falls from on high Crashing to the ground, it drops Music to my ears
A pink pen, why's that? I ponder this and answer A pink pen, why not?
To be who I am Is to disagree with what Others think I am
Throw rocks at the water Watch the ripples that follow Waves that shake the world
Sit in the corner Set your tears free on the world Drown away sorrow
Ice-encrusted hair Blowing with the frozen snow A story to tell
I know there's a lot of them, but its really only a small selection of what I've written ;P Leave a comment on my profile here of the ones you like, or just your general thoughts about my haiku-styled poems!
My rating system for games
1 - Makes-me-wanna-gouge-my-eyes-out bad 2 - My eyes bleed a bit upon viewing it, but in a bad way 3 - I *sigh* at the mundane-ness of it 4 - It was a little better than "okay" 5 - I drooled over the awesomeness that it is!
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.