- Joined
- Aug 7, 2022
- Messages
- 390
- Reaction score
- 520
- First Language
- English
- Primarily Uses
- RMMV
Introduction
OcRam Layers is a really nice plugin for parallax mapping if you decide to go "all-in" on it (i.e. doing every map this way). It offers very good performance and a nice solution for handling collisions. And once you're using it, it's very simple to add other layers to the map than just a background and foreground (e.g. a slowly scrolling fog, quickly falling pink rain, etc.).
The drawbacks? It wasn't specifically made for just parallax mapping, so setting it up for that takes some effort. This tutorial aims to take you through doing that.
While it does take some work to set all of this up, once you're done you'll have what I believe is both the most performant and the most convenient possible setup for parallax mapping. You'll be able to select the background for each map from the editor, and as long as you use the same name for the foreground, have that applied automatically. You'll also be able to define tile passability in a way that allows you to easily see what tile has what passability (no region ids needed) without being obstructive when working on events.
And with those two "simple" steps, you're done! Add a background by editing map properties and setting "Background Parallax", and in whatever folder you chose earlier add a foreground file named the same as the background, with "-F" added. E.g. if your background is called "forestLevel1.png", call the foreground "forestLevel1-F.png". That's it, you now have parallax maps fully working!
In case the above is not clear, here's a short video showcasing how using this method to set passability might look like:
Note how a single red arrow is enough for the barrel, also preventing the player from going up through it.
Some objects that don't touch the walls still end up with visible Xs. If you want you can also manually replace those with invisible ones - they will still be noticable if you make the Os visible.
And lastly, here's two final things to keep in mind:
Ok, now we're actually done. Please let me know if anything about this tutorial was unclear to you, or if you want to know how to do other things with this setup.
Now all that's left to do is to fire up Tiled/GIMP/Photoshop/other image software and make some maps
OcRam Layers is a really nice plugin for parallax mapping if you decide to go "all-in" on it (i.e. doing every map this way). It offers very good performance and a nice solution for handling collisions. And once you're using it, it's very simple to add other layers to the map than just a background and foreground (e.g. a slowly scrolling fog, quickly falling pink rain, etc.).
The drawbacks? It wasn't specifically made for just parallax mapping, so setting it up for that takes some effort. This tutorial aims to take you through doing that.
While it does take some work to set all of this up, once you're done you'll have what I believe is both the most performant and the most convenient possible setup for parallax mapping. You'll be able to select the background for each map from the editor, and as long as you use the same name for the foreground, have that applied automatically. You'll also be able to define tile passability in a way that allows you to easily see what tile has what passability (no region ids needed) without being obstructive when working on events.
Just to make sure we're all on the same page here: "parallax mapping", not to be confused with the parallax effect, refers to using images as the maps in your game, instead of using the built-in editor to make them from tiles. This generally involves two images: a background image, which will appear below the player, and a foreground image, which is mostly transparent and will appear above the player. This tutorial will show you how to do that on a technical level - it will not teach you how to actually make those images, just how to use them in your game.
It also mostly assumes that you won't be using regular editor-based maps at all. You can still use this tutorial otherwise, but you won't see the performance gains from the tileset system being completely disabled, and the section about collisions will not work for you.
The first step is to, of course, install OcRam Layers. You can get the plugin from this thread. Make sure to read the Terms and Conditions too - most notably the plugin is free for non-commercial use, but requires a 5€ licence otherwise.
Once downloaded, add it to your project. Probably also read the help file, it should help you use the plugin for other layers too. Then set some options like so:
- Set the "Layer image directory" to where you'll want to store your foregrounds. I'd suggest keeping it set to "img/parallaxes", or if you're not using 48x48 tiles, whichever folder you store your in-game parallaxes in. But if you want to keep your backgrounds and foregrounds in different folders you're free to change it to something else.
- In "Layer zIndex", set "Layer 0 zIndex" to 3 (this will be our foreground layer).
- In "Battle layers", set "Layer 0" to false.
- Set "Use only parallax mapping" to true (unless you plan on using some non-parallax maps)
- If you run into any problems, set "Debug mode" to true; it won't solve them, but it will display some more data in the console about what is wrong that will help others with helping you.
Why is layer 0 the foreground? Because we'll be using the editor's "Parallax Background" option for our backgrounds, and then using OcRam Layers to automatically load a corresponding foreground.
It also mostly assumes that you won't be using regular editor-based maps at all. You can still use this tutorial otherwise, but you won't see the performance gains from the tileset system being completely disabled, and the section about collisions will not work for you.
The first step is to, of course, install OcRam Layers. You can get the plugin from this thread. Make sure to read the Terms and Conditions too - most notably the plugin is free for non-commercial use, but requires a 5€ licence otherwise.
Once downloaded, add it to your project. Probably also read the help file, it should help you use the plugin for other layers too. Then set some options like so:
- Set the "Layer image directory" to where you'll want to store your foregrounds. I'd suggest keeping it set to "img/parallaxes", or if you're not using 48x48 tiles, whichever folder you store your in-game parallaxes in. But if you want to keep your backgrounds and foregrounds in different folders you're free to change it to something else.
- In "Layer zIndex", set "Layer 0 zIndex" to 3 (this will be our foreground layer).
- In "Battle layers", set "Layer 0" to false.
- Set "Use only parallax mapping" to true (unless you plan on using some non-parallax maps)
- If you run into any problems, set "Debug mode" to true; it won't solve them, but it will display some more data in the console about what is wrong that will help others with helping you.
Why is layer 0 the foreground? Because we'll be using the editor's "Parallax Background" option for our backgrounds, and then using OcRam Layers to automatically load a corresponding foreground.
As you might have noticed, OcRam Layers uses plugin commands for setting the layers. So if you want a persistent foreground, you'd normally need an autorun event on each map to load it. And when the game gets saved and loaded the foreground will no longer be there, so you'd also need a plugin to somehow run those events whenever a map is loaded.
We won't be doing that. Instead we'll be using a custom script that will automatically set a foreground depending an our current background, no events needed. Of course you don't need any scripting knowledge, I've already written it. What makes this a bit tricky is that this script requires some modification to OcRam Layers, and I can't just distribute a changed copy myself. So, below is a list of changes you'll need to make to
If you don't have one, I recommend grabbing a text editor that shows you line numbers, e.g. Notepad++ (though it should be doable without that, as long as you have a search function).
1. On line 1105, replace
with
2. Below line 873 (the one with
3. At line 1123, replace this function
with this
And finally, either add the following script to a new file and add that as a plugin, or paste it at the bottom of OcRam_Layers.js (below anything else):
We won't be doing that. Instead we'll be using a custom script that will automatically set a foreground depending an our current background, no events needed. Of course you don't need any scripting knowledge, I've already written it. What makes this a bit tricky is that this script requires some modification to OcRam Layers, and I can't just distribute a changed copy myself. So, below is a list of changes you'll need to make to
OcRam_Layers.js.If you don't have one, I recommend grabbing a text editor that shows you line numbers, e.g. Notepad++ (though it should be doable without that, as long as you have a search function).
1. On line 1105, replace
setLayer(l._z, l_old_name, l._scrollX, l._scrollY, l._opacity, l._fixedToMap, 255, "loop:" + l._loopX + "," + l._loopY, "anim:" + l._animFrames + "," + l._animRate, "offset:" + l._offsetXY[0] + "," + l._offsetXY[1]);with
if (l_old_name) setLayer(l._z, l_old_name, l._scrollX, l._scrollY, l._opacity, l._fixedToMap, 255, "loop:" + l._loopX + "," + l._loopY, "anim:" + l._animFrames + "," + l._animRate, "offset:" + l._offsetXY[0] + "," + l._offsetXY[1]);2. Below line 873 (the one with
var _allLayers = [new OcRam_Layer(), new OcRam_Layer(), new OcRam_Layer()];), add a new line with the codewindow.ocramLayers = _allLayers;3. At line 1123, replace this function
JavaScript:
this.extend(Scene_GameEnd, "commandToTitle", function () {
_allLayers = [new OcRam_Layer(), new OcRam_Layer(), new OcRam_Layer()];
_this["Scene_GameEnd_commandToTitle"].apply(this, arguments);
}); this.extend(Game_Interpreter, "command354", function () {
_allLayers = [new OcRam_Layer(), new OcRam_Layer(), new OcRam_Layer()];
_this["Game_Interpreter_command354"].apply(this, arguments); return true;
}); this.extend(Scene_Gameover, "gotoTitle", function () {
_allLayers = [new OcRam_Layer(), new OcRam_Layer(), new OcRam_Layer()];
_this["Scene_Gameover_gotoTitle"].apply(this, arguments);
});
JavaScript:
this.extend(Scene_GameEnd, "commandToTitle", function () {
_allLayers = [new OcRam_Layer(), new OcRam_Layer(), new OcRam_Layer()];
window.ocramLayers = _allLayers;
_this["Scene_GameEnd_commandToTitle"].apply(this, arguments);
}); this.extend(Game_Interpreter, "command354", function () {
_allLayers = [new OcRam_Layer(), new OcRam_Layer(), new OcRam_Layer()];
window.ocramLayers = _allLayers;
_this["Game_Interpreter_command354"].apply(this, arguments); return true;
}); this.extend(Scene_Gameover, "gotoTitle", function () {
_allLayers = [new OcRam_Layer(), new OcRam_Layer(), new OcRam_Layer()];
window.ocramLayers = _allLayers;
_this["Scene_Gameover_gotoTitle"].apply(this, arguments);
});And finally, either add the following script to a new file and add that as a plugin, or paste it at the bottom of OcRam_Layers.js (below anything else):
JavaScript:
void (alias => {
Scene_Map.prototype.onMapLoaded = function () {
alias.call(this);
if (!window.ocramLayers || !$gameMap._parallaxName) return; //We're either in the main menu or a map without a background. Either way, nothing to do here.
let foregroundName = $gameMap._parallaxName + '-F'; //Feel free to change -F to any other string you'd like to denote a foreground
if (window.ocramLayers[0]._imgName !== foregroundName) { //The foreground might already be correct, e.g. if we're back from a menu
$gameMap._interpreter.pluginCommand('oc_layer', ['0', foregroundName]);
}
};
})(Scene_Map.prototype.onMapLoaded);And with those two "simple" steps, you're done! Add a background by editing map properties and setting "Background Parallax", and in whatever folder you chose earlier add a foreground file named the same as the background, with "-F" added. E.g. if your background is called "forestLevel1.png", call the foreground "forestLevel1-F.png". That's it, you now have parallax maps fully working!
Of course, one thing you probably want in your game is areas where the player can and cannot walk. There are of course plugins out there that allow you to define map regions with different passability settings - and those are your only option if you want to keep the ability to make non-parallax maps. But if you are going all-in, there is a better way, described here.
Though the tiles no longer render in the game, we can still use them to define passability! OcRam's plugin post outlines a way to do that, though I'll show you a slightly improved one.
First, close the editor. Download the zip file attached to this post and extract it somewhere. Go to your project files. In the data folder, there's a file called Tilesets.json. It contains data about all tilesets in your project. Delete it - where we're going we don't need tilesets! (do back it up if you've done work on it though). Replace it with the Tilesets.json from the zip file. Now go to the folder img/tilesets, and, you guessed it, delete all the files there. Well, you don't actually have to do that, but since you won't be using them, they'll just needlessly make your game larger. Place collisions.png from the zip file in that folder.
Now, open the editor, and if you already have some maps created, make sure to change their properties to use the new collisions tileset.
All your old tilesets should have been replaced with a single new one. But why? Well, it's what we'll be using for defining collisions. You can see the properties for each tile in the tileset editor, but in short, here's a graphic explaining what each tile does:
Those are adapted from OcRam's tileset image (which is luckily free to use for any purpose, so I could just take it and modify it), though I made them transparent, and also set up the collisions in Tilesets.json so you don't have to. Now, you can simply place those tiles on your map to define where the player can go and where they can't. They should cover nearly all options, but if you ever need, say, a bush with limited passability, you can always add one. Note that passability between two tiles goes both ways - if a tile doesn't allow you to go down, the tile below it won't allow you to go up either, even if it doesn't have any restrictions itself.
Remember - those tiles will not render in the game, they will only be visible in the editor. Only their collision settings will affect the game. You can freely modify collisions.png to change the symbols to ones you like better.
Once you're done setting up collisions, use the flood fill tool to replace all your Os with the invisible freely passable tile, and all Xs with the invisible impassable tile - this will make your editor look a lot cleaner, allowing you to focus on making your events. If you ever want to modify passability, use the flood fill tool again to replace them with the visible versions.
Though the tiles no longer render in the game, we can still use them to define passability! OcRam's plugin post outlines a way to do that, though I'll show you a slightly improved one.
First, close the editor. Download the zip file attached to this post and extract it somewhere. Go to your project files. In the data folder, there's a file called Tilesets.json. It contains data about all tilesets in your project. Delete it - where we're going we don't need tilesets! (do back it up if you've done work on it though). Replace it with the Tilesets.json from the zip file. Now go to the folder img/tilesets, and, you guessed it, delete all the files there. Well, you don't actually have to do that, but since you won't be using them, they'll just needlessly make your game larger. Place collisions.png from the zip file in that folder.
Now, open the editor, and if you already have some maps created, make sure to change their properties to use the new collisions tileset.
All your old tilesets should have been replaced with a single new one. But why? Well, it's what we'll be using for defining collisions. You can see the properties for each tile in the tileset editor, but in short, here's a graphic explaining what each tile does:
Those are adapted from OcRam's tileset image (which is luckily free to use for any purpose, so I could just take it and modify it), though I made them transparent, and also set up the collisions in Tilesets.json so you don't have to. Now, you can simply place those tiles on your map to define where the player can go and where they can't. They should cover nearly all options, but if you ever need, say, a bush with limited passability, you can always add one. Note that passability between two tiles goes both ways - if a tile doesn't allow you to go down, the tile below it won't allow you to go up either, even if it doesn't have any restrictions itself.
Remember - those tiles will not render in the game, they will only be visible in the editor. Only their collision settings will affect the game. You can freely modify collisions.png to change the symbols to ones you like better.
Once you're done setting up collisions, use the flood fill tool to replace all your Os with the invisible freely passable tile, and all Xs with the invisible impassable tile - this will make your editor look a lot cleaner, allowing you to focus on making your events. If you ever want to modify passability, use the flood fill tool again to replace them with the visible versions.
In case the above is not clear, here's a short video showcasing how using this method to set passability might look like:
Note how a single red arrow is enough for the barrel, also preventing the player from going up through it.
Some objects that don't touch the walls still end up with visible Xs. If you want you can also manually replace those with invisible ones - they will still be noticable if you make the Os visible.
And lastly, here's two final things to keep in mind:
If a map has a background, it must also have a foreground file, or the game will crash. I've never personally ended up making a map with no foreground objects whatsoever, so I don't consider this to be much of an issue, but if you do - let me know! The script could probably be modified to account for that. Though you could also just make a tiny transparent image and use that (it doesn't need to be the same size as the background, it will repeat to fill the map).
If a map has no background, it won't attempt to load a foreground either, so you don't need to worry about this for your test maps.
If a map is smaller than the size of the screen, it might visibly repeat to fill it in-game (since that's what parallaxes in the engine do). Make sure to make your map image larger if you encounter this issue, even by just adding empty space to it.
If a map has no background, it won't attempt to load a foreground either, so you don't need to worry about this for your test maps.
If a map is smaller than the size of the screen, it might visibly repeat to fill it in-game (since that's what parallaxes in the engine do). Make sure to make your map image larger if you encounter this issue, even by just adding empty space to it.
Ok, now we're actually done. Please let me know if anything about this tutorial was unclear to you, or if you want to know how to do other things with this setup.
Now all that's left to do is to fire up Tiled/GIMP/Photoshop/other image software and make some maps
Last edited:
