CVincent's Parallax Mapping Guide

じ☆ve冰风

[/url]



Welcome to my parallax mapping guide! This tutorial will take you through the process of starting your first parallax map and adding it to your project as well as making simple edits to help your map look great. There's also some tips for semi-experienced users!

 

First I'd like to start by saying that it always helps to have good music to listen to while you parallax, or just have some general background noise if it's your thing. Parallax mapping can get very boring if you focus too hard on it so try to let your ideas come to you naturally. Planning your project ahead of time is key to making well thought out parallax maps!

 

[url=http://forums.rpgmakerweb.com/index.php?/topic/43583-cvincents-parallax-mapping-guide/]


Main Guide

• What is Parallax Mapping?

• Scripts & Resources

• Setting up the Scripts

• Canvas Sizes

• Configuring Grids

• Explaining Layers

• Starting Your Parallax Map

• Exporting Finished Layers

• Path Blocking

 

Advanced Tips (I'll be updating these over this week)

• Animated Parallaxes (unfinished)

• Brush Dynamics (unfinished)

• Custom Brushes (unfinished)

• Day/Night Parallaxing (unfinished)

• Grunge Texture Mapping (unfinished)

• Shadows & Lighting (unfinished)

 

Other

• Thanks to..

• Support My Project!



 

 

[/url]


Parallax mapping is the process of using multiple layers of images to create a graphically complex map without being limited by tile-based mapping in the editor. It requires a fair amount of time to practice but the rewards are extremely beneficial to any RM project.



[url=http://forums.rpgmakerweb.com/index.php?/topic/43583-cvincents-parallax-mapping-guide/]


You'll need a few scripts in order to to get things working if you intend to use more than a few layers. Some of my parallaxes end up being close to thirty layers in a photo editing program while ending up at about five in the editor depending on the complexity of the parallax.

 

These scripts are the ones I use and of which the guide is based from::

 

Main Scripts

• Hime's Map Screenshot

This will allow you to copy your work from the editor to make the rest of the process easier if you don't want to build your maps by scratch

 

• Yami's Basic Module Script

Allows the overlay script below to run.

 

• Yami's Overlay Mapping Script

Allows you to manage your parallax images without having to mess around with the editor. I tried other scripts and was one that didn't chunk out all my frames. Pick whichever script works for you.

 

Optional Resources

• Effectus by Source

I highly recommend this script as it will boost the performance of your game tenfold. This is especially important with parallax mapping as you'll take a huge frame rate hit without an anti-lag script. You can also toggle an "Only Parallax Maps" option in the script which will help even more if you do not intend to use the editor mapping -- you can still block your maps out using tiles the same way.

 

• Parallax Blocking Tileset_B

Experimental tileset used for setting player boundaries as well as easily defining zones for regions and passability. Use this in tileset B but make sure that the upper-left corner is set to "Star" passability otherwise the tileset will not work!

 

• Simple General Parallaxing Template (for GIMP users)

Start making fully custom parallax maps by using these four layers as a guide. 

 

• Complex Exterior Building Template (for GIMP users)

Get a head start and use these pre-labelled layers to make highly detailed parallaxes. Recommended for experienced users.



[/url]


This shouldn't take long, so don't worry!

 

1. Copy and Paste the scripts, the order should look something like the following and Effectus (if you have it) should be before your other custom scripts:


 [url=http://s1186.photobucket.com/user/Soul_Blazer7/media/Parallax%20Mapping%20Tutorial/Scripts_zps4vv0ss2g.png.html] Note: The scripts must be above Main Process as shown here!                                                                                                                                                                              

 

2. Double check to make sure you have reserved switches 1-4 for Yami's Overlay Script. If your project is already using switches then you will need to assign new values for the script.


[/url] For new projects your switches 1-4 should be reserved for Yami's Overlay Mapping!                                                                                      

 


[url=http://s1186.photobucket.com/user/Soul_Blazer7/media/Parallax%20Mapping%20Tutorial/Script%20Switches_zpsqkimt8zg.png.html] You can change the values of the switches in the script if you already have 1-4 used!                                  

 

3. Change the script's default overlay opacity values. By default the script will give opacity depending on the specified type of parallax you add and will prevent you from accurately making your parallax maps using a photo editor. Change all of the values to 255 as shown in the following picture to retain full opacity for each layer. Your layers will have their own opacity depending on what you set them to in the photo editor so this is something you will need to change.


[/url] The "Overlay Opacity" part of the Overlay Mapping script should look like this!                                              

 

4. Go to the directory your project is stored in and go into the "Graphics" folder. In here create a new folder called "Overlay". This will be essential to adding maps into your project!


[url=http://s1186.photobucket.com/user/Soul_Blazer7/media/Parallax%20Mapping%20Tutorial/Folders_zps59w33zro.png.html] You need to create a sub-folder in your project's Graphic's folder named "Overlay"                                      



[/url]


You will need to set the canvas to the exact size of the map you're working with. Each block of space is 32x32 pixels and this rule must apply for each tile space you want to use for parallax mapping. For example if you have a 17x13 map (standard) then you will need to make sure that your canvas is 544x416 pixels.

 

If you are already using an image to base your parallax map from then you will not need to worry about canvas size unless you decide to make changes. If you do need to make changes then you can edit the canvas size under the "Image" tab by selecting "Canvas Size..."


[url=http://s1186.photobucket.com/user/Soul_Blazer7/media/Parallax%20Mapping%20Tutorial/Canvas%20Size%20Select_zpsoizeddqo.png.html][/url] You can change the canvas size if you need to. Remember, each tile is 32x32 pixels!                    



[url=http://forums.rpgmakerweb.com/index.php?/topic/43583-cvincents-parallax-mapping-guide/]


Grids are extremely important to parallax mapping as it is the source of the entire amount of usable space in your map. You will need to adjust the grids and make them functional before starting to map.

 

1. Under the "Image" tab, select "Configure Grid..."


[/url]                                                                                                                                                                                                                                                              

 

2. Change the values of "Spacing" to a width and height of 32 pixels. Your page should look like this:


[url=http://s1186.photobucket.com/user/Soul_Blazer7/media/Parallax%20Mapping%20Tutorial/Configure%20Image%20Grid_zpsxrizlunw.png.html] If you type 32 under Width and click OK, the height will automatically adjust. This saves you seconds of time!                                              

 

3. Under the "View" tab make sure both "Show Grid" and "Snap to Grid" are checked and active. This will show individual tile space and will automatically snap tiles to that space. If you require more precise object placement then turn off "Snap to Grid".


[/url][url=http://s1186.photobucket.com/user/Soul_Blazer7/media/Parallax%20Mapping%20Tutorial/Snap%20to%20Grid_zpsu0cwtwoo.png.html] Both "Show Grid" and "Snap to Grid" should be checked!                                                                                                    



[/url]


Layers are used to put objects in front of or behind another simply by moving the layer up or down the list. Layers of which are listed above will be above those below it. Using layers will allow you to make adjustments without forcing you to worry about making mistakes, I would recommend using a layer per each object type in your parallax map.

 

• Layer Organization -- Layer Order

For simple parallax maps you may only need a few finished layers depending on how far into detail you want to go. Here is an example of how the layers should be set up.

 

Shadows & Lighting

Above Player

Below Player

Ground Layer

 

In this instance of layering your ground layer will include your floor and walls. Items that are on the "Below Player" layer will be ground and wall detail.

 

• Layer Transparency -- Alpha Channels

In order to make a layer transparent so that the one below it is made visible, right click the layer you want to add transparency to and click "Add Alpha Channel".

 

Alternatively this option is made available when creating a new layer. Your first layer created in the editor will have an alpha channel already made.


[url=http://s1186.photobucket.com/user/Soul_Blazer7/media/Parallax%20Mapping%20Tutorial/Create%20a%20New%20Layer_zpsyd7giddd.png.html]                                                                                                                                                                                                                                                    

 

If you are creating a new image from scratch it will not have an alpha layer, you will need to add one using the method above and then clear the layer if you do not want the whole layer coloured already.

 

• Layer Transparency -- Opacity

If you want to change how well the player can see through a layer, apply the desired amount of opacity by using the slider above the layer box.


[/url]                                                                                                                                                                                                                                                                          

 

• Activating/Deactivating Layers

Toggling layers is effective if you want to work on something behind a layer that may otherwise be blocking your view. When merging or exporting specific layers you will need to make sure the layers that you do want to merge/export are visible (more detail in the next part). To toggle the view of a layer click the eye icon. If the layer is deactivated there will be no icon but there will be a box you can click in its place that will become visible if you hover over it.




[url=http://s1186.photobucket.com/user/Soul_Blazer7/media/Parallax%20Mapping%20Tutorial/Layer%20Toggling_zpspgl5lynt.png.html] In this example the "Shadows & Lighting" layer is deactivated and the "Above Player" layer is on. To reactivate a layer click where the eye icon would be.                            

 

 

• Merging Layers

To merge specific layers they will have to first be visible. As explained above you will need to toggle which ones you want to be active for the merge. Once you have selected the layers you want to merge, right click any of those layers and select the "Merge Visible Layers..." option. This will merge all of the layers in the order they are set in. Any layer that is above the other will be merged down into a single layer. It is wisest to keep layers that are above the player separate from those that are below the player.



[/url]


You can start a parallax map by creating a foundation in the VX-Ace editor by using Tsukihime's map screenshot to copy an image that can then be used in a photo editor. Here is the process in which I would recommend starting one:

 

1. Create the foundation of your map by planning a layout using floor and wall tiles in the editor. If you plan on doing custom shadows and lighting then use the shadow pen to remove the auto-placed shadows. In this screenshot I intentionally left out some of the ground space near the water because the sand tile was clipping too far in to the land making it look strange. This will be fixed further in the process.


[url=http://s1186.photobucket.com/user/Soul_Blazer7/media/Parallax%20Mapping%20Tutorial/Map001_zpsm4uc6szu.png.html]                                                                                                                                                                                    

 

2. Spawn yourself in-game on the map and hit F7 to take a mapshot. It will be saved in your project directory in a folder called "Mapshots".

 

3. Open the file using GIMP or your preferred photo editing software by right clicking the image and selecting "Open with"

[/url]

 

4. Create your layers and configure your grid

 

5. Open your tileset(s) in your photo editor. For RTP users here is a common path for finding RTP resources:

[url=http://s1186.photobucket.com/user/Soul_Blazer7/media/Parallax%20Mapping%20Tutorial/RTP%20Path_zpsjrwljwe2.png.html]

 

6. Configure your grids for the tilesets as well! They should also be 32x32. This will make grabbing specific tiles much faster.

 

7. Make tile adjustments on the ground layer of your map if you need to. In this picture I put a layer underneath the ground layer to quickly patch in the missing tiles. I created a simple 32x32 tile using about half grass and half sand to make the adjustments much quicker.


[/url] It helps to mash tiles together to speed up your editing process!                                                                                                                                                                                                              

 

8. Merge the two layers together to create a seamless fix.


[url=http://s1186.photobucket.com/user/Soul_Blazer7/media/Parallax%20Mapping%20Tutorial/Map001%20Fixed_zpseksirqfi.png.html]                                                                                                                                                                                    



9. Add detail to your "Below Player" layer to give the environment a bit of extra life and colour. You can create as many layers as you like to stack detail, all you'll need to do is merge the layers down later! You can add and edit as much as you'd like, but be mindful that you do still need to follow the rules of map blocking.

 


[/url] Note: You can paste large tiles as normal if the player is not going to walk behind them.                                        

 

10. Take the objects that would be above the player when they are walking and place them in a layer above all others named "Above Player".


[url=http://s1186.photobucket.com/user/Soul_Blazer7/media/Parallax%20Mapping%20Tutorial/Map%20Part%203_zpsu4bhe8vo.png.html] Note: You should now have three layers in total! (Ground, Below Player, Above Player)                                          

 

11. Lastly merge your "Ground" layer and your "Below Player" layer to become a single layer.



[/url]


• Exporting Specific Layers

Only visible layers will be exported when selecting the option, so be sure that all of the layers you want to be copied onto your image are visible before moving forward! If you want to have multiple layers exported in the same project then simply toggle off the layers you don't currently need and reverse the process.

 

Note: With the settings from this guide you will only need to export .png files. These will save your transparency which is something you do want!

 

1. Toggle the layers you want to export as visible

 

2. Export individual main layers as .png files in your "Overlay" subfolder in the "Graphics" folder of your project's directory.


[url=http://s1186.photobucket.com/user/Soul_Blazer7/media/Parallax%20Mapping%20Tutorial/Export%20As_zpsspzbfkkt.png.html][/url]                              

 

3. You should now have a Ground.png and Above Player.png both in your Overlay folder. Now you'll need to organize the layers by giving them names relevant to their layering in the game. This part of Yami's Overlay script can be used for reference:

 


[url=http://s1186.photobucket.com/user/Soul_Blazer7/media/Parallax%20Mapping%20Tutorial/Prefix_zpsg2llodq1.png.html][/url]                



IMPORTANT: Rename your "Above Player" layer as shadow.png -- Because we edited the opacity shadow will become our layer for objects that are above the player.

 

For example, if your first map is MAP001, your files should be named like this:

ground1-1.png

shadow1-1.png

 

Your layers will automatically be added to the map!



[url=http://s1186.photobucket.com/user/Soul_Blazer7/media/Parallax%20Mapping%20Tutorial/Path%20Blocking_zpslzsj0laz.png.html]


This is a simple but important part to finishing your parallax mapping! Now that your layers have been added to your project all you need to do to finish things is to block the player's movement as you would in a regular tile-based map.

 

1. Using the editor, block the player's movement using X and O pathing tiles, this can be any form of wall or ground tile that prevents or allows the player to move. For the most part you shouldn't need to use "Star" pathing tiles as your above player image has already been set.

 

Simply block the map as if it were a regular tile-based map, you can use fewer tiles for this and don't need to put tons of detail in. You can do this part whichever way works best for you.

 

2. Load into the game and test to see if your blocking works. If not, make adjustments to your parallaxes and/or your blocking.

 

Here's an example of how the blocking should look like:


[/url]                                                                                                                                                                                    



 

 

[url=http://forums.rpgmakerweb.com/index.php?/topic/43583-cvincents-parallax-mapping-guide/]


This part of the guide will be updated soon!



[/url]


This part of the guide will be updated soon!



[url=http://forums.rpgmakerweb.com/index.php?/topic/43583-cvincents-parallax-mapping-guide/]


This part of the guide will be updated soon!



[/url]


This part of the guide will be updated soon!



[url=http://forums.rpgmakerweb.com/index.php?/topic/43583-cvincents-parallax-mapping-guide/]


This part of the guide will be updated soon!



[/url]


• Layer Masking

Using layer masks will allow you to make shadows and lighting much more easily than by doing everything by hand or by creating extra layers. By creating a layer mask you are essentially making a sub-layer of the same image you have selected while retaining some of its original properties. 



 

 

[url=http://forums.rpgmakerweb.com/index.php?/topic/43583-cvincents-parallax-mapping-guide/]


• Necromedes

Thanks for teaching me how to parallax from your livestreams! With your help I was able to start parallax mapping with a much easier start.

 

• Tsarmina

I learned about grunge texture mapping from one of your posts, it's super useful!



 

Have questions, opinions or suggestions?

 

Feel free to post your thoughts! Message me or add me on the forums if you need personal assistance, I'll try to help if I can.

 

 


While you're here why not check out my project and show it some support?


Highlight the image and press CTRL+C then use CTRL+V to paste it in your signature.




[/url]



 

Text images created at [url=http://cooltext.com/]cooltext.com

[url=http://cooltext.com/][/url]


本贴来自国际rpgmaker官方论坛作者:DankPopNLocks处,因国际论坛即将永久关站,为了存档多年珍贵资料,署名转载到本论坛存档,由于官方帖子为英文原帖，需要中文翻译请点击论坛顶部切换语言为中文就可以将帖子翻译成中文浏览,方便大家随时查看,原文地址：https://forums.rpgmakerweb.com/threads/cvincents-parallax-mapping-guide.43583/