tutorial Getting Started with Parallax Mapping

[Chickan 117 19]

I was interested in parallax mapping but found there was a distinct lack of comprehensive tutorials regarding the core process... so I decided to write one. Don't get me wrong; there are plenty of tutorials out there but they seem to lack detailed instruction when it comes to actually making your maps work.

 

I'll attach the files I used to create this tute at the end so, if you want, you can just try out the exact map used here for yourself.

 

Note : This isn't a tutorial on how to use graphic editing programs like Photoshop or Gimp. 

Note 2 : This tutorial will cover 2 level mapping. Stuff that goes under the player and stuff that goes over the player.

Note 3 : This is tested in VX Ace. 

 

Contents

 

PART 1 - Creating the Parallax Map

 

Create the Base Map Image

Import the Base Map Image into RPG Maker

Load a Parallax Lock Script

Create a Parallax Tileset

Create the map

Making the map work

 

 

PART 2 - Adding the overlay

 

Create the overlay image

Import the overlay image

Add the script

Create an event

 

PART 1

 

1. Create the Base Map Image

 

The first thing you'll want to do is create the base map image. This image will have everything that goes underneath the character (e.g. floors, carpet, chair bases) and everything the player is unable to pass through (e.g. walls, trees, etc.). RPG Maker works with a 32x32 grid so ensure your image size had a width and height divisible by 32. For example a 10 square wide by 5 square high map would need a 320 by 160 pixel image.

 

When creating this file it's important to remember, as RPG Maker works in "squares", your "under player" and "same height as player" areas should adhere, roughly, to that grid.

 

Save this as a png file preferably with transparency for the background if you're able).

 

For this demo I wanted a 33x21 map so I created my image with resolution 1056x672 pixels.

 

 

2. Import the Base Map Image into RPG Maker

 

Now open RPG Maker VX Ace. Press F10 to enter the Resource Manager, select Graphics/Parallaxes on the left and then click the Import button.

 

When prompted for a file choose the one you created in Step 1.

 

 

3. Load a Parallax Lock Script]

 

Parallax backgrounds, by default, scroll at a different rate to the foreground. In order to prevent this you should add a parallax locking script. There are a number available but, personally, I prefer the Yanfly one which you can get here.

 

To import the script just press F11 to open the script editor, scroll down the left hand list until you see "Materials" (near the bottom)select the row beneath that and press Insert. Now past the following code into the right side window (this code is the Yanfly version I was using at the time this tute was created)

 

 

#==============================================================================
# 
# â–¼ Yanfly Engine Ace - Parallax Lock v1.00
# -- Last Updated: 2012.02.19
# -- Level: Normal
# -- Requires: n/a
# 
#==============================================================================


$imported = {} if $imported.nil?
$imported["YEA-ParallaxLock"] = true


#==============================================================================
# â–¼ Updates
# =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
# 2012.02.19 - Started Script and Finished.
# 
#==============================================================================
# â–¼ Introduction
# =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
# This script gives developers the ability to lock a map's parallax and cause
# it to not scroll by either vertically, horizontally, or both. Furthermore,
# this script also enables tile locking the map parallax, allowing the parallax
# to only move in conjunction with the player.
# 
#==============================================================================
# â–¼ Instructions
# =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
# To install this script, open up your script editor and copy/paste this script
# to an open slot below â–¼ Materials/ç´ æ but above â–¼ Main. Remember to save.
# 
# -----------------------------------------------------------------------------
# Map Notetags - These notetags go in the map notebox in a map's properties.
# -----------------------------------------------------------------------------
# <lock parallax x>
# This prevents the map's parallax from scrolling horizontally.
# 
# <lock parallax y>
# This prevents the map's parallax from scrolling vertically.
# 
# <full lock parallax>
# This prevents the map's parallax from scrolling at all.
# 
# <tile lock parallax>
# This causes the map's parallax to be locked to tiles and scrolls with them.
# 
#==============================================================================
# â–¼ Compatibility
# =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
# This script is made strictly for RPG Maker VX Ace. It is highly unlikely that
# it will run with RPG Maker VX without adjusting.
# 
#==============================================================================
# â–¼ Editting anything past this point may potentially result in causing
# computer damage, incontinence, explosion of user's head, coma, death, and/or
# halitosis so edit at your own risk.
#==============================================================================


