[Mapping]Parallaxing For Dummies, Part 1: Preparing for Parallaxing Options

[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

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?

[Show/Hide] 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):

[Show/Hide] 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:

[Show/Hide] 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:

[Show/Hide] Prime Window Setup for an inside Map

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

[Show/Hide] 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:

[Show/Hide] Ceiling Outline

Now add in the floor and the walls:

[Show/Hide] Walls and Floor:

[Show/Hide] 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:

[Show/Hide] 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:

[Show/Hide] 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:

[Show/Hide] 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:

[Show/Hide] 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:

[Show/Hide] 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:

[Show/Hide] 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)

[Show/Hide] Save it in Picture>>System folder of your Game Folder

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:

[Show/Hide] Script Instructions

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

[Show/Hide] Jonnie's Top Tip

If you go into the database you will find that you can change the character sprite to none:

[Show/Hide] 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

[Show/Hide] 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:

[Show/Hide] Autorun Trigger On

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

[Show/Hide] The script Page...

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

[Show/Hide] 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

[Show/Hide] Event Command Window:

Now select the ON radial button as shown below:

[Show/Hide] Self Switch Window:

Now your screen should look like this:

[Show/Hide] 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:

[Show/Hide] 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:

[Show/Hide] 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:

[Show/Hide] 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

[Show/Hide] What should happen

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

[Show/Hide] 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

This post has been edited by Jonnie19: Aug 14 2011, 11:43 AM

[Jonnie19]

Part One: Preparing for Parallaxing

Part Two: Carpets & Layers

This post has been edited by Jonnie19: Aug 14 2011, 11:02 AM

[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

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

The next one will be up in a few days Glad you enjoyed it

[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 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
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

[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

[stripe103]

That really is one awesome program 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

[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

[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 I feel like i really learnd from this tutorial xD So keep that great work comming!

[amerk]

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.