Help - Search - Members - Calendar
Full Version: [Mapping]Parallaxing For Dummies
RPG RPG Revolution Forums > Game Engines > RPG Maker VX Discussion > RPG Maker VX Tutorials
Jonnie19
The BIG Parallaxing Guide for Dummies
Part 1: The First Step

Disclaimer: I don't think that any of you are dumb for using this tutorial, it is just for the sake of the Title, I wanted a catchy title, and I like it biggrin.gif

Welcome, I am going to be doing a number of different tutorials on how I utilize Photoshop to create the newest craze in RPG Maker VX: Parallax Maps.

For this Tutorial you will NOT need:
  • Knowledge of Photoshop: I will go into the nitty gritty of how to utilise Photoshop for Parallaxing, whereas other tutorials expect you to know something about it, I will act as if you have NEVER opened up Photoshop
  • Knowledge of RPG Maker VX: I will also show you what you need to know about RPG Maker VX to use this tutorial...

This tutorial will be VERY LONG, and will probably be split up into different threads, purely because of the amount of pictures I will use, and the detail I will be going into...
Parallaxing can be tricky at times, frustrating and irritating, however stick with it, because the maps you can create with, are amazing!

In this tutorial we will learn:
  • What are Parallaxes?
  • How to change the passibility settings.
  • How to change your tileset
  • Making a "base" map, that is used to create your Parallax
  • How to use the script Editor
  • Inputting Scripts
  • Using the Script Command
  • Creating a new Event Page
  • Exporting your map as a PNG


The First Steps >>What Are Parallax Maps?

Before the times of Parallax mapping you used Parallaxes as a background to a map that has been created using the editor...
Parallaxes are simply images, which are shown in the background, these images where used for scenery and backdrops, these images aren't meant to be walked on, I mean can you walk in the air?

Parallax...The old way!


Well...some smart cookie decided to change all that, they realised that if they changed the passability settings of the Parallax Tile (show below):
The Parallax Tile

They can create maps made completely from a Parallax Image.
Now, the maps of old are phasing out; the days of RTP maps and square villages are dying. The best and greatest ways to create a game that impresses the critics is to Parallax.
Parallax maps open up new possibilities, the fact that you were restricted to square maps, with little room for change was kinda suckish, now you can create more realistic maps, going back to the days of RPG Maker XP, where you had lots of layers, where you can layer upon layer upon layer...and so on, RPG Maker VX kept you with just two.

Probably the best thing about Parallax mapping, is the infinite amount of layers you can use, I can use around 50/100 layers for a small map, and there is no problems! Parallax Mapping is the way of the future!
Anyway...enough about that let's get on with actually making your first Parallax map...

The First Steps >>Inside Mapping>>>Creating the Base

So the first step to creating a parallax map is to create your Parallax:
So to start up with open up RPG Maker VX:
Opening Of RPG Maker VX(Yes I am going to show EVERYTHING)


Now it is best to start from the floor and work up when creating your map, there are two different techniques in creating the walls and floors. The easiest and most time effective way is to use the editor, to create your base, this means that you flooring and your walls (which is the hardest thing to create in parallax map) are already made; this means then you can get on with customising your "home".
Now NO map should be 100 by 100, that is just cruel and horrible to parallax and makes the players like seriously difficult, So time to resize it to a more negotiable size, let's say 20 by 17, it is just abit bigger than the default, and this will be shrunk even further when creating the map! So click on the map named: "Map 001" and press enter, this will open up the following window, set the window to look like below:

Prime Window Setup for an inside Map smile.gif


Once you have done this press enter, and now your HUGE map will shrink to a more manageable size, now it is time to create a basic outline, using RTP and Mack(In the more advanced sections of this tutorial, I will show you how to utilize the Swap XT Software and script and swapping in better and less RTP flooring and maps smile.gif

Jonnie's Top Tips: Using different Tilesets(specifically the one's from this tutorial)

The tileset I am using is located here. download the zip file, and extract it into your graphics system folder. This will mean that you have the tiles that I am using This is a combination tileset with Mack and RTP. (Credit both Enterbrain and Mack)


To start off with create your ceiling outline like shown:

Ceiling Outline


Now add in the floor and the walls:

Walls and Floor:




Jonnie's Top Tip

Pay specific attention to the fact that your character needs to be able to WALK through this map, so you may need to change your map to make sure you have enough space for the player to walk.


So you have created the "base" for your home, however for a parallax map; we need to edit it in a Graphics program...


First Steps >> Inside Mapping >> Exporting it as a PNG picture file

The quickest and easiest way of getting your map out of RPG Maker VX and getting it into Photoshop/GIMP is to use a Map Saver script:
Omegas7's Map Saver Script
CODE
# =============================================================================
# Map Saver
# Version 0.1
# Author: Omegas7.   Site: http://www.myrpgmaker.com
# Credit: Woratana for PNG Saver script.
# =============================================================================
# Save a whole map into a .png file by taking multiple screenshots and finally
# combining them. Exporting the resulting bitmap to a .png image file using
# Woratana's PNG Saver script.
# =============================================================================
# Instructions:
#   Go to Paint or whatever image editing software you want.
#   Create a new file, width and height will be the same as your map, but
#   multiplied by 32. (If map's width is 20, the image's width will be 640).
#   Name the image "Blank", and save it on the System folder of your game.
#   Go to your game map, and put the player starting position on the
#   bottom left part of the map.
#   Now make a new event, autorun, with script call:
#   $saver = Map_Saver.new
#   Then turn self-switch A ON.
#   Go to the event's second page, put as condition self-switch A, then put
#   script call:
#   $saver.update
#   Finally make the second page to be autorun as well.
#   Run the game, you will see the map will start scrolling. Let it be.
#   At the end the script will start creating the image file, this process
#   may take several minutes depending on your map's size.
#   Sure, it may take very long, but it saves HOURS if you planned to make
#   your map manually, so do not complain;).
# =============================================================================
# Notes:
#   The final result will be an image file located on your game's main folder.
#   The image will be exactly what appears on the screen, so if you got a HUD,
#   it will appear as well.
#   If you notice a problem with the final result, like with tiles etc,
#   try activating "weird mode" below.
#   If the final result is still not fixed, try to get support.
# =============================================================================


class Map_Saver
  def initialize
    
    # If the resulting image seems to be wrongly made, try turning this value
    # to "true". Normally, this should be false.
    @weird_mode = true
    
    @result = Bitmap.new('Graphics/System/Blank')
    @bitmaps = []
    @moving = true
    @last_place = 'none'
    @finishing = false
    @pause_time = 30
    @scrolling_x = 13
  end
  def update
    if !(@finishing)
      if !($game_map.scrolling?)
        if @moving
          execute_image
        else
          if can_move?(8)
            $game_map.start_scroll(8, @scrolling_x, 7)
            @moving = true
            @last_place = 'down'
          elsif can_move?(6) && @last_place == 'down'
            $game_map.start_scroll(6, 17, 7)
            @last_place = 'left'
          elsif can_move?(2) && @last_place == 'left'
            $game_map.start_scroll(2, $game_map.height, 9)
            @last_place = 'up'
            @moving = true
          else
            @finishing = true
            for i in 0...@bitmaps.size
              y = @bitmaps[i][2]*32
              if @bitmaps[i][3] == true
                y += 16 if @weird_mode
              end
              @result.blt(@bitmaps[i][1]*32,y,@bitmaps[i][0],
              Rect.new(0,0,544,416))
            end
            @result.make_png('Map','')
            print "Map image production is over!"
            exit
          end
        end
      end
    end
  end
  def execute_image
    Graphics.freeze
    Sound.play_decision
    @bitmaps.push([Graphics.snap_to_bitmap,
    $game_map.display_x/256,
    $game_map.display_y/256,
    nil])
    @moving = false
    Graphics.transition(@pause_time)
    if can_move?(8) && can_move?(2)
      @bitmaps[@bitmaps.size - 1][3] = true
    end
  end
  def can_move?(direction)
    case direction
    when 6
      return false if ($game_map.display_x/256) == ($game_map.width - 17)
      return true
    when 2
      return false if ($game_map.display_y/256) == ($game_map.height - 13)
      return true
    when 4
      return false if ($game_map.display_x/256 == 0)
      return true
    when 8
      return false if ($game_map.display_y/256 == 0)
      return true
    end
  end
end


# =============================================================================
# PNG Saver by Woratana.
# =============================================================================

module Zlib
  class Png_File < GzipWriter
    def make_png(bitmap, mode = 0)
      @bitmap, @mode = bitmap, mode
      create_loader
      self.write(make_header)
      self.write(make_ihdr)
      self.write(make_idat)
      self.write(make_iend)
    end
    def create_loader
      w = @bitmap.width
      h = @bitmap.height
      @calculated = [0,nil]
      @calculated[1] = Float.induced_from(w*h)
      @window = Window_Base.new(0,150,544,116)
      @window.contents.font.size = 16
      @update = ((@bitmap.width*@bitmap.height)/3000.0).floor.to_i
      refresh_loader
    end
    def refresh_loader
      Graphics.update
      @window.contents.clear
      text = ['Creating image file, please wait...',
      percent.to_s + '% done...']
      for i in 0...text.size
        @window.contents.draw_text(0,20*i,520,20,text[i])
      end
      Graphics.update
    end
    def percent
      return ((100/@calculated[1])*@calculated[0]).floor
    end
    def make_header
      return [0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a].pack('C*')
    end
    def make_ihdr
      ih_size               = [13].pack('N')
      ih_sign               = 'IHDR'
      ih_width              = [@bitmap.width].pack('N')
      ih_height             = [@bitmap.height].pack('N')
      ih_bit_depth          = [8].pack('C')
      ih_color_type         = [6].pack('C')
      ih_compression_method = [0].pack('C')
      ih_filter_method      = [0].pack('C')
      ih_interlace_method   = [0].pack('C')
      string = ih_sign + ih_width + ih_height + ih_bit_depth + ih_color_type +
               ih_compression_method + ih_filter_method + ih_interlace_method
      ih_crc = [Zlib.crc32(string)].pack('N')
      return ih_size + string + ih_crc
    end
    def make_idat
      header  = "\x49\x44\x41\x54"
      data    = @mode == 0 ? make_bitmap_data0 : make_bitmap_data1
      data    = Zlib::Deflate.deflate(data, 8)
      crc     = [Zlib.crc32(header + data)].pack('N')
      size    = [data.length].pack('N')
      return size + header + data + crc
    end
    def make_bitmap_data0
      gz = Zlib::GzipWriter.open('png2.tmp')
      t_Fx = 0
      w = @bitmap.width
      h = @bitmap.height
      data = []
      for y in 0...h
        data.push(0)
        for x in 0...w
          t_Fx += 1
          if t_Fx % 10000 == 0
            Graphics.update
          end
          if t_Fx % 100000 == 0
            s = data.pack('C*')
            gz.write(s)
            data.clear
          end
          color = @bitmap.get_pixel(x, y)
          red = color.red
          green = color.green
          blue = color.blue
          alpha = color.alpha
          data.push(red)
          data.push(green)
          data.push(blue)
          data.push(alpha)
          @calculated[0] += 1
          if @calculated[0] % @update == 0
            refresh_loader
          end
        end
      end
      s = data.pack('C*')
      gz.write(s)
      gz.close  
      data.clear
      gz = Zlib::GzipReader.open('png2.tmp')
      data = gz.read
      gz.close
      File.delete('png2.tmp')
      return data
    end
    def make_bitmap_data1
      w = @bitmap.width
      h = @bitmap.height
      data = []
      for y in 0...h
        data.push(0)
        for x in 0...w
          color = @bitmap.get_pixel(x, y)
          red = color.red
          green = color.green
          blue = color.blue
          alpha = color.alpha
          data.push(red)
          data.push(green)
          data.push(blue)
          data.push(alpha)
          @calculated[0] += 1
          if @calculated[0] % @update == 0
            refresh_loader
          end
        end
      end
      return data.pack('C*')
    end
    def make_iend
      ie_size = [0].pack('N')
      ie_sign = 'IEND'
      ie_crc  = [Zlib.crc32(ie_sign)].pack('N')
      return ie_size + ie_sign + ie_crc
    end
  end
