Author Topic: [Tutorial] Getting started with Parallax Mapping (VX Ace) (Read 19525 times)

#1 • Feb 7, 2013

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.

Spoiler for:

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.

Spoiler for:

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)

Code: [Select]

#==============================================================================
# 
# ? 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

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

Spoiler for:

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.

Spoiler for:

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"

Spoiler for:

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[/li][/list]

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.

Spoiler for:

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
[/li][/list]

Code: [Select]

#==============================================================================
# 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.

http://www.youtube.com/watch?v=8pF8OJ73vpk