How to make maps using QMap
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.
Spoiler
https://i.imgur.com/9nJ5j5A.jpg
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.
Spoiler
https://i.imgur.com/LbgnCZg.jpg
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.)
Spoiler
https://i.imgur.com/Yqa5K60.jpg
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.
Spoiler
https://i.imgur.com/jortHYy.jpg
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.
Spoiler
https://i.imgur.com/faxWinP.jpg
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.
Spoiler
https://i.imgur.com/3ae0g3a.jpg
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.
Spoiler
https://i.imgur.com/g39Wxpz.jpg
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.
Spoiler
https://i.imgur.com/0ovVljN.jpg
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.
Spoiler
https://i.imgur.com/57NZ2vy.jpg
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.
Spoiler
https://i.imgur.com/RVHg1nj.jpg
Then you can erase the extra pixels of shadow (so you don't have shadow on the top of the cliff).
Spoiler
https://i.imgur.com/z7YggKb.jpg
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.
Spoiler
https://i.imgur.com/bWOI1yl.jpg
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".
Spoiler
https://i.imgur.com/1vtK3xk.jpg
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.
Spoiler
https://i.imgur.com/UDmBDtO.jpg
(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:,,,,>OR<colliders>: ,,,,: ,,,,</colliders>
For "poly" shaped colliders, the format will instead be this:
Code:
<collider:poly,(x,y),(x,y),(x,y)>OR<colliders>: 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)
Spoiler
https://i.imgur.com/QsWXZbG.jpg
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:
Spoiler
https://i.imgur.com/TeBl9DX.jpg
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:
Spoiler
https://i.imgur.com/Ayl3Aws.png
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.
Spoiler
https://i.imgur.com/lSAK2KZ.png
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:
Spoiler
https://i.imgur.com/tepLibi.png
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.
Spoiler
https://i.imgur.com/6g3KDTV.png
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:
Spoiler
https://i.imgur.com/vPvQJpK.png
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:
Spoiler
https://i.imgur.com/vWz06Ie.png
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:
Spoiler
https://i.imgur.com/KGzNxfb.png
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.
本贴来自国际rpgmaker官方论坛作者:Nat0327处,因国际论坛即将永久关站,为了存档多年珍贵资料,署名转载到本论坛存档,由于官方帖子为英文原帖，需要中文翻译请点击论坛顶部切换语言为中文就可以将帖子翻译成中文浏览,方便大家随时查看,原文地址：https://forums.rpgmakerweb.com/threads/how-to-make-maps-using-qmap.119261/
页:
[1]