end

#=============================================================================
# ** Bitmap
#=============================================================================
class Bitmap
  def make_png(name = 'like', path = '', mode = 0)
    Zlib::Png_File.open('png.tmp')   { |gz| gz.make_png(self, mode) }
    Zlib::GzipReader.open('png.tmp') { |gz| $read = gz.read }
    f = File.open(path + name + '.png', 'wb')
    f.write($read)
    f.close
    File.delete('png.tmp')
  end
end


To do this the best way is to copy the script above and paste it into the Script Editor:
Press F11 and this window will pop up:

Script Editor Window


Scroll down to the bottom of the script editor to where it says "Materials". Copy the script from above using CTRL+ C and then click in the blank space below "Materials" and then on the white space next to it and press CTRL + P, which will paste the script into the editor. Now all you need to do is to name the Script: "Map Saver", ensure that it looks like the screen below before continuing:

After the Paste:


So, now you have copied and pasted the script, you are now all set up ready to get your map out of VX and into your graphics program!

Now, reading the instructions that are positioned at the top of the script you discover that you need to create a blank PNG file. So let us do that now

First Steps >> Inside Mapping >> Exporting it as a PNG picture file >> Creating the Blank Image

In RPG Maker the characters walk every 32px squares you can see this when you open up the editor and switch to the Event Layer:

32px Squares


So we need to mimic this in our graphics program to ensure that we make our life as easy as possible, and our character can move properly. So open up your Graphic Editing software:

Photoshop CS5 (GIMP IMAGE WILL BE DONE SOON)


So now we need to create a new blank image which the script will use to paste the current map onto it; however we need to make sure it is the right size.
If you have copied the tutorial the current size of your map should be: 20 by 17.
What you now need to do I time each of these numbers by 32, this is because our graphics program works in pixels, so open up Windows Calculator and type in the following calculations:

20(width of your map) * 32(pixel amount)
17(height of map) * 32(pixel amount)
Now you have the size of your map in Pixels, you can now create yourself a new picture
Set it up like shown below:

Photoshop setup(GIMP TO FOLLOW)


REMEMBER: If you are using a different size map, to what I created...you MUST change the above picture to show the size of YOUR map. Using the following equation:
Width (of map) *32 =Width
Length (of map)*32 =Length

So once you have done this immediately save it as a .PNG into "Graphics >> System" in your project folder under the name "Blank" (without the quotation marks)

Save it in Picture>>System folder of your Game Folder smile.gif



First Steps >> Inside Mapping >> Exporting it as a PNG picture file >> Event Setup >> Creating Event Page 1

Now, we need to setup the event for the script to work, so let's go back into the script to see what we have to do:

Script Instructions


Let's get started:
First let's set the players position in the left hand corner of map,

Jonnie's Top Tip
If you go into the database you will find that you can change the character sprite to none:

Change it from the dear old Ralph to blank...otherwise he will be standing there waiting for you when you start on your Parallax



This will make your life SO much easier; it will then not include your sprite when it takes the map image....


So, now you need to right click on the bottom left hand side of the map and select set position

Setting the Position


Once you have done that it is time to create the event:
Looking back at our script instructions we find that it asks us to call too script Event commands so let's do that!
Our first script command we need is:

CODE
$saver = Map_Saver.new


Making sure you are still on the event layer double click on one of the blank squares around your map to open up the Event editor and firstly set the trigger to Autorun:

Autorun Trigger On



So once you have done that we need to go to the third page of the Event commands window:

The script Page...


So, now we see the script window, copy this code and paste it into the window that is now opened:

Look above for code ^

now press enter It also tells us to activate a self switch so let's do that, so once again bring up the Event Command Window and click on Self Switch
Event Command Window:

Now select the ON radial button as shown below:

Self Switch Window:


Now your screen should look like this:

Completed event page:



Time for the next step...

First Steps >> Inside Mapping >> Exporting it as a PNG picture file >> Event Setup >> Creating Event Page 2


Now it is time for the second page of the event. To do this press the New Page button, at the top of the screen:

New Event Page Button!


Now we have two Event pages it is time to create the second part of the Event
Firstly we need to set up some conditions. If you remember on the previous page of this Event we turned on: "Self Switch A" this was so that we can activate THIS page so now on the conditions section of the Event window we need to tick the Self Switch box and make sure it is set to A:

Setting Condition:


Now that we have set the conditions we also need to change the Trigger to "Autorun"
Now it is time to call the second switch command:

CODE
$saver.update


Now do exactly what you did on page one however, this time input the above script snippet, once done it should look like this:

The Completed Event:


Now we are done....with the eventing for the script... Now all we need to do is run the game and this will happen

What should happen


Once this is done all you need to do is go into your Project folder and image will be there:

Ready to parallax


And that concludes the first part of the tutorial, I know parallaxing didn't really get started...but this part of the setup is VERY important!

This Tutorial is currently for RRR/R3 only, DO NOT DISTRIBUTE ON ANY OTHER SITES...FULL STOP! If you wanna show on other sites, a link to this thread is allowed
Jonnie19
Part One: Preparing for Parallaxing

Part Two: Carpets & Layers
amerk
Excellent job on the tutorial. I've actually gotten this far before, but not much passed it, so I'll be interested to see the next.

A couple of minor things I just wanted to point out. One is that technically you can get a 3rd layer in VX using events (but too many events generally requires an anti-lag script). Also, in the image above when resizing in Photoshop you had it as width 8.889 inches and height as 7.556 inches, using your exact map size of 20 width / 17 height. Either way appears to automatically convert, but I switched over to pixels. Is there a right/wrong using inches vs. pixels as long as it matches the same? Is one better than the other?

Jonnie19
I prefer using Pixels because that is how RPG Maker works, I try to avoid using Events as a layer really because of the amount of Lag :S but I suppose I should count it as a layer lol biggrin.gif

Oh gosh I just realised my mistake Thanks for that will change the screenshot now lol biggrin.gif just to stop confusion smile.gif