module YEA
  module REGEXP
  module MAP
    
    LOCK_PARALLAX_X = /<(?:LOCK_PARALLAX_X|lock parallax x)>/i
    LOCK_PARALLAX_Y = /<(?:LOCK_PARALLAX_Y|lock parallax y)>/i
    FULL_LOCK_PARALLAX = /<(?:FULL_LOCK_PARALLAX|full lock parallax)>/i
    TILE_LOCK_PARALLAX = /<(?:TILE_LOCK_PARALLAX|tile lock parallax)>/i
    
  end # MAP
  end # REGEXP
end # YEA


#==============================================================================
# â–  RPG::Map
#==============================================================================


class RPG::Map
  
  #--------------------------------------------------------------------------
  # public instance variables
  #--------------------------------------------------------------------------
  attr_accessor :parallax_lock_x
  attr_accessor :parallax_lock_y
  attr_accessor :parallax_tile_lock
  
  #--------------------------------------------------------------------------
  # common cache: load_notetags_paralock
  #--------------------------------------------------------------------------
  def load_notetags_paralock
    @parallax_lock_x = false
    @parallax_lock_y = false
    @parallax_tile_lock = false
    #---
    self.note.split(/[\r\n]+/).each { |line|
      case line
      #---
      when YEA::REGEXP::MAP::LOCK_PARALLAX_X
        @parallax_lock_x = true
        @parallax_tile_lock = false
      when YEA::REGEXP::MAP::LOCK_PARALLAX_Y
        @parallax_lock_y = true
        @parallax_tile_lock = false
      when YEA::REGEXP::MAP::FULL_LOCK_PARALLAX
        @parallax_lock_x = true
        @parallax_lock_y = true
        @parallax_tile_lock = false
      when YEA::REGEXP::MAP::TILE_LOCK_PARALLAX
        @parallax_lock_x = false
        @parallax_lock_y = false
        @parallax_tile_lock = true
      #---
      end
    } # self.note.split
    #---
  end
  
end # RPG::Map


#==============================================================================
# â–  Game_Map
#==============================================================================


class Game_Map
  
  #--------------------------------------------------------------------------
  # alias method: setup
  #--------------------------------------------------------------------------
  alias game_map_setup_parallax_paralock setup_parallax
  def setup_parallax
    @map.load_notetags_paralock
    game_map_setup_parallax_paralock
  end
  
  #--------------------------------------------------------------------------
  # new method: parallax_lock_x?
  #--------------------------------------------------------------------------
  def parallax_lock_x?
    return @map.parallax_lock_x
  end
  
  #--------------------------------------------------------------------------
  # new method: parallax_lock_y?
  #--------------------------------------------------------------------------
  def parallax_lock_y?
    return @map.parallax_lock_y
  end
  
  #--------------------------------------------------------------------------
  # new method: parallax_tile_lock?
  #--------------------------------------------------------------------------
  def parallax_tile_lock?
    return @map.parallax_tile_lock
  end
  
  #--------------------------------------------------------------------------
  # alias method: parallax_ox
  #--------------------------------------------------------------------------
  alias game_map_parallax_ox_paralock parallax_ox
  def parallax_ox(bitmap)
    return 0 if parallax_lock_x?
    return @display_x * 32 if parallax_tile_lock?
    return game_map_parallax_ox_paralock(bitmap)
  end
  
  #--------------------------------------------------------------------------
  # alias method: parallax_oy
  #--------------------------------------------------------------------------
  alias game_map_parallax_oy_paralock parallax_oy
  def parallax_oy(bitmap)
    return 0 if parallax_lock_y?
    return @display_y * 32 if parallax_tile_lock?
    return game_map_parallax_oy_paralock(bitmap)
  end
  
end # Game_Map


#==============================================================================
# 
# â–¼ End of File
# 
#==============================================================================

4. Create a Parallax Tileset

 

You now have a map that looks great however, as RPG Maker doesn't recognise any movable squares, you won't be able to do anything on it yet. 

My advice here is to create a new tileset specifically for Parallax Maps. You don't have to do this of course, you only need a transparent tile with passage enabled to fool RPG Maker into thinking there's something there and giving the illusion of interacting with your map image.

But I digress. Pretend you're gonna use my method for the moment and create a custom tileset.

First of all download this image as it will make your life easier

 

http://www.c117.net/Chickan/RPGVXA/Tutorials/Parallax_A2.png

 

Now import it by

• Press F10
• Select Graphics/Tilesets
• Click Import
• Select the Parallax_A2.png file you downloaded above

 

Now create a new tileset

• Press F9 to bring up the database
• Select the Tilesets tab
• If required click the "Change Maximum" button in the bottom left to create some more blank tilesets
• Select a blank tileset on the left
• Name it something distinctive like "Parallax"
• Click the selector box under A2 (Ground) and choose the Parallax_A2 file

 

 

 

5. Create the Map

• Create a new map using the Height and Width appropriate for the file you created in step 1 (33 x 21 in my example). 
• Select the Tileset created in step 4
• In the bottom left section of the windows use the selector box to choose the file from step 1 as your Parallax Background Graphic. 
• Tick the "Show in Editor" box at the bottom of the screen 
• If you're using Yanfly's Parallax Lock script then enter <tile lock parallax> in the notes section. This prevents the base image from moving at a different speed to your character. 

 

5. Making the Map work

 

You've done the hard work now. Now just press F5 to enter "map mode" and use the pink tile to color in all the areas you want your character to be able to walk.

 

In this example I wanted a secret area like the have in the Final Fantasy Legends games so I extended a path out the right side "off the map so to speak"

 

 

Once you're happy with your selection change to one of the clear times and then trace over all the pink squares. 

 

Hint : If you have a nunch joined together use the paint bucket tool to easily fill them in.

 

What we're doing here is creating invisible ground pieces that RPG Maker will think are usable tiles. That way your character will be able to walk around the level as you desire. Any tile you don't touch will, by default, be unpassable which is how you prevent players from walking thru walls or tiles you want impassable. You could also use an invisible tile with passage set to X (viewed on the right side of step X) if you wanted to manually add them.

 

That's it for the base level. Press F12 and test it out.

 

PART 2

 

1. Create the overlay image

 

Now that the stuff "under the player" is taken care of it's time to add stuff above. This can also be done with events if you prefer.

 

The first step is to create the overlay image. This is an image with a transparent base that will sit "above the level" giving the apprearance that we're walking underneath items. 

 

There are two ways of doing this. The first is to create a separate image file for each item you want above the player. The second is to create one big image the same size as the map and just position your bits accordingly. The second option is easier but uses more memory when the game is being played.

 

Either way create your image/s and then save them as png files with transparency. 

 

It's important that, when you save the file, you prefix the file name with [FIXED]. So, if you wanted to call your file TestMap23Overlay.png you'd need to save it as [FIXED]TestMap23Overlay.png

 

In my example I wanted a giant plane thing to be above the player. As I wanted to have secret passages I also wanted the tops of the walls to be above the player too.

 

 

2. Import the overlay image

 

• Press F10 to open the Resources Manager
• Select Graphics/Pictures on the left
• Click Import and select the file you saved in the previous step

 

3. Add the script

 

If we put the imageon top of our map now it would move with the player as the map scrolls. To get around that we need to add another script. This time it's the Fixed Pictures script by Seer UK and OriginalWij which ensures any picture with the prefix [FIXED] will not scroll.

 

You can grab a copy here

 

 

#==============================================================================
# Fixed Pictures
#==============================================================================
# Author : Seer UK & OriginalWij
# Version : 1.2
#
# Credit: Seer UK
# OriginalWij (Original RGSS2 Script)
#==============================================================================


