Position-Tracking Map Tutorial

Table of Contents:

Introduction:

I'm sure most people have played one game or another of the Final Fantasy series. One of the features that keeps showing up is the world map display. It sits there, in the corner of the screen, with a flashing cursor showing where you are on the world map. As it turns out, it's really not too hard to make one of those in RPGMaker 2000.

Notes:

There's bound to be some confusion as to what I mean when I say "map" -- do I mean the RM2K map, with tiles, or the little display map, that's just a picture? So here are the special terms:
I'll try to explain why I do what I do with notes that are set off from the main block in little boxes. Shorter notes will be bold and blue.

Simple Postition Tracker

  1. Make your display map. It's easiest to make it on an exact scale -- one tile = one pixel.
    Then make your crosshair. It should be either a 3x3 or 5x5 pixel picture. 1x1 is ideal for positioning purposes but it's too small to see. ;-)
    It's probably best to make a dark world map and a light crosshair, or vice versa, for viewing purposes.
    Import both of these into your game using the Raw Materials Editor.
  2. Anywhere on your game map, make an event. It should have the pink square (transparent) for a graphic.
    Priority is Common Char Below/Top.
    Event Start Condition is Parallel Process.
    The event is on the game's world map because that's the only place that the display map should appear.
    Now, in the event commands, you want:
    1. Show Picture. It's on the 2nd page of the event commands.
      Pick a number for it (1 is a good idea) and press the "..." button.
      Choose your display map. Make it partly transparent -- somewhere around 40-50%.
      Pick the map's coordinates. Remember that this is where the center of your map goes, so to have it on the top left of the screen the coordinates should be 1/2 the width for X and 1/2 the height for Y.
      Magnification should be 100%, Tranparency Color should be "Stir."
    2. Set Variable. It's on the first page of the event commands.
      Pick a variable, and name it "MapCursorX" or something like that.
      Choose "Set" from the middle set of options and "Character," "Hero," "X coordinate" from the last set.
    3. Repeat above, except choose a new variable for "MapCursorY" and use "Character," "Hero," "Y coordinate"
    4. Show Picture. Pick another number for the picture.
      Choose your cursor/crosshair. Make it partly transparent. Again, about 50% should do it.
      For position, use your two variables -- MapCursorX for the X coordinate and MapCursorY for the Y coordinate. Don't touch anything else.
    5. Wait. It's on the second page. Put in a 5 so it'll refresh every half-second.
    6. Erase Picture. Also on the second page. First erase your cursor. (Picture 2)
    7. Erase Picture. Now erase your map. (Picture 1)
Whenever you enter the world map your position will show up, and it'll disappear when you enter a town or other area. Putting the start condition on "Parallel Process" means that the entire event will repeat forever until you're off that game map.
You may have to tweak the colors and transparency to make sure you can actually see the display map. If in doubt as to whether the dispaly map is really there, try making a version of it with bright red and blue. Or temporarily make a section of your tiles snow and move so that the display map is over them, since the colors should show up better on white.

This works because of the variables. Setting the variables "MapCursorX" and "MapCursorY" to your Hero X- and Y-coordinates stores the row and column numbers of whatever tile the hero is standing on. These are used for the center position of the cursor. Since the display map is on the upper-left corner of the screen, the pixel row and column number in the display map is the same as the tile row and column number of the hero.

Back to top


Options:

Map Item Activation of Position Tracker

  1. Follow all the instructions for the simple position tracker above.
  2. Go to the Items tab of the Database and create a new item. It should be of type "Switch." Name it whatever you want, but since this is going to be your map item, "Map" is a good name. Make sure that the "Field" box is checked. Put whatever you want in the "Use number of times" box, but "Limitless" is usually a good idea unless you want your map to disappear after a while.
  3. For the switch, click on the "..." button and select a new switch. Name it "UseMap" or something like that.
  4. Go to the Common Events tab of the Database and create a new common event. Call it "Use Map" or something like that. Set the "Event Start Condition" to "Parallel Process" and check the box. Choose the switch you just made, "UseMap." This should have the following event commands:
    1. Erase Picture. This should erase your cursor image.
    2. Erase Picture. This should erase your map image.
    3. Change Switch. For this, use the "..." button to select and make a new switch. Call it "ShowMap" or something like that. Set it to ON/OFF trigger.
    4. Change Switch. For this one, turn OFF your switch UseMap.
  5. Now go to the event you made in step 1. Check one of the boxes labelled "Switch" under "Event Condition" and choose your "ShowMap" switch.
Common events are events that can be called from (almost) anywhere in the game. In this case, using your item "Map" will turn on the "UseMap" switch. This switch starts the common event "Use Map." In this event, it first clears the screen of any map pictures that are there. Then it will flick the switch "ShowMap." Using the ON/OFF trigger setting means that whenever this event is called, the switch ShowMap will be set to its opposite: if it is currently ON, it will be switched OFF, and vice versa. Then the event turns itself off by switching off "UseMap."
Adding the switch condition "ShowMap" - ON to the event that displays the display map changes it so that it will only be shown if the Map item has been activated.

Back to top


Maps With Scale 1 pixel = More Than 1 Tile

Sometimes your world map will be so big that a scale of 1 pixel = 1 tile is impractical. This shows how to make the display map work with a larger scale.
  1. Make your display map with a scale of 1 pixel = more than 1 tile. Also make your crosshair, but it can still be a 3x3 or 5x5 pixel image.
    Technically, the scale here is 1 x 1 pixels = n x n tiles, but since a pixel is a square anyway it's usually shown as 1 pixel = some number of tiles. Obviously, the number of tiles in the width or height of your game map must be divisible by whatever number you use for n, or else you're going to wind up with some fractions of pixels. For example, you can use 1x1 pixels = 2x2 tiles for a 200x200 tile map, but you can also use that scale for a 200x400 tile map and end up with a rectangle.
  2. Follow steps 2-3 for the simple position tracker.
  3. In step 2b of the simple tracker, you create and set the variable "MapCursorX." Now create a new "Change Variable" command. Choose "MapCursorX" again.
    Set the Operation to "/" (division) and the Operand to Set n, where n is the value I discussed above. To continue my 200x200 tile map example, I would put a "2" here.
  4. Repeat this with the variable "MapCursorY."
    Back to top


    Maps With Scale 1 tile = More Than 1 Pixel

    Occasionally your world map will be so small that a 1 tile = pixel scale will be too hard to see. Here is how to make a "zoomed in" display map.
    1. Make your crosshair. Create your display map with a scale of 1 tile = more than 1 pixel.
      Technically, the scale here is 1 x 1 tiles = n x n pixels, but since a tile is a square anyway it's usually shown as 1 tile = some number of pixels. Obviously, the number of pixels in the width or height of your display map must be divisible by whatever number you use for n, or else you're going to wind up with fractions of tiles displayed. For example, you can use 1x1 tiles = 2x2 pixels for a 50x50 tile map to display it as a 100x100 pixel map.
    2. Follow steps 2-3 for the simple position tracker.
    3. After step 2b, where you set "MapCursorX," add a new "Change Variable" command for the same variable.
      Set the Operation to "*" (multiplication) and the Operand to Set n, where n is the value above. To continue my 50x50 tile map example, I would put a "2" here.
    4. Add another "Change Variable" command for "MapCursorX."
      Set the Operation to "-" (subtraction) and the Operand to Set n/2. If n is odd, you can round up or down as you please. In my 50x50 tile map, I would put a "1" here.
    5. Repeat steps 2-3 for the variable "MapCursorY."
    These two options both use the fundamental concepts behind scale.
    In the first one, where 1 pixel = n x n tiles, you want it so that whenever the hero move n tiles, the display cursor will move 1 pixel. For example, in my 200x200 tile map, with a scale of 1 pixel = 2 x 2 tiles, I want the display cursor to move 1/2 (or 0.5) pixels whenever the hero moves 1 tile. This is why you add a "Change Variable" command that divides by n.
    In the second one, where n x n pixels = 1 tile, you want it so that whenever the hero moves 1 tile, the display cursor will move n pixels. For example, in my 50x50 tile map, with a scale of 2 x 2 pixels = 1 tiles, I want the display cursor to move 1 pixel whenever my hero moves 1/2 (or 0.5) tiles. This is why you add the command that multiplies by n.
    However, simply multiplying by n is not enough. This means that when you are at the tile in Row 1, Column 1, the cursor will be at the pixel in Row n Column n -- at the bottom-right corner of the tile's representation on the display map. To remedy this, you subtract half of the width of that square of pixels (ie, n/2) to put the cursor in the center.

    Back to top


    Maps Not Positioned in the Upper-Left Corner

    The upper-left corner of the screen isn't the only place you can have the position tracker displayed, it's just the easiest. If you'll notice, most games actually have it on the lower-right corner. Here's how to change the position of the display.
    1. Decide where you want your map to be. The farthest you can put it from the upper-left corner is, of course, the bottom-right corner. You can actually put it anywhere you like on the screen, but for now I'll use the bottom-right corner and the center, since those are the most likely places to display the map.
      If you don't want to put the display in the bottom-right corner, then use your X- and Y-coordinates for the upper-left corner of the display instead of mine.
    2. Figure out what the X- and Y- coordinates for the center of the display are.You can either pick likely coordinates or calculate them from where you want the upper-left or bottom-right corner of your map.

      The coordinates of the screen's center are 160 for X and 120 for Y.

      To calculate from the upper-left coordinates of the display, add 1/2 of the map's width to the X-coordinate and 1/2 of the map's height to the Y-coordinate.
      To calculate from the bottom-right coordinates of the display, subract the map's width from the X-coordinate and the map's height from the Y-coordinate.
      The coordinates of the bottom-right corner of the screen are 320 for X and 240 for Y.
    3. Follow the directions for the simple position tracker.
    4. In step 2a, where you use the "Show Picture" command to put the display map on screen, put the center coordinates you worked out in the above step.
    5. After step 2b, where you set the variable "MapCursorX," add another "Change Variable" command.
      Choose "MapCursorX," Operation "+" (addition), and make Operand "Set" to the X-coordinate of the upper-left corner.
      If you're also using a map that's not on a scale of 1 pixel = 1 tile, then make sure that this add operation is after the division or multiplication.
    6. Do the same for MapCursorY, but use the Y-coordinate of the upper-left corner instead.
    The addition operations to the variables MapCursorX and MapCursorY serve to shift the cursor over that number of pixels -- to the correct position on the screen. It's a lot of math here to get the positions right, but it works.
    Back to top


    Creating the Images (Map and Crosshair)

    There are two ways to do this. One is painstaking but more accurate, the other way is quicker but less accurate.

    The Hard Way:

    1. Go to your paint program. Create a new document of the desired height and width, depending on the number of tiles in your game map and the scale you want the map at.
    2. Zoom in. 600%-800% should be good enough to see the individual pixels. If you can, turn on a grid overlay to make it easier to see the pixels.
    3. Okay, now decide what you want to show on your map. Do you just want a simple map that shows land and sea, one that also shows mountains, one that shows all your different terrain types, something that just shows key spots, or something else? Pick colors for all the different things you want to show -- it could just be dark gray for sea and lighter gray for land, with a black dot for a key location. Or you could use a different color for every kind of tile you used in your game map. Don't go over 256 colors.
    4. Now, draw your map. Where a tile is sea in your game map, paint the corresponding pixel the color for sea. And so on. As I said, this is the painstaking way.
    5. When you're done, save the file. If you're using Paint, just save it as a BMP file. In Photoshop, go to Image:Mode:Indexed Color, accept its settings, and Save As PNG. If you're using something else, do whatever you usually do to your images before putting them into RM2K.

    The Easy Way

    1. Open RM2K. Go to either of the layer editing modes (press F5 or F6). Click the button on the left side of the screen for "Select." Now zoom the map out to 1/8, the smallest setting. Hopefully you'll get all of the map in.
    2. Press the Print Screen button. It's usually above the "Insert" button of a keyboard. Or if you have a screen capture program, use that instead.
    3. Open your graphics program. Create a new document the size of your screen resolution.
    4. Go to Edit:Paste to paste the contents of the clipboard. Or do whatever you need to do with your screen capture program to put the screenshot into a file in a graphics program.
    5. Either use the Crop function of your graphics program to remove the parts of the screen that are not your map, or select the section that is your map and copy-paste it into a new document of the appropriate size.
      If your map didn't fit into the display even at 1/8 zoom, you'll have to "stitch" it together from pieces.
      1. Scroll to the upper-left corner of your map. Do steps 3-5 above.
      2. Scroll one screen's worth right on your map. What I mean is to scroll horizontally to the right until the entire portion being displayed is new. Then do steps 3-5 above. If necessary, save the first section of the map and close it to make a new document.
      3. Keep doing the step above until you reach the right end of the map. Now you have the first row done.
      4. Then scroll all the way back to the left edge, and scroll down one screen's worth. Repeat steps b and c above. This will get you the second row.
      5. Repeat, getting all the rows of your document.
      6. When you're done you'll have a bunch of files. Create a new document that's the size of the files you combined.
      7. Copy and paste the various files together, positioning them in the right places. If there were overlaps in the screen captures, overlap the files there now, so that there are no extra parts to the map.
    6. Now re-size your image so that its dimensions are the ones you want for your display map, depending on how many tiles there are and whether or not it will be zoomed in.
      If you like, you can now take a brush tool and paint over the sections of the map in the colors you want.
    7. Save your image, just like in the hard way above.
    Back to top



    Well, that's it for this tutorial! I know it was rather lengthy, but I wanted to go in-depth and show how to do all the variations on it that people might want to use in their games. I do hope it helped. Comments, please?
    ~Ashera Lykos-Anthropos at ashlykos@another.com