Announcement

[C-7]

[-Graphics-] Parallax Mapping Techniques
Difficulty: Moderate

By: C7


Information to know

Spoiler:

RPGMaker VX has the capability to see parallax maps in the editor while you're working. They're typically used as backgrounds behind tiles (think a moving sky or something like that behind the mountain crest you just made with tiles). So the first thing we need to do is define what a parallax is. As far as the program is concerned--and as far as you should be concerned--parallax means “image.�

So, what are we trying to do here? We're trying to make our game look unique and give it our own style. If you decide that tiles are not the way to go for your game, then this is where to turn.

Things to keep in mind:

Spoiler:

NEGATIVES
Parallaxes take more work and time.
Parallaxes are more finicky.
It's harder to make a parallax map work.

POSITIVES
Many more possibilities.
You can create some truly unique, gorgeous, or cool-looking maps.

Okay, we'll start with something fairly simple and move our way upwards.

The first thing you need is a plan.

Spoiler:

Remember that RMVX is based on 32x32 grids. You need to plan things out so that the player’s movement is the most important part of it all. Remember, it’s a game. It has to work. This does limit you somewhat, but I like to think of it as a creative challenge.

Once you are used to all of this, you can skip this stage, but this is a good place to start. Draw out the walking path in the rpg maker window to give yourself a good estimate on how you want things to work. For my game, things are made with a 32x48 character in mind--the default is 32x32. Therefore, my maps will be a little bit taller than what you may wish to do, but the idea remains. After you’ve done this, printscreen copy it and paste it into your image editor. I use photoshop, but you can use whatever you want. If your program supports it, I recommend turning on grids. In photoshop, the place to change the grid size is in the edit menu under preferences. Set the grid to 32 pixels.


[note: the 1/2 setting is chosen for ease of viewing, but you will want 1/1 for the parallax to line up correctly] You may need to splice stuff together or just do it from scratch.

CRUCIAL: Here's a good time to explain how parallaxes really work in the game.

Spoiler:

You have a lot of options with parallaxes, but if you want it to function as a background then it must be the exact same pixel size as the map you're working with. There's an easy way to figure this out. Figure out your map size--it's at the bottom of the screen and in the map properties window of RMVX. In the case of this map, it's 23x36 tiles across. Each tile is 32x32 pixels, so you can get the pixel amount by multiplying the number of tiles in each direction by 32. That gives you (23*32) and (36*32) to give you a grand total of 736x1152 pixels for your image. If your parallax is not this size, it will scroll at a different rate than the 'world.'

The drawing

Spoiler:

Draw your floor. It should roughly line up with your grid, but I'd recommend having a little freedom from the grid and use the grid to know where the player can step. 16 pixels above works quite well so that the player can actually walk up to a wall instead of stopping a few paces short of it. Play around and see what you can make!


You'll notice that there are different bits of stuff at some of the corners of the floor. These are either mistakes that no one will ever see :-P or they're preventing a gap

Once you've done that, its time for walls. Keep in mind at this point that the perspective that you draw the walls in (or the rest of the map) needs to be consistent with the RTP-styled sprites unless you'll be doing your own sprite work. A good 3D perspective is always nice, but it will require more work.

In the case of many of my maps--and this is a personal preference--I have the center of perspective in the middle of the map so that the angles of the walls progressively aim further out from the middle. This obviously would be a bit much on large-scale maps where you might opt for a more uniform style, but it gives a nice look to smaller maps.


Once you've got your walls, its time to add details and whatever else you want in the map! Your imagination and ability to reproduce what's in your head are your only limitations at this point. I've opted for something a bit spassr in this case.



Now you've got a (hopefully) good start to a parallax map!

CRUCIAL: Passability

Spoiler:

This step is what makes your parallax into more than just a pretty picture. The easiest way to do this is to set aside two tiles in one of your tilesets. I chose TilesetE. Go to tools>resource manager and then under the Graphics/system folder you should find TileE. Export this as a png somewhere, clear out the first two (or any two) tile slots and re-import it into RpgMaker. You now need to set one of the blank spots as passable and the other as not. It should look something like this.


