Parallax Redux: Parallax Mapping Only When Ya Gotta

Twitter user @Beelzenef wanted to know, is there a way to combine parallax mapping with RPG Maker’s basic tile-mapping system? Of course there is, and in fact, Vidar relies on it heavily! Let’s take a look at one of the maps in Vidar and tease apart where we can use parallax and where to use tilesets. We’re going to use the workshop as our demo.

The workshop, mixing art from Becca Bair and the RTP.

The workshop, mixing art from Becca Bair and the RTP.

Sketch Out Your Map With Tile Mapping

The first step is to plot your map out with just tilesets. It’s going to be gross, and not look exactly right, but that’s ok! We want to hit a few key steps:

  • Add our floor tile
  • Add our walls
  • Start to scope out furniture and decoration

For floors, I stick to my autotiled floors and just draw my big ol’ square.

I'll be honest, I don't know why I took a picture of a lot of floor. But now that I did, I'm putting in this post.

I’ll be honest, I don’t know why I took a picture of a lot of floor. But now that I did, I’m putting in this post.

For walls, Becca Bair has designed some awesome curved walls that hit the ground at a half-height tile. This has a TON of uses – most importantly, when things like bookcases are placed against the wall, it looks like it’s against the wall, not merged into it. However, these aren’t autotile walls like you may be used to in RTP. They’re in my decorative tab, same as if they were a picture or a potted plant:

These walls don't autotile- so they're not in Tab A.

These walls don’t autotile- so they’re not in Tab A.

With these, I can easily plot out the shape of my room, and I can make it less boxy. However, we’re already going to start to notice some issues.

Any time you see that blue checkerboard pattern, you can fix it with parallax mapping.

Any time you see that blue checkerboard pattern, you can fix it with parallax mapping.

See how the top of the back wall doesn’t exactly hit the ceiling tile? See also how the corner at the top right doesn’t join? Don’t worry about it for now! We can fix all of this with parallax. But before we do, we should finish sketching out our room. I have a great work bench from Becca, and I also want to hang some broken clocks on the wall. This is the clockmaker’s room, and we want to show that in the decor. Now here’s where things really start to get sticky:

This is getting out of control.

This is getting out of control.

Because clocks, maps, and desks are all on the same “layer” as the wall, the wall disappears when I place them. Moreover, look at the desk on the back wall – because it’s just slightly two tiles high, I can’t put anymore clocks above it. Finally, I hate the positioning of that map – it’s just way too high on the wall to be of any use, but if I lower it a full tile, it still looks awful. All of this is going to get fixed with parallax touch-ups.

Export Your Parallax

Now that you have a sense of what you’re doing, you can use Hime’s Map Exporter (which I talked about in a Friday Script post ages ago) to get a .png of your map. Open it up in your favorite photo editing software – I use Gimp because it’s free. You’ll also benefit tremendously from setting up some gridelines for a 32×32 grid.

What we want to do is parallax in all of those missing spaces behind our decoration. Using copy and paste, you can easily draw into your image the back walls. We’re also going to make sure our desk is in place so that we can hang some clocks over it. Build as much of the “back” of your map as you’d like. And remember, nothing is set in stone – you can always go back and forth between RPG Maker and Gimp to make sure everything looks just right.

Parallax7

What I’ve done here is copy the back wall across the room, and also on the right side (where the map is). I drew a little bit of extra black up top to bring the ceiling down to the bars directly. I then added the desk against the back wall, and the beams on the right wall behind the map. Finally, I added the map. To do these, all you have to do is copy/paste from your tileset graphics image. There’s nothing fancy happening here. With most items (like the desk) I encourage you to put it exactly where it was when we designed the room with the tileset. That way, you won’t get issues where the player isn’t sure if they can step on it. With the map, or anything hanging on the walls, you can ignore that rule. Instead, align it as you want.

We’re going to do some corrective work as well. On our corner, we need to kind of fudge a graphic that doesn’t exist. It doesn’t need to be perfect (this one isn’t), it just needs to be a corner.

Parallax8

Once you’ve exported your screenshot and loaded it into RPG Maker as a parallax, it’s time to go back to mapping.

Putting It All Together

First, load your parallax and make sure it will be shown in the editor:

Parallax

Almost immediately, you’ll notice a difference. All of those blue spaces are filled in! To do the rest of the work, we just need a little tweaking. On the default Tab A, there is a blank tab which allows you to replace a particular tile with nothingness.

Even if you're using a custom tileset, it's always a good idea to have a blank square to play with.

Even if you’re using a custom tileset, it’s always a good idea to have a blank square to play with.

Think of this as your eraser. As you erase from the “tiles,” what’s in your parallax will appear. It’s like magic!

On the right, the map just using tilesets. On the left, after I've gone over those tiles with the "eraser" tile.

On the right, the map just using tilesets. On the left, after I’ve gone over those tiles with the “eraser” tile.

Once you’ve gone through and the map looks as you want, you’re still not done. Right now, it looks great, but as soon as you launch the game, terrible things will happen. There are two fixes you need:

  • You need to lock your parallax in place. I like using Yanfly’s Parallax Lock script; the “tile lock” command will keep your parallax on a one-to-one with the rest of your map.
  • You need to handle pathing of your parallaxed tiles. Right now, the player might be able to walk on some walls that you don’t want them to, or be blocked by seemingly invisible obstacles. Using transparent tiles, cover these spaces with either blocks or passes as you need to. For a detailed tutorial on this step (it can be confusing), check out PieHardLol’s parallax mapping tutorial.

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s