How to make maps using QMap

Joined
Feb 18, 2015
Messages
560
Reaction score
296
First Language
English
Primarily Uses
RMMV
This tutorial covers my method of making maps using QMap. This is not the "only" or "right" way, this is just my method.
For those not familiar with QMap, it's an external map editing tool that lets you define collision for the map objects as well as conditions. It is made to work with QMovement, which is a plugin that adds pixel movement as well as custom collision for events.
This tutorial will cover both my method for outdoor maps and interior maps (as there are some techniques that I use for one type that don't get used for the other type).
Requirements:
  • QPlus.js (the core plugin, needed for all Qplugins), QMovement.js, QMap.js, the QMap Editor - You can get these from this thread: https://forums.rpgmakerweb.com/index.php?threads/qplugins-latest-qabs.73023/
  • Image editing program - In this tutorial I will be using GIMP, but you can use whichever program you wish as long as it has grids, layers, and transparency
  • Tileset of your choice - QMap can work with any tileset, including the RTP. In this tutorial, I am using Celianna's Ancient Dungeons tiles (which can be purchased on Steam, on this forum, or directly from Celianna's website).
Recommended:
I highly recommend reading through this thread before following my tutorial, as it covers some parallax mapping techniques that I will be using: https://forums.rpgmakerweb.com/inde...for-beginners-step-by-step-walkthrough.47272/ Even though it was made for RPG Maker VX Ace, a lot of the techniques still apply to parallax mapping in RPG Maker MV.

Optional:
All three of these plugins are also available from the same thread that QPlus, QMovement, and QMap are available from.
  • QM+CollisionMap.js - This allows you to create an image that defines collision for the map. I will be using this plugin in this tutorial, however you do not need to use it.
  • QM+RegionColliders - This allows you to define a collider and have it applied to a specific region. For instance, you can define a 48x48 collider and assign it to Region #3, so that anywhere you place Region #3 will have a 48x48 collider on it. You can also use this to override tile collision to make specific regions walkable, such as allowing a player to walk across water in a specific area.
  • QSprite - This allows you to have spritesheets of any size, as well as having sprites that can play different poses.
Before you create your maps, you'll want to make sure your game has:
  • A "QMaps" folder in the data folder
  • A QMap.json file, also in data (you can just create an empty file and save it as a .json, the QMap Editor will fill out the file as you create maps)
Otherwise you will get an error when you try to save your map (which I recommend doing very often, as sometimes the QMap Editor will undo things you have done when you switch from it to another window).
You'll also want to decide where you're saving the images you use in the QMap Editor. They need to be saved to your game's directory so that QMap.js can access them. I recommend creating their own folder so that they aren't mixed in with other images.

To start with, I create a rough "sketch" of a map directly in RPG Maker MV. This helps me get a feel for the map's layout. I do not add details from the B-E pages, as I do that in a later step. You can add B-E details if you want, if it better helps you figure out how you want the map to look.
From here, I will split this tutorial into a section for my outdoor map process and a section for my indoor map process. However, I encourage you to read through the outdoor section first either way, as many of the techniques I use for outdoor maps are also used when I create indoor maps.