Now just use the one with the O for tiles that the player can walk on and X for the boundaries/where the player cannot step.

Right click on your map in the map list window and choose this new parallax as the background and be sure to check “Show in Editor� so you can see what you're doing. You could stop right here if you wanted--and in many cases you may as well. This next part, though, is working with a second layer to create more depth. You can have multiple layers of parallaxes. There is just a necessary workaround to achieve it.

The second layer

NOTICE: The method for creating a second layer described in this tutorial is outdated and obsolete. TheOriginalWij's Fixed Image Script is a better alternative which you should use instead. That said, I'll be leaving the text of this section in case it remains useful for someone. Wij's script can be found here:

Click to see code

Spoiler:

CODE

#==============================================================================
# Sprite_Picture
#==============================================================================

class Sprite_Picture < Sprite
#--------------------------------------------------------------------------
# Update (Overwrite)
#--------------------------------------------------------------------------
def update
super
if @picture_name != @picture.name
@picture_name = @picture.name
if @picture_name != ""
self.bitmap = Cache.picture(@picture_name)
end
end
if @picture_name == ""
self.visible = false
else
fixed = @picture_name.include?("[FIXED]") ? true : false
self.visible = true
if @picture.origin == 0
self.ox = 0
self.oy = 0
else
self.ox = self.bitmap.width / 2
self.oy = self.bitmap.height / 2
end
self.x = @picture.x
self.y = @picture.y
# added
self.x += (self.ox - ($game_map.display_x / 8)) if fixed
self.y += (self.oy - ($game_map.display_y / 8)) if fixed
self.z = 100 + @picture.number
self.zoom_x = @picture.zoom_x / 100.0
self.zoom_y = @picture.zoom_y / 100.0
self.opacity = @picture.opacity
self.blend_type = @picture.blend_type
self.angle = @picture.angle
self.tone = @picture.tone
end
end
end

Thanks to Celianna for bringing this to my attention.

Spoiler:

We'll continue with the same map so you can see the difference. Before we get started, I've got a planter (like a plant in a pot) already pre-made and it will be called in as a character event.

So speaking of which, that's how it's done. A second layer is added by way of a character event with the graphic set to your second layer. But lets not get too far ahead--we need a second layer, first!



Something simple--some lighting and shadowing. I've added lighting in the map as one would imagine might be coming from the see-through ceiling that we're peering through. This is a similar effect to what one might get with a lighting script, but more accurate to your map and with the possibility of making the lights not pour over into the black abyss. If you're aiming for making a two-or-more-layered map, I think it's a good idea to make your tops of your walls their own layer independent of your walls. The player will never go over these in normal use, so it can save you a lot of time for things such as the player walking a little bit behind walls that overlap him/her. It creates a better flow.

I turned off all layers except those that will be on top. As you test, you may discover that you missed a spot or an oddity occurs. There's nothing wrong with making a little more stuff to hide the player from awkwardly sticking out where they shouldn't. The player walking through a solid object is a nice way to ruin the effect--try to keep things seamless.


Beautiful. Now to insert this second layer, one must make it part of a character set. Now if you think about how characters are laid out, they are 4 ‘units' high and 3 ‘units' across. Your second layer must follow this pattern. So make a new image that complies with these new dimensions. Ie, multiply the horizontal by 3 and the vertical by 4. Yes, it's huge. 2208x4608. Copy your second layer into this new file and place it at the upper left. It may help to have grids on or to make a block the size of your original image for placement. Just be sure to get rid of it when you're done.

Now you need to save the file. It should be placed in the graphics/characters folder of your local game directory. You should save your file as a png (it preserves transparency), with $ and possibly ! before the filename. The $ makes this count as a single character set instead of a bunch of them. RMVX will slide characters up 4 pixels by default. The ! symbol will get rid of this. The ! is up to you, but ideally your filename will look like “!$second.png� or something like that.

Now it must be inserted into the map. This is done by placing an event at the bottom and middle of the map screen in RMVX.


Edit the event and choose the graphic for it from the list. Uncheck stepping animation--unless you made different frames of animation--and make sure that its priority is set to be above the player. That's about all you need.