#==============================================================================
# To use:
#   put the tag [FIXED] in the affected picture's filename
#==============================================================================


#==============================================================================
# What this does:
#   fixes tagged pictures to the map (scrolls with the map)
#==============================================================================


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


class Sprite_Picture < Sprite
  #----------------------------------------------------------------------------
  # Update  [ MOD ]
  #----------------------------------------------------------------------------
  def update
update_bitmap
update_origin
if @picture.name.include?("[FIXED]")
 self.x = 0 - $game_map.display_x * 32
 self.y = 0 - $game_map.display_y * 32
else
 update_position
end
update_zoom
update_other
  end
end

 

4. Create an event

 

Now we need to create an event to display the overlay image. There are a few places you can put this; in the event that transfers you to the map, in a common event you call for each map, or as a a standalone event that runs on the map as an example.

 

No matter which option you choose you'll want it to simply "Show Picture" with the following settings:

 

 

Just don't forget to add something to turn it off when you leave the map or it'll be there all the time :S

 

Here's the map in action for those interested.

 

[Kev 0]

Been trying to figure out parallaxing forever, thank-you! 

[Chickan 117 19]

Glad it helped you out

[magic2345 251]

Wow this is a nice tutorial!! You can also just use a map saver script to get a png of your map for the base.

 

You should make another tutorial about animating the autotiles though, because the way you're doing it, that water won't be animated.

Edited April 11, 2013 by magic2345

[Chickan 117 19]

Wow this is a nice tutorial!! You can also just use a map saver script to get a png of your map for the base.

 

You should make another tutorial about animating the autotiles though, because the way you're doing it, that water won't be animated.

Yeah I tried using a map saver script but couldn't get it to work. Might try again for some of my bigger maps as it's much easier than piecing it together in Photoshop

 

Good idea about the autotiles. Any advice there? I'd planned on just making some autotiles of the bits that moves (e.g. waves) and then putting that over the plain blue base. That way I wouldn't have to worry too much about where water meets a wall.

[magic2345 251]

Map Saver scripts saved my life during my parallaxing days. Copy pasting huge maps just isn't worth my time >_<

 

Yeah, that would work. I'm also trying to figure out myself how to put a layer of parallax above these, just for the illusion that it isn't square.

 

The problem also starts when people get creative and try putting things underwater. I saw a tutorial somewhere though, but forgot when I stopped parallaxing.

Edited April 12, 2013 by magic2345

[Vaigh 1]

A very informative tutorial. I found it extremely helpful! Though I am curious (and slightly dumbfounded) with the overlay image. What would be the best option to stop the image from appearing once you leave the scene (and then reappear when returning)?

[Chickan 117 19]

A very informative tutorial. I found it extremely helpful! Though I am curious (and slightly dumbfounded) with the overlay image. What would be the best option to stop the image from appearing once you leave the scene (and then reappear when returning)?

Glad it was useful  

 

The way I cleared the overlay was as follows:

 

1. Always set the overlay image to a particular number (99 in my case)

2. Create a common event (F9 - Common Events) to erase aforementioned picture

3. Call that event whenever the map changes. Either in your transition from map to map or each time you enter a map (before the new overlay is applied).

 

I'm sure there are much better ways of doing it but that works well for me

[Vaigh 1]

 

A very informative tutorial. I found it extremely helpful! Though I am curious (and slightly dumbfounded) with the overlay image. What would be the best option to stop the image from appearing once you leave the scene (and then reappear when returning)?

Glad it was useful  

 

The way I cleared the overlay was as follows:

 

1. Always set the overlay image to a particular number (99 in my case)

2. Create a common event (F9 - Common Events) to erase aforementioned picture

3. Call that event whenever the map changes. Either in your transition from map to map or each time you enter a map (before the new overlay is applied).

 

I'm sure there are much better ways of doing it but that works well for me

 I truly appreciate your genius, it works great!

[Chickan 117 19]

ghjhgj

Edited May 7, 2013 by Chickan 117

[Galv 1,380]

Chickan, please don't pose spam like this...

[Chickan 117 19]