Outdoor maps:
Once I'm happy with the map's layout, I right-click on the map and click "Save As Image". Note: The image that gets saved will not be the same size as the map is in the editor. You will need to resize this image in your image editing program.
After it's been resized, you have a couple options. If resizing it did not lose any details or drastically change the appearance of the map, you can continue onto the next step. However, if resizing it causes distortions or loss of detail, you will need to remake the map in your image editing program. (I do this even though GIMP can resize the image without detail loss, because it makes the next steps easier.)
Open all of the tileset images you used to make that map. For autotiles, make the grid 24x24. Otherwise the grid will be 48x48. Make sure that snapping to the grid is turned on.
If this is your first time using QMap, you'll also want to open all of the B-E images you want to use. Set their grids to 48x48 and turn on grid snapping for them as well.
Set the resized map layer to around 50% opacity. Then start copying and pasting in the pieces you need to recreate your map. I recommend having different layers for each grouping, as it will make setting up the collision easier. For the outdoor map, I would have the grass as its own layer and then the cliffs as another layer.
For outdoor maps, you'll want to create a path as per the method shown in the parallax mapping tutorial I linked up at the top, but with a key difference: I always make the path its own layer.
Make the grass layer invisible, and create a new layer. Following the parallax mapping tutorial, either create a brush or just copy the segment of the path tile, and use the Clone Tool to brush the path on the new layer while following the direction of the path in your original map image.
Then, like in the parallax mapping tutorial, create another layer that is filled with the gray color (hex code #808080). Right-click on the path layer, and select its alpha. Then, using pure black (and the pencil tool), draw over that area on the gray layer. I do this because it is much easier than freehand drawing it. From there just follow the tutorial's method of setting up the path.
At this point, you no longer need the resized map image layer, so you can delete it to clean up your layers.
If you're using QM+CollisionMap, create a new layer and put it above all the other layers. Set its opacity to about 50%. Select the alpha of the cliff layer, use the pencil tool (with a generic circular brush that doesn't have any fuzziness), set the color to red (it doesn't have to be exactly #ff0000, but that's what I use), and color over that section on the top layer. Erase details or add them as needed.
At this point, you could continue to the QMap Editor and add in your map objects as they are. However, I always like to add custom shadows to my maps, so I will cover that here as well.
Create a new layer, and put it below the collision layer. Set this new layer's opacity to somewhere between 45% and 50% (you can also make it lower or higher, depending on your preference). Select the areas you want to be shadowed, as well as a few pixels past the boundaries (as shown in the image below) - otherwise blending the image will make the shadows be erased at the edges.
Then switch to the eraser and select a new brush that has speckling (in GIMP, I use the "grass" brush) and decrease its size. I don't have a set size for this, because it depends on the size of the shadows and on whether any other shadows are nearby. Select one patch of shadow at a time for this, to avoid accidentally erasing parts of the shadows you don't want to erase. Then erase the borders of the shadows. Which borders you erase depends on the angle of the sunlight on your map, but in this case I used the default RPG Maker angle. If the shadows still look too square, increase the eraser's strength. Eventually you should get something like this.
Now that the shadows' shapes have been rounded out, you'll want to blur the shadow layer. In GIMP, the type of blur I use is a Gaussian Blur (Filters>Blur>Gaussian Blur). Make sure the X and Y are linked (otherwise the blurred shadow looks weird). For smaller shadows I set the X and Y to 5 (anything larger blurs them to the point they're nearly invisible), and for larger ones I set X and Y to anywhere from 15 to 35 for larger shadows. Then apply the filter to the shadow layer.
Then you can erase the extra pixels of shadow (so you don't have shadow on the top of the cliff).
Now you have all the layers you need. If you haven't already, merge the path layer and the grass layer. Then merge the cliff layer with the grass layer (unless the other side of the cliff is visible on this map, then you'll leave the cliff as its own layer - more on that in the indoor map section). Then save each layer as its own image in the folder you created earlier, with the exception of the collision layer. The collision layer instead goes in the folder you specified in the Folder parameter of QM+CollisionMap.js. Remember what you named the collision layer, you'll need it for when you connect the layer to the map.
Now open the QMap Editor. Click "Load" and select the Game.rpgproject file for your game. If the map you're working on doesn't show up in the map list, save your project a couple times to force the map list to reload.
Click on that map in the editor. The map will have no objects, and the preview will be white. Anywhere you have an event on the map in the editor, a blue "E" will be placed on the preview.
In the "Map Objects" list that appeared when you clicked on the map, click the "+ New" button. Name the new object "Base layer". Set its Z to 1, and leave the X, Y, ScaleX, ScaleY, Angle, AnchorX, AnchorY, and Type alone. Click on "Select File" and find the grass/path/cliff layer.
Repeat the process with the shadow layer, setting its Z to 4. (Alternatively, you can set its Z to 3 and change its AnchorX and AnchorY so that the shadow layer only overlaps the player at certain points. However, this requires making each shadow into its own layer.) Call this layer "Shadow".
I am only noticing now that I didn't quite get all of the shadow layer off of the cliffs. Oops.
This next step will require a lot of work, but it pays off.
Go back to your image editing program and find the details you want to add - trees, rocks, grass, etc. Select one, copy it, and paste it into a new image. Save that image in the QMap objects folder. In this case I'll be using a tree. Now open the object in QMap like you did with the base layer and shadow layer. To make it easier to set up the anchor point, select another object and then select the new object.
(The red dot represents the anchor point)
The AnchorX and AnchorY will depend on the object. I find it helpful to think of it in terms of percentages. An AnchorY of 1 means it will be at the bottom of the box, while 0.5 will be halfway through the image.
Another thing to keep in mind is that you want the anchor point to be on the "back" of the object. As you can see with the tree trunk, the red dot is not at the bottom of the trunk, but rather at where the "back" would be if the tree were a 3D model.
Next you'll want to create the collision for the object. You'll do this in the Notes section, using this format:
Code:
<collider:[shape],[sizeX],[sizeY],[offsetX],[offsetY]>
OR
<colliders>
[collider type]: [shape],[sizeX],[sizeY],[offsetX],[offsetY]
[collider type]: [shape],[sizeX],[sizeY],[offsetX],[offsetY]
</colliders>
For "poly" shaped colliders, the format will instead be this:
Code:
<collider:poly,(x,y),(x,y),(x,y)>
OR
<colliders>
[collider type]: poly,(x,y),(x,y),(x,y)>
</colliders>
A collision preview will appear on the object in the QMap Editor.
(More information about notetags can be found here: https://quxios.github.io/plugins/QMap/qmap-editor-notes)
The collider I used for the trees isn't exactly the right size - ideally it'd be based off the bottom of the tree - but it shows the principle.
For objects like trees, rocks, and whatnot, set their Z to 3. For objects that you want being below the player, set their Z to 2 or 1.
Now that the anchor point and collision are set up, move the object where you want it to be. You can hold alt to keep the object's position from snapping to the grid. The lock icon means that you can't move the object. I recommend using this once you've placed an object where you want it to be.
Repeat this process with the other objects you want on the map. You can right-click on an object in the Map Objects list to duplicate it.
The QMap Editor can also handle sprites and animated objects (so long as every part of the graphic is part of the animated object). It allows you to set the speed at which the animation plays.
It can also handle QSprites. (If you select a QSprite as the image file, the QMap Editor will automatically change the "Type" dropdown to a "pose" dropdown where you can select the pose you want it to play.)
This is the map I came up with:
Now, add the finishing touches. If you're using QM+CollisionMap, add this tag into the map's notes:
Code:
<cm:FILENAME>
Where "filename" is the name of your collision image file without the file type extension. Ie, if you called it Map02Collision.png, you would put <cm:Map02Collision> in that map's notes.
Add any screen tints, lighting effects, and whatever else to the map. For screen tints, I always reference this tutorial: https://rpgmaker.net/tutorials/911/. While the images no longer appear and it was made for RPG Maker VX Ace, the tints themselves work perfectly fine in RPG Maker MV.
When you're done, you get a map like this:

Indoor maps:
My techniques don't change much between outdoor and indoor maps. The main difference is that I borrow one of my indoor techniques to use for outdoor maps, when the player can walk around behind a cliff face as well as in front of it. For that reason, I suggest reading through the section dedicated to making outdoor maps first.
As with before, I start by figuring out the layout of the map. I don't add other details like tables or chairs, I just figure out where the walls, floors, ceilings, and openings are.
Once you have your editor version ready, I follow the same "recreating the map in your image editing software" steps from the outdoor map portion of this tutorial. However, there is a key difference: with indoor maps, I separate out the ceiling and the walls.
However, the ceiling and wall near that back room are made to look different. I paste in the closed version of the door graphic to use as a reference, and then cut away the parts of the wall graphic that overlap the door. Then I change the ceiling so that it continues over where the door is. The result, with the door graphic hidden, looks like this:
Because of how this segment of the wall will be set up in the QMap Editor, it gets separated into its own layer. The rest of the walls are merged with the floor layer, and all of the ceiling is one layer.
The individual wall layer gets saved as its own image that is the size of the layer (in GIMP this means selecting the layer, copying it, and then pressing Ctrl+Shift+V). You don't need to do this with the floor/wall, ceiling, or shadow layers.
The floor/wall layer is set to a Z of 1, the ceiling layer is set to a Z of 5, and the shadow layer is set to a Z of 4.
For this map, I actually separated that shadow by the kitchen into its own image so that it wouldn't display over the door. This also has the added bonus effect of showing the shadow first under the player and then above the player.
This is how I have set up the wall object:
Again, now that the layout is set up, I start adding details to the map. For things like windows, I set their Z to 2.
This is the map I came up with:
The fork wouldn't rotate properly in the editor, so I had to rotate the original image and save that as a new image to use in this map.
Normally I would create new tables/counters/etc. as needed to fit the map so that the decor would better fit the map, but in this case I was just trying to show what can be done with the QMap Editor.
Once more, add some lighting effects and screen tints and whatever else you want to add to spice up the map.
This is the final result:

I hope that this tutorial proves useful to anyone wanting to use QMap but uncertain as to where to start. As I said at the beginning, this is not the only or "right" way to make maps in QMap, it's just my method of doing that. I encourage you to experiment with the QMap Editor and see what you can accomplish, and discover your own unique mapping method and style.
 

TheSlyder

Villager
Member
Joined
Mar 3, 2020
Messages
15
Reaction score
1
First Language
English
Primarily Uses
RMMV
I've been messing with the "Q-suite" of plug-ins for a bit and honestly most of them seem like the perfect option for avoiding that "rpg maker game" feeling. The help text says that using map colliders is really intensive though and can cause a lot of lag. Have you found that to be true? I've been avoiding it for that very reason but if it isn't going to make a big difference then it would be much easier than region collision.
 
Joined
Feb 18, 2015
Messages
560
Reaction score
296
First Language
English
Primarily Uses
RMMV
I personally haven't had too much lag with QM+ColliderMap, as far as I can tell. That might be more of a warning that it could potentially be resource intensive (or perhaps I've just had the luck of having computers that have less problems with it). There is also the advice it gives for how to make the navigation calculation less resource intensive (if memory serves, the advice is to not leave open spaces where the player shouldn't be able to reach).
 

Lanzy

Veteran
Veteran
Joined
Feb 29, 2020
Messages
128
Reaction score
54
First Language
English
Primarily Uses
RMMV
Hi there,

first off: Thank you for the tutorial. I really appreciate all the work you put into this.

Unfortunately, I cannot get QMap Editor to run. I followed the instructions on https://github.com/quxios/QMapEditor and also updated Microsoft Visual Studio, just like it tells me to on here https://github.com/nodejs/node-gyp#on-windows but when I run the cmd console to install npm I get an error log something along the lines of
"QMapEditor-master\node_modules\rabin-bindings\src\rabin_wrap.cc(11,54): warn
ing C4996: 'v8::object::Get':" is declared outdated.

Am I missing something? I've been struggling with this now for over 2 hours...

Thanks in advance for any help!
 
Joined
Feb 18, 2015
Messages
560
Reaction score
296
First Language
English
Primarily Uses
RMMV
Sorry, I'm not sure how to install it when it comes to running cmd commands, I've always used the prebuilt version.
 

Lanzy

Veteran
Veteran
Joined
Feb 29, 2020
Messages
128
Reaction score
54
First Language
English
Primarily Uses
RMMV
Omg I'm such a dumbass. I just realized that a prebuilt exists. I thought it meant pre-build as in previous version. I don't know why I thought that. Thank you, now I can follow your tutorial!
 

Pasteleptic

Villager
Member
Joined
Oct 4, 2014
Messages
13
Reaction score
5
First Language
English
Primarily Uses
RMMZ
Thanks for the tutorial. How do you feel QMap compares to something like Tiled?
 
Joined
Feb 18, 2015
Messages
560
Reaction score
296
First Language
English
Primarily Uses
RMMV
Personally, I've never used Tiled (or is it TileD? I've seen it stylized both ways). I know someone who has used it, and I've seen things here and there about what it can do. But beyond that, I don't know too much about it.
 

Lanzy

Veteran
Veteran
Joined
Feb 29, 2020
Messages
128
Reaction score
54
First Language
English
Primarily Uses
RMMV
Edit:

Ignore this message
 
Joined
Feb 18, 2015
Messages
560
Reaction score
296
First Language
English
Primarily Uses
RMMV
If memory serves, the collision plugin has a parameter that makes the collision show by default. Turning that off means it won't show during playtesting. (You can see it at any time during playtest by pressing f10.)
I'm pretty sure the collision only shows in playtest mode if you have that parameter on, so a deployed copy wouldn't show the collision. (I always keep that parameter off, so I don't know for certain.)
 

Lanzy

Veteran
Veteran
Joined
Feb 29, 2020
Messages
128
Reaction score
54
First Language
English
Primarily Uses
RMMV
If memory serves, the collision plugin has a parameter that makes the collision show by default. Turning that off means it won't show during playtesting. (You can see it at any time during playtest by pressing f10.)
I'm pretty sure the collision only shows in playtest mode if you have that parameter on, so a deployed copy wouldn't show the collision. (I always keep that parameter off, so I don't know for certain.)

wow you are fast. I realized that as soon as I pressed the Reply button. That's why I erased my post.
But thank you anyway. I couldn't figure out how to turn it off. Thanks for your help!
 

Users Who Are Viewing This Thread (Users: 0, Guests: 1)

Latest Threads

Latest Posts

Latest Profile Posts



Made another map, this one even has a cool moving waterfall. I'll have an animated GIF later whenever I'm done adding stuff. :LZSwink:
Back here again?! RPG MAKER, I can't quit you. :kaosigh:
um... why didn't anyone tell how easy it is to add motions to Sideview battlers? I literally copied the last one, changed the name and index, said where it should play, and boom... I've got intro motions.
Lately when I listen to 1970s songs, I always think that the "real world" is still at mid 70s. What we experience now is a futuristic dream. With this point of view, even 80s and 90s looks super futuristic. :D

Forum statistics

Threads
105,539
Messages
1,014,471
Members
137,221
Latest member
broiderers
Top