The next one will be up in a few days Glad you enjoyed it smile.gif
amerk
Thanks, I just wanted to be sure. On another note, as popular as parallaxing has become, it'd be nice if Enterbrain moved away from the grid/square based mapping and incorporated something similar to parallaxing, by letting you place tilesets however way you want. I find way too often a tileset that would look great centered between another, and yet the setup doesn't allow it (either it's too far left or too far right).
Rossamund
Sorry to post something slightly off topic, but those tilesets you are using, are they available for download somewhere? They look fantastic.

Nice tutorial so far!
Jonnie19
They are under one of my first top tips biggrin.gif Link All they are is a combination between Mack and RTP, it is amazing what combining the two can create,
the only difference between the two is the two Ice walls, which are NOT going to be available, as they are used for my project smile.gif
but the others are just Mack and RTP which I have rearranged to suit this Tutorial and my project(hence the name Elemental Tileset)

Hope that helps and hope you enjoyed the Tutorial biggrin.gif
Rossamund
Ah, thank you very much. These are really great.
stripe103
Very nice tutorials.

A question about the images you've posted. When I just do the normal [Alt Gr] + [Print Scrn] the windows come out with the background of them as well. I don't want it to do that. So what software are you using to make it don't take the background of the window and instead making it partly transparent?
Jonnie19
I use Shotty, it works really well especially for tutorials
I then save them on my computer, and create a zip, then Bulk upload them on RRR smile.gif
stripe103
That really is one awesome program biggrin.gif Thanks!
amerk
Part 2?
Jonnie19
It is in development right now, sorry been swamped under Elemental CT at the moment I am still working on it, tis alot bigger than the last one smile.gif
Storm237
Well, could you explain how to capture a map in XP and use it as an parallax image in VX? (Does anything do that?)
Jonnie19
Make sure you have the Event's layer open, so that you can see the entire map in the editor, then use Printscreen.
Orrion Carn
Put it to the test today. Great work! Still have a few bugs to work out with mapping the invisible tiles, but so far it's working fine biggrin.gif
Steysel
Thanks for this tutorial. It really helps.
wild_bill236
can you tell me where i can get Photoshop CS5.
rayvales
An amazing job you have done here smile.gif I feel like i really learnd from this tutorial xD So keep that great work comming!
amerk
QUOTE (wild_bill236 @ Nov 28 2011, 08:39 PM) *
can you tell me where i can get Photoshop CS5.


You can find it online, but it costs money (not free). A free alternative is to use Graphics Gale, which a lot of people opt to use in place of Photoshop.
Jonnie19
There is also GIMP, which for Parallaxing is better than GG in my personal opinion.
President LagunaFantastica
Hey, I'm new to this paralaxing thing and I followed the steps in your guide completey, but when I playtest I get an error saying "Error line 48 Map Saver: Failed to create Bitmap"

Why does it do that?
Jonnie19
Are you sure you made the Blank image, and named it blank? If I can remember some syntax (please correct me scripters if I am wrong) but the line that is causing the error:
CODE
@result = Bitmap.new('Graphics/System/Blank')

is the one which fetches the blank image from your Graphics System folder.

This is most likely your problem, so go back through the tutorial, and double check you have created the blank image. smile.gif
amerk
It also needs to be named as a png file, if I'm not mistaken, so:

Blank.png
President LagunaFantastica
Ahh, thanks Amerk and Jonnie. I had accidentally saved the file twice, once as xcf and once as .png. The xcf one was being used and giving me the error.
Jonnie19
Glad we can be of help tongue.gif (Thanks Amerk, for also mentioning the file type tongue.gif)
SenriRitsu
Hiya, first thanks for the tutorial ^-^ Secondly... For the map saver script, i followed the instructions correctly (At least I think so) but when I ran the game, the map scrolling thing didn't happened. I also didn't get the image if that wasn't obvious enough. Please help >.<
thekagekaton
I was just wondering if this same script would be usable in VX ACE, i tried it and i keep getting an error about the script (i think). Any help would be greatly appreciated.

On a side note the walkthrough itself helped me a ton, i'm new to mapping and i had no idea what everyone was talking about with prallax's and now i do, thank you so much.
Jonnie19
Sadly this script is for VX only, However if i remember rightly VXA doesn't really need to use parallax mapping as it has the same abilities of XP with unlimited tilesets etc.

However if you are having troubles using the scripot, there is an alternative that you can use...which is taking a screenshot of the editor once you have created the file in photoshop/gimp/graphics gale. Currently on my HTC so when i get to my laptop later today i'll show you how to do it using just screenshots instead

Reallt glad the tutorials are helpful, and feel free to PM me if you want to ask any questions about parallaxing smile.gif
amerk
It does have the same ability for unlimited tilesets, however parallax mapping allows you to do so much more (if you have the patience for it). And some graphics like Celianna and Lunarea's tiles are set up for parallax instead of tilesets.

However, there are some updated scripts already for Ace to help with this... take your pick on what you need.

http://www.rpgmakervxace.net/topic/258-overlay-mapping/
http://www.rpgmakervxace.net/topic/437-vic...fixed-parallax/
http://rmrk.net/index.php/topic,44635.0.html
http://www.rpgmakervxace.net/topic/511-aee...parallax-layer/
http://www.rpgmakervxace.net/topic/676-dmo..._8605#entry8605
http://www.rpgmakervxace.net/topic/669-map..._8571#entry8571
http://yanflychannel.wordpress.com/rmvxa/u.../parallax-lock/
Jonnie19
another script to add to Amerk suggestion:

http://www.rpgmakervxace.net/topic/669-map...ersion-request/
Thanks to Kayden for finding this one tongue.gif
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2013 Invision Power Services, Inc.