Tutorial: Dynamic Mini-Map
Difficulty: Intermediate
RPG Maker: 2000/2003
Author: PepsiOtaku

This is a pretty simple tutorial that will tell you how to make a nice mini-map for your world map screen or dungeon using 2-3 pictures.



Sizing:
First I'll talk a little bit about the map tiles vs mini-map pixels. You have to be really careful in sizing the mini-map vs the map itself. The easiest way to think about making a mini-map is sizing it 1 pixel for every tile. However it won't be very practical if you have a map 100x100 or bigger, because then the mini-map will take up half the screen. In this example, I'll be using a 75x75 pixel mini-map and a 100x100 tile world map.

Creating Pictures:
Take a screencap of your map somehow. A simple way to do this is to select the lower or upper layer in rpg maker, then click on the magnifying glass above the tile selector, and then click on the appropriate zoom option. Adjust the window if you need to to see the whole map. Hit print screen and paste it in your favorite image editor. I used photoshop. From there, crop it so you see just the map, then size it down to 75x75 or whatever size you want it to be. DO NOT put it inside 320x240 size transparent area, as it will bog down your system when you implement it. The other thing you want to make sure is that the image has the exact area the mini-map cursor will float around in. Save it as an indexed PNG file. (image > mode > indexed color in photoshop)


The next image is optional. I created a border, so that the image above could be transparent, and the border won't be. Just make sure the inside has a transparency, and it won't cover up any areas of the map you dont' want shown. My image ended up being 83x83 because I have a 4 pixel border on either side. Again don't leave any unnecessary transparency portions around the image.


The third (or second) image you will need is a small cursor that will track your position. Mine was sized at 3x3 but you can make it any size you want as long as it's square and odd numbered (5x5, 7x7, etc). This is optional, but what I ended up doing is I made 4 different cursors illustrating the direction you were going. Like this:

(up)


(down)


(left)


(right)

Now it's on to the fun stuff!

Programming
You'll need 5 variables. The other 3 are optional.
[XXXX:Xpos] = X-position
[XXXX:Ypos] = Y-position
[XXXX:MapID] = Map ID
[XXXX:MinimapX] = Minimap X-Position
[XXXX:MinimapY] = Minimap Y-Position

Optional:
[XXXX:Terrain] = Terrain ID
[XXXX:MMplaceX] = Minimap placement, X coordinate
[XXXX:MMplaceY] = Minimap placement, Y coordinate


The very first thing you want to do is create a common event called "Position Check" or "Terrain Check" or something. Make it a parallel process and add the following code, using 4 variables

<>Variable Oper: [XXXX:Xpos] Set, Hero X Coord.
<>Variable Oper: [XXXX:Ypos] Set, Hero Y Coord.
<>Variable Oper: [XXXX:MapID] Set, Hero Map ID
<>Store Terrain ID: (V[XPOS],V[YPOS]), [XXXX:Terrain]
<>


The last one isn't needed for this tutorial, but making a variable that stores the terrain number is good practice. This common event will get the map ID and coordinates of where the player is.

Next go to your map and create an event. Make it parallel process and name it something like "minimapcheck." This event simply places the map on the screen, and refreshes the location of the cursor.

If you want the mini-map to show up on the map at all times, ignore this next bit and go down to "Part B". For my mini-map, I wanted it to only show up when the player is in an airship. To do that, add the following code. Also, if you already have code on the map inside "Branch if Airship vehicle," You'll need to keep this inside the same event, or RPG maker will choose to follow one over the other, and you'll run into problems.

Part A
<>Branch if Airship Vehicle
 (Place the code that is in "Part B" here)
: Else Handler
 <>Erase Picture: 30 -- Erases minimap
 <>Erase Picture: 31 -- Erases cursor
 <>Erase Picture: 32 -- Erases border (again, optional)
: End
<>


Part B
 <>Comment: Minimap Check
 <>Show Picture 30: minimap, (XXX, XXX) -- I used (274,194). Set them to variables if you want a global value for various maps. Place it where you want. "30" is just the picture number I used. Change it to whatever you want.
 <>Show Picture 32: minimap-border(XXX,XXX) -- Same coordinates as above. This line is option if you are not using a border. Make sure the picture number is 2 above the minimap.
 <>Call Event: MinimapPos[1] -- We will make this event next
 <>


The Cursor
Here's where the bulk of the coding comes in. Either make another event on the same map, or a common event. Either way, it's gonna be called. I made one on the same map and called it "MinimapPos." Trigger Condition: Action Key, Event Layer: Above Hero.

Now what this event basically does is take the Xpos/Ypos variables, and sizes them down to fit the coordinates of your mini-map, sets those values to 2 more variables (MinimapX and MinimapY), and then places the cursor image on screen to those two variables. Here we go. If you don't want your cursor to change direction, skip Part B.

Part A
<>Variable Oper: [XXXX:Xpos] * , 3 -- This line is for converting your position from 100x100 to 75x75.
<>Variable Oper: [XXXX:Xpos] / , 4 -- This line is for converting your position from 100x100 to 75x75. (100 times three fourths equals 75)
<>Variable Oper: [XXXX:Xpos] + , 237 -- Number I used for this example. You'll need to change this if you want your map positioned on the screen differently. To figure out the number. Subtract half of your mini-map horizontal size from the X coordinate of your mini-map picture (274-37)
<>Variable Oper: [XXXX:Ypos] * , 3 -- This line is for converting your position from 100x100 to 75x75.
<>Variable Oper: [XXXX:Ypos] / , 4 -- This line is for converting your position from 100x100 to 75x75. (100 times three fourths equals 75)
<>Variable Oper: [XXXX:Xpos] + , 157 -- Number I used for this example. You'll need to change this if you want your map positioned on the screen differently. To figure out the number, subtract half of your mini-map horizontal size from the X coordinate of your mini-map picture (194-37)
<>Variable Oper: [XXXX:MinimapX] Set, Var [Xpos]'s Value
<>Variable Oper: [XXXX:MinimapY] Set, Var [Ypos]'s Value
(Ignore this next line if you are moving on to Part B)
<>Show Picture 31, minimap-cursor, (V[MinimapX],V[MinimapY])
<>


Part B
<>Branch if Airship Up Facing
 <>Show Picture 31, minimap-cursor-up, (V[MinimapX],V[MinimapY])
 <>
: Else Handler
 <>Branch if Airship Down Facing
  <>Show Picture 31, minimap-cursor-down, (V[MinimapX],V[MinimapY])
  <>
 : Else Handler
   <>Branch if Airship Left Facing
    <>Show Picture 31, minimap-cursor-down, (V[MinimapX],V[MinimapY])
    <>
   : Else Handler
     <>Branch if Airship Right Facing
      <>Show Picture 31, minimap-cursor-down, (V[MinimapX],V[MinimapY])
      <>
     : End
     <>
   : End
   <>
 : End
 <>
: End
<>


That should do it. Test it out.



Click to Return to the Tutorials Page