Testing

Spoiler:

Test the map. It's very likely that the second layer may be a few pixels (or WAY) off in its alignment with the background. Make whatever adjustments you need to make to the file in your image-editor (bump the image around a few pixels) and test again until it looks right. Having an element be in both of the background and foreground images should help you line things up exactly. Now add in anything you want event-wise. This could also mean custom objects that you've made can be place in the map using the same method, but perhaps choosing for their priority to be under or the same as the player. Test the map.


I have a character outline subbed in as a character sprite for this instance, but, as you can see, the lighting and shadowing (and whatever other elements you make) are cast on top of the player instead of under their feet. It makes a big difference and really helps the immersion factor.

There are some things you should try to remember. This is much more resource intensive than tile-based stuff. It has a ton of potential, however, and can make your game look quite unique. My next tutorial will be using animated parallaxes in combination with other animated layers. I hope you enjoy! Please leave comments and feedback.

Here is a demo in .zip format for you to try out. It is open source, but please make your own resources instead of using mine. There is no "up" walking animation on that character--deal with it

Now that you're familiar with these techniques, why not check out part two!?

This post has been edited by C-7: Oct 10 2010, 02:50 AM

Attached File(s)

 ParallaxTutorial.zip ( 6.02MB ) Number of downloads: 870

 

[Lunara]

This is an excellent tutorial. I bet a lot of people were already quite curious as to how to do it, and might try it out for themselves, despite the long hours it might take them (and me xD). The steps are well explained. Maybe I'll try doing that myself one day.

[Sander]

Quite impressive C7, and a very nice tutorial.
I love parallax mapping but don't have the patience for it.

[Getdizzy]

I think the use of a sprite as a second parallax is actually pretty good "thinking outside the box" genius.

[mudducky]

A very amazing tutorial C-7. Thanks for making it, I think many will find this extremely useful. I am looking forward to see what new parallax designs others will be creating now xPP

[Aindra]

Thanks a lot, C-7

This is informative tutorial. I'll try to create the background and charactersets, to see how it goes. Just for an experiment. Again, thanks!

[Omegas7]

This is a pretty and excellent tutorial.

Too bad I am not really good at photoshop... Why don't you make a tutorial teaching us how to make that kind of maps images with photoshop? Would be awesome with this tutorial, indeed.

Thanks for it .

[C-7]

This is a pretty and excellent tutorial.

Too bad I am not really good at photoshop... Why don't you make a tutorial teaching us how to make that kind of maps images with photoshop? Would be awesome with this tutorial, indeed.

Thanks for it .

Hmm, I suppose I could. I gave the overall plan within photoshop, but I suppose I could show the art side of it, too. It'll have to wait until after the tutorial I'm working on now (animated parallaxes and other advanced crap), but that's a great suggestion!

And thank you to everybody for the comments so far. Be sure to try out the demo--there's an extra, more complex map in there that should help people out a lot with model work!

[The Professor]

Hey C-7
Have you noticed significant lag when you do this? That's the only thing holding me back..
But then I reason that the tiles are pictures too, so it probably shouldn't lag.
But the tiles are tiny.. the Parallax picture is huge.. But only a part of it is going to be displayed..

Still, I want your input on this. How many maps have you done like this? Does the biggest image you have lag?

[Atlas]

wow im so using some of these

[temp]

Hey C-7
Have you noticed significant lag when you do this? That's the only thing holding me back..
But then I reason that the tiles are pictures too, so it probably shouldn't lag.
But the tiles are tiny.. the Parallax picture is huge.. But only a part of it is going to be displayed..

Still, I want your input on this. How many maps have you done like this? Does the biggest image you have lag?

Thank you very much for the tutorial on how to do this, C-7.

I've only recently discovered this rpg maker program and while VX was obviously more attractive to me since I have no programming skill at all, I was slightly concerned at first about VX's capabilities (due to the tileset limitation and battle view etc). However, you've provided some solutions here which are really fantastic.

I would also like your input on the "resource" heavy issue (that Dr. Phill refers to), if you would be so kind as to elaborate.

Much appreciated.

[C-7]

I'm glad people are finding this useful! Be sure to try out the attached demo thing. In answer to the resources question, rmvx will run a little more resource-heavy than normal like this, especially with multiple layers, but not terrible. Events and scripts will kill it faster than parallaxes. I think the highest ram usage I've seen in windows task manager so far is in the 120 to 130MB range, which is pretty fair, I think. I've made 23 maps like this so far and haven't had any lag issues on the multiple computers that I've tested it on, but admittedly none of them were particularly weak computers. I could see some screen-tearing or brief jumps from time to time being possible, but I don't see this as much more resource-intensive than tiles so far, but I've not tried anything massive yet.

My largest maps so far have been (in tiles) 40x40, 35x50, and 40x28. The 40x40 is in the attached example demo and has quite a bit going on, including multiple large animations, transparencies, two layers (and a hidden ladder to a lower level), and no lag issues to speak of so far on any of my computers. So I would still do some testing on your end to see if you find computer situations that would make these lag, but they seem fine to me so far.

The background image for the 40x40 map is a 1280x1280 PNG and comes to 2.29MB. I also have a second layer on top of the player the same size (technically, the image is 3840x5120, but most of that is blank) and it comes to 573KB. So 3MB and change for the whole thing, plus a few 45KB steam animations spread around to make the whole map. It really is quite manageable, I think.

Let me know if you have any more questions! I hope this continues to be useful to people!

[Guest_zeroplumber_*]

This is a very nice tutorial. Well written with good examples. I think I may look into it after I finish with the modern resources.

[HellRazor]

the second layer is really a good alternative. Very well thinked

[Senapho]

Whoa snap, nice :D!
That map looks so nice, but the door and
wall look a bit off to me :o.
Great job.
- Sen.

This post has been edited by Senapho: Feb 18 2009, 03:10 AM

[Vivere]

Hey. I'm trying to get a map I made to work using this technique, but it isn't working. I've done everything exactly like stated in the tutorial, but my second layer doesn't line up with my map, and when I move my character, the layer moves across the screen with me. What's going on?

[C-7]

Hey. I'm trying to get a map I made to work using this technique, but it isn't working. I've done everything exactly like stated in the tutorial, but my second layer doesn't line up with my map, and when I move my character, the layer moves across the screen with me. What's going on?

I told you in the tutorial that making the second layer align with the first is troublesome and that you'll have to nudge the layer around in your image editing program. You may also need to move the event over a tile or something and then adjust the image (in your image editor, not in rmvx) from there. It works, I promise. You just need to have a little patience and make adjustments to make things work. I like to have something that's in the second layer also be in the bottom layer for alignment purposes. Then I can tell how many pixels I'll need to adjust it. You could also put a temporary grid or something in each image to make sure you have it lined up to the pixel correctly and then remove the grid. You just have to adjust.

Now why the layer would move across the screen with you is something I can't answer for you. I honestly don't know how to do that unless you're setting up the event wrong (I'm confident you are). It sounds to me like you're placing an event that says "show picture" and that is entirely the wrong way to do it. It will then scroll with you because it is part of the screen and not part of the map. You need to place the second layer in a BLANK event and just choose the character graphic on the left side of the event window. (It says "Graphic" and then a box below it)


Beyond that, all I can say is to download the demo. Its working in the demo I provided, try to open it up in rmvx and see what you're doing differently. I'm also going to edit that image into the tutorial just in case.

[Vivere]

Well, the only reason I mentioned it lining up incorrectly is because I thought it could be related to the real problem of it moving around when I move. I can easily adjust it to be on top of everything by moving it in photoshop exactly half a tile over. The real problem is it moving, and no, I didn't add it as a picture. I did exactly what you just said. I can't tell any difference between your demo and what I have done, so I have no clue why it's messed up.

[C-7]

I'd definitely be willing to take a look at your project file for you if you'd like to PM it to me (or a link or something). That's about the best help I can provide because from here, I'm really not sure how things are turning out how they are for you.

[Fei_Fong_Wong]

Problem with the link,cannot download the demo!Fix the link please.