Chickan 117 19 Posted February 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. 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. 11 sanggameboy, TerraCaveman, Dymdez and 8 others reacted to this Quote Share this post Link to post Share on other sites
Kev 0 Posted April 9, 2013 Been trying to figure out parallaxing forever, thank-you! Quote Share this post Link to post Share on other sites
Chickan 117 19 Posted April 11, 2013 Glad it helped you out Quote Share this post Link to post Share on other sites
magic2345 252 Posted April 11, 2013 (edited) 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 Quote Share this post Link to post Share on other sites
Chickan 117 19 Posted April 12, 2013 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. Quote Share this post Link to post Share on other sites
magic2345 252 Posted April 12, 2013 (edited) 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 Quote Share this post Link to post Share on other sites
Vaigh 1 Posted May 6, 2013 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)? Quote Share this post Link to post Share on other sites
Chickan 117 19 Posted May 6, 2013 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 Quote Share this post Link to post Share on other sites
Vaigh 1 Posted May 6, 2013 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! 1 Chickan 117 reacted to this Quote Share this post Link to post Share on other sites
Chickan 117 19 Posted May 7, 2013 (edited) ghjhgj Edited May 7, 2013 by Chickan 117 Quote Share this post Link to post Share on other sites
Galv 1,387 Posted May 7, 2013 Chickan, please don't pose spam like this... Quote Share this post Link to post Share on other sites
Chickan 117 19 Posted May 7, 2013 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 Quote Share this post Link to post Share on other sites
RetroExcellent 369 Posted May 9, 2013 A suggestion to avoid autotiles looking square is to use your overlay tile to cover the edge with 'land'. It is pretty that way. 1 Chickan 117 reacted to this Quote Share this post Link to post Share on other sites
Chickan 117 19 Posted May 9, 2013 You're not wrong there. I find that especially useful in dungeons as, unlike towns, the sharp edges feel more out of place there. Quote Share this post Link to post Share on other sites
atfyntify 0 Posted August 6, 2013 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? Quote Share this post Link to post Share on other sites
Riff 62 Posted August 6, 2013 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. 1 Chickan 117 reacted to this Quote Share this post Link to post Share on other sites
Chickan 117 19 Posted August 6, 2013 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? 1 atfyntify reacted to this Quote Share this post Link to post Share on other sites
atfyntify 0 Posted August 9, 2013 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 Quote Share this post Link to post Share on other sites
Chickan 117 19 Posted August 10, 2013 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? 1 atfyntify reacted to this Quote Share this post Link to post Share on other sites
atfyntify 0 Posted August 10, 2013 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!! Quote Share this post Link to post Share on other sites
Duranette 0 Posted May 10, 2014 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. Quote Share this post Link to post Share on other sites
Dilvish 7 Posted May 30, 2014 Is Yami's script better than this one? http://www.rpgmakervxace.net/topic/258-overlay-mapping/ Which should I use? Quote Share this post Link to post Share on other sites
Chickan 117 19 Posted May 31, 2014 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 Quote Share this post Link to post Share on other sites
Dilvish 7 Posted May 31, 2014 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. Quote Share this post Link to post Share on other sites
Dilvish 7 Posted June 3, 2014 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? Quote Share this post Link to post Share on other sites