Game Creation > Tutorials

Meiscool's Guide To Parallax Mapping

(1/1)

Meiscool:
Hello all. This is my contest entry for MIContest 4. Even though it is dead, I wanted to make something for it anyways. Link: http://www.charas-project.net/forum/index.php?topic=28681.0

Now that I weaseled that bit above into the topic, we can move on to the good stuff: Parallax Mapping!

First: What is Parallax Mapping? Basically, it is using a background as the map, and forgoing the use of tiled mapping. Movement and Eventing may still be tiled depending on the game making program used, but your graphics are not! Parallax mapping is especially useful for maps where having graphics be tiled can create a huge limitation. An example of a map where Parallax mapping would be beneficial is a shop. Using parallax mapping allows the addition of more items/objects/plates/armors/swords/muffins/cups/etc to be placed on tables/shelves/racks/etc than tiled mapping with fixed graphics would. It allows perfect positioning of desired things, as well as shading/shadowing/outlining that traditional tiled mapping does not.

In this tutorial, I will create a parallax map for my own game. For the example here, I will be using the program RPG Maker 2003. As an additional note I would like to clear up now, please do not take the graphics I post here as an example and use them in your own projects, as they are edited from the originals specifically for my own project. If you want to know where I ripped them from, I will tell you so that you can get the original graphics for your own needs!

1) Start by making a tiled map. You DO NOT need to detail this map, just use regular tiles to create the shape of the map you desire. When you are done making the map, take a screenshot of it. Make sure the dimensions of the screenshot taken are the same as the dimensions of one screen of the game. For RM2003, those dimensions are 320x240 pixels. Mine ended up looking like this:

At this point, it really doesn't matter how good the map looks, because you can fix it all later! Save your image and move on to the next step.

2) Open your map in an image editing program. I used photoshop since the layers feature it has is extremely helpful for this, but many other programs (including even MS Paint) are acceptable.

3) Compile some graphics that you want to use on your map. You should have these available already either on the chipset you used or elsewhere. Anyways, some of the graphics I ended up using for this map include:



4) Use the graphics you have and the tools in your editing program to finish your map. I do this in multiple stages, and I'll show them to you in order so that you have a better idea of what's goin on.
      4.1) First, I want to lay down my treeline. By placing trees around the outside of the map and covering as much brown as possible I get a more forest like feel.

Personally, I'm not entirely pleased with how that looks. Doesn't give the feel of a deep forest and doesn't cover all the brown. Using the tools of my program, I changed the remaining outer brown to a dark green. After that, I shade the outer treeline with the same dark green to give it a more fading look.

      4.2) Next, I want to add some shadows to the floor. I'm not going to pretend to be good at making shadows, but parallax mapping allows shadows so easily it is hard to pass it up! Just take a tool and darken areas you want to look like they are in the shade/shadows.

For this map, I made shadows at the top and bottom exits, as well as on the right side along the trees. Some of the shadows might be hard to notice, but will be easier to see once you add more stuff to the map.
      4.3) All that is left is the simplest, but probably most time consuming part. Adding your objects to the map. Since you are not restricted by tiles or amount of graphics per tile, you can add what you want, where you want! Simply copy a graphic you are using for your game and take out the background color. Do it as much as needed until you have everything you want on the image. For me, I like to fill up all space that I know my character cannot walk. I also try not to use the same graphic more than twice on a map. When I do, I reflect the image of the graphic so that it looks like a different graphic was used, neato! With all my objects added to the image, here is what it turned out looking like:


5) So, that's all good, you've got your background. However, some of that stuff shouldn't be background at all! In fact, it should appear ABOVE your character. Well, thankfully that can be done too. If you were using any kind of program with layers, just take out the layers that should appear below your character. You may have to make minor adjustments to some of the layers to ensure that it looks right, but those are variable to each map hence I can't really show one. Once I took out my 'ground' layers, I was left with this image of my 'above' layers:

In RM2003, you can set this image as a picture and have it be above the map. Since the dimensions of the map here are 320x240 and the picture file has the same height and width, setting the picture to 160x 120y will center it. If you have a bigger/smaller image or a bigger map, you will need to change the values so that the picture lays correctly.
In other programs, you can simply assign a Z value or priority value to the image to make the image show above the map, all pending on what you are working with.

6) The next step is creating the in-game map. Even though this is a parallax map, you still have to assign what can and cannot be walked on. This can be done through scripts, tiling, etc. The easiest way is through tiles for RM2003, so that is what I will show.

This is what the map looks like with a blank chipset. For parallax maps, you will want your chipset to be blank if possible. This is because you can still assign terrain values and pass/cannot pass values to the tiles of the blank chipset, while still allowing it to show the background entirely. All the black boxes are events that each map of mine has. The events circled in red are variable events based on the map you are on, and I will get to those at a later time.
What I do here, is get a 'stock' chipset I have that I know has a blank tile on it somewhere. I set the whole map to that blank tile. From that point, I use other tiles on that chipset to fill in places that I do not what my hero to walk. For my game personally, I also have tiles that I do not want flying enemies to walk, or for my daggers to fly through. I also have tiles that I want to have do certain visual things. I assign each of these tiles a different terrain value and pass value as needed.
After filling in the map with the appropriate tiles, I get this:

The black/blue area is what can be walked on. The brown area is what cannot be walked on by the hero. The green rug tile is what daggers and flying foes cannot move on, and the yellow rug is for event visual purposes, and also cannot be walked on. Now that I have the map properly tiled, I can switch it back to the blank chipset. Make sure the blank chipset has the same values as the stock chipset used for passing and terrain.

7) After making the necessary events to show the overlaying picture and whatnot, I get my finished, in game map:
[/URL]

TBC) Remember those circled events above? Well, they are visual effects for my map, and they really add to it. Though it doesn't have much to do with parallax mapping per say, they are still a part of mapping, so I will go over them here. However, that will be in another post. In the mean time, here is a VERY sloppy and quickly made video of what four events in the corner do, as well as how the map turned out overall:
http://youtu.be/p7UV7UVpQYM
The video demonstrates the events, tile collision, and the purpose of creating multiple tiles that cannot be passed by the hero but can be passed by other things. In case you cannot see, the four tiles in the corner are falling leafs! Watch again for them if you didn't notice the first time.



That's the end of the tutorial for the moment. If you have any questions, ask. I'm willing to offer advise and help as needed.

Moosetroop11:
Nice tutorial. You've also mastered the game designer's skill of hiding advertising within educational content which is nice to see : p

Prpl_Mage:
Wow this is really helpful! Some of these things just never occurred to me.

Bluhman:
Cool thing about something like this? If you know how to set it up, you could likely also do it with Blender and make FF7-like backgrounds.

What I know it would entail:

* Make a mockup model map inside blender. For convenience, you could also set up a temporary box model that determines what scale the entire thing should be in.
* Set up the render as an orthographic projection image in the proper dimensions - minimum 320 by 240 resolution, and make sure it's got a resolution with a multiple of 16. Orthographic projection (also known colloquially as isometric view) will project the model without simulating FOV depth - basically, 2 identical size walls will appear the same height, regardless of whether one is closer to the viewport than the other. This is what most RPGMaker Tileset maps tend to look like; though walls towards the bottom of the screen are theoretically 'closer' to the player, they don't look any taller.
* Line up the camera (and the mockup model) in such a way that the model maps into something at least resembling tiles.
* If your model has foreground elements, take separate snapshots of the stage with only background and foreground elements included. If you're feeling ambitious, you can modify the foreground to scroll faster with a larger image. Positioning of the foreground would then be done by an event that repositions the foreground layer/picture, depending on camera position.

Navigation

[0] Message Index