Chickan, please don't pose spam like this...

Do you mean my jhghgj post? If so I apologise. I accidentally typed a response to a PM and posted it there. After realising my mistake I went to delete the post but couldn't find a delete button so I, instead, replaced it with junk whilst I sent a query as to how to delete a post.

 

Also I don't see how a single post can be considered spam. Unless you're referring to my earlier posts as well in which case I'm surprised as I thought this forum was about sharing and discussing stuff relating to RPGMVXA (wow, the initialisation is almost as long as the word)

 

Also, just for fun, here's a pic of some people posing spam

 

[Shaddow 359]

A suggestion to avoid autotiles looking square is to use your overlay tile to cover the edge with 'land'. It is pretty that way.

[Chickan 117 19]

You're not wrong there. I find that especially useful in dungeons as, unlike towns, the sharp edges feel more out of place there.

[atfyntify 0]

I have a question, how can I use Parallax tilesets? I've seen many parallax tilesets but I don't know how to use them. Can someone please help me? 

[Riff 62]

Your tutorial is pretty good but may I recommend this script. Using this one you don't have to bother yourself with pictures and parrallax lock (though your directory may become a mess really fast)

 

Other than that, it's good !

 

PS : To animate tiles, I use the built-in editor and the overlay simply cover the edges.

[Chickan 117 19]

I have a question, how can I use Parallax tilesets? I've seen many parallax tilesets but I don't know how to use them. Can someone please help me? 

I'm not sure what you mean as parallax mapping is kinda designed so you don't really use the tilesets. Are you able to provide a link to some of these animated tilesets you're talking about or clear up for me what you want to achieve? 

[atfyntify 0]

 

I have a question, how can I use Parallax tilesets? I've seen many parallax tilesets but I don't know how to use them. Can someone please help me? 

I'm not sure what you mean as parallax mapping is kinda designed so you don't really use the tilesets. Are you able to provide a link to some of these animated tilesets you're talking about or clear up for me what you want to achieve? 

Parallax tilesets like Celianna's parallax tileset

[Chickan 117 19]

arallax tilesets like Celianna's parallax tileset

 

Ah gotcha. Those aren't tilesets as such but just images designed to be used when making your static map image (part 1 step 1 of the process above). That's why, at the start, she says they're not formatted as a tileset. Kinda a bit confusing calling them tilesets really as they're sorta not. Just shapes designed to fit the 32x32 grid well.

 

So, cbasically, you download the images and copy/paste/layer in photoshop to make a map image like you want then use that for parallax mapping.

 

Does that make sense?

[atfyntify 0]

 

arallax tilesets like Celianna's parallax tileset

 

Ah gotcha. Those aren't tilesets as such but just images designed to be used when making your static map image (part 1 step 1 of the process above). That's why, at the start, she says they're not formatted as a tileset. Kinda a bit confusing calling them tilesets really as they're sorta not. Just shapes designed to fit the 32x32 grid well.

 

So, cbasically, you download the images and copy/paste/layer in photoshop to make a map image like you want then use that for parallax mapping.

 

Does that make sense?

Ahh thank you!!

It helped!!

[Duranette 0]

Thank you so much it, is wonderful to find a tutorial that actually explains things clearly.  The first one that I found left me largely confused, but yours has been a great help.  The idea of the special tileset is especially helpful.  Thanks again.   

[posfan12 7]

Is Yami's script better than this one?

 

http://www.rpgmakervxace.net/topic/258-overlay-mapping/

 

Which should I use?

[Chickan 117 19]

Is Yami's script better than this one?

 

http://www.rpgmakervxace.net/topic/258-overlay-mapping/

 

Which should I use?

 

Never used that but this one's fairly plug and play. Maybe start a new project, try each and see which you prefer

[posfan12 7]

OK, I got the script working. However, is there a way to make the top layer visible in the editor? I attached the event to my map, and it is rendered correctly when playtesting, but not in the editor. Thanks.

[posfan12 7]

I'm unable to add more than one Picture event to the map at a time. If I add a second image, the first one disappears. Any tips?