4 How to add a new region map
Kasenn edited this page 2024-07-10 08:33:12 +03:00

This guide is meant to make adding a new region map as simple as possible. We're not going to delve too deep on how things work (because I don't fully understand everything myself either) and we're just going to focus on getting that new map of yours in the game. This is only for inserting the graphics for the map, not creating mapsecs or fly points or anything of that kind.

This guide was created with the pokeemerald-expansion in mind. I can't promise this will work on vanilla pokeemerald!

There are a few prerequisites before we begin: Tilemap Studio Your preferred image editing software. In this tutorial, we will be using a free program called Graphics Gale Your preferred text editing software. I will be using Virtual Studio Code, but even a regular WordPad is fine

1. Map limitations

When you're creating a new map, there are certain limits you should keep in mind:

  • The default resolution for a map is 256x160 pixels.
  • The system doesn't like pure black (RGB 0 0 0) colors on the map. In case you want to have black, consider using something like RGB 10 10 10 instead.
  • The map is built from 8x8 pixel blocks called "tiles". The map consists of a total of 640 tiles, however, the maximum amount of unique tiles you can have is 256. This means that approximately 60% of your used tiles must be repeats (e.g. water tiles).
  • There are 4 different cases of maps in the game: Pokénav map, Pokédex map, Fly map, and the wall map found in Poké Centers. Each map has a slightly different UI that blocks parts of the map. Below is a demonstration of a vanilla map and the parts that get blocked by the UI in these maps.

image_2024-05-24_111301497

* The patterned area at the top will always be visible, but the cursor in Pokénav and Fly maps is blocked from going there. As such, you should never place routes or towns there, unless you decide to remove this limitation.

* The map in this guide is resized to 2x for the sake of clarity

As you are drawing your map, it can be hard to gauge just how many unique tiles you have. The way I kept checking my tiles was through Tilemap Studio. Here's a quick tutorial on how to check your unique tiles:

  1. Go to Tools -> Image to Tiles...

image

  1. Set your map image as the input, whatever temporary name on the output, and set the format to GBA tiles + 8bpp palette. Hit OK.

image

  1. An image of your map should now appear. On the left you can see all the unique tiles of your map. Those tiles cannot exceed tile $0:FF. If you do exceed this limit, you must either simplify your map to reduce the number of unique tiles or use the same tile multiple times. If you right click on a tile on the left, it will highlight all the spots that tile is being used in on the main map image.

image

NOTE: We will be later converting to our map into plain tiles which do not work with tile rotation. Once you have reduced your unique tiles under the 256 unique tile limit, try turning your image to tiles again but this time in step 2, set the format as Plain tiles. If you get an error, that means you will most likely have to reduce your tiles even further.

2. Formatting the region map

Now, we assume you've got your map image ready, have stayed within the map boundaries, and are ready to insert it in the game. For the purposes of this guide, I have created this simple map called regionmap (the actual name of the map doesn't matter at this point).

image

There are 2 different formats for the map: Pokédex map and everything else. We'll start with the non-Pokédex one.

  1. Just like above, we start with Tilemap Studio. Go to Tools -> Image to Tiles...

  2. We will set our new map as the input, give a name for the output (I'm using the name "map" as that is what the expansion uses). After that hit OK.

image

  1. Now that our map is loaded, we go to Tools -> Resize... and set the width and height to 64

image image

  1. Like in my case, if you have a landmass that continues off-screen, you'll want to go to Tools -> Shift... and shift the X and/or Y by -2. This will stop your map from clipping when viewed with the zoom in feature of the Pokénav map. If your map continues off-screen to the left, you'll want to shift the X. If it continues off-screen to the up, you'll want to shift the Y.

image

image

image

This may look broken but in fact, it's not.

  1. Next up, we need to save our tilemap. Regular ctrl+S won't do; we must go to Tilemap -> Save As... and make sure we save the file in .bin format.

image image

  1. Next up, we open up Graphics Gale, and load (or drag and drop) our map tile .png (the output we named back in step 2).

  2. Before we do anything else, we need to save a version of the palette. Look to the upper-right corner and you should see the small arrow. Press that small arrow and save the palette. The system expects a file called "map.pal" so that's what we'll name it as well.

image

  1. Now that we have our .pal saved, we want to edit the actual indexed colors of the tiles. While holding Shift, grab one of the color boxes in the upper-right hand corner and start dragging it down. You should see a tiny "P" appear next to your cursor. You will then want to drag all the colors down so that the first color is on index 112 and the rest follow in the same order as they were before.

image

  1. Once our colors have been shifted, let's save our tiles. Graphics Gale is known to have weird things going on with saving so I recommend going to File -> Export...

image

image

These are the export options you will want to use. The prefix doesn't matter, that's just part of the name.

  1. Next up, we need to calculate the number of tiles our tileset has. You can either count the tiles manually, or take the total pixel count of your tileset and divide it by 64. According to Graphics Gale my tileset's resolution is 128x120 so all I do is input 128*120/64 to a calculator and get 240.

image

  1. At this point we switch over to our text editor and open up "graphics_file_rules.mk" (this should be at the root of your expansion folder). here we will find the rule for the file "graphics/pokenav/region_map/map.8bpp" and replace the number after "-num_tiles" with whatever our tile count is. Do note that this has to match exactly. Don't forget to save!

image

  1. After this we need to open the .pal file we saved through Graphics Gale in a text editor of our choice. There's a whole lot of color "0 0 0" here and if you remember from before, the system doesn't really like that. Use your text editor's replace function to change those to something else. I don't know if any other RGB choice will do, but I've always replaced them with "10 10 10" and that seems to work just fine. Don't forget to save!

  2. All of our files should now be ready for inserting. If you've followed the naming convention of this guide, you should have 3 files:

  • map.bin
  • map.pal
  • map.png (actually, Graphics Gale named this to "mapFrame1.png" so we need to rename it to "map.png" instead)

Inside your project folder, head to graphics/pokenav/region_map/ and copy the 3 files here.

  1. We can now compile the project. Assuming every step was followed correctly, you should now be seeing your new region map in-game. However, we aren't done yet. We still have the Pokédex map left to do.

3. Formatting the Pokédex map

I'm not going to pretend like I know how this works. For some reason when I was initially writing this, this part simply refused to work. Later when I tried again, it worked fine without any issues. Hence, take anything you see beyond this point with a pinch of salt

Since our palette and tileset have already been built, all we need to do now is to edit the actual tilemap.

  1. If you closed Tilemap Studio inbetween, open it back up and drop your map.png in the small window to the left and map.bin to the bigger window on the right.

  2. If you shifted the map during the creation of the region map, you will need to first shift it back. Since I shifted both X and Y by -2, I will need to now shift them by +2.

image

  1. Go to Tools -> Resize... and reduce the height to 32.

image

  1. Here's the tedious part. You can choose a column of tiles by holding down the right click and then copy that selection by left clicking.

We need to turn our map from this...

image

to this...

image

  1. Go to Tilemap -> Save As... and save this as "region_map.bin"

  2. Make a copy or rename your existing "map.png" and "map.pal" to "region_map.png" and "region_map.pal". You should now have 3 files for the Pokédex map:

  • region_map.bin
  • region_map.pal
  • region_map.png
  1. Copy these files to graphics/pokedex/ in your project folder.

  2. In the "graphics_file_rules.mk" from earlier, search for the rule for "region_map.8bpp" and change the number after -num_tiles to the same we did earlier (in my case it was 240).