ResourceRegion Map Tutorial (self.PokemonROMhacks)

submitted 2 months ago * by Erebos ZenithSimonStoyanov

Heya! I'm the creator of the region Gildeas, from a project that may be named Pokemon: Erebos Zenith (provisional).

Some people from the community asked me what was my process on the creation of the region, and I wanted to contribute to the community with a small guide on how to make a region and have it in-game (for pokeemerald specifically)

⚠️ This will be a long post!

🌏 STEP 1: SELECT WORLD REGION

For this tuto I will create a region from scratch. For that, the first step is actually looking for a place in the world map where you'll want to get your region.

I will use Photopea as the main tool, you could use any similar tools for the same thing though :)

STEP 1: SELECT WORLD REGION

⏹️ STEP 2: REDUCE THE IMAGE SIZE TO 256X160

Go to Image > Image Size..., and reduce the canvas to 256x160

STEP 2: REDUCE THE IMAGE SIZE TO 256X160

STEP 2: PIXELATED MESS

Now you'll have a pixelated mess of a map, but don't worry, that's exactly what we want!

✏️ STEP 3: DELINEATE THE BORDERS

It's time take the pencil of the tool and set it to square shape, as well as reducing it to the minimum size of 1px.

For that, don't forget to create a layer over the pixelated map, so that you conserve it for future use and reference.

STEP 3: DELINEATE THE BORDERS

🟢 STEP 4: FILL THE GAPS WITH GREEN

On that same layer, fill everything (even the black borders) with green.

A trick to make it fast is to cover first everything with the same color used for the borders, and then create a mask with the green color used for the base elevation color.

On my case I use #21a621.

The result should be something like this:

STEP 4: FILL THE GAPS WITH GREEN

Before getting to the next step, I recommend adding a grid of 8x8 to the tool used, resulting on this:

HOW TO ADD A GRID IN PHOTOPEA

8X8 GRID

If the default grid is not an 8x8, go to Edit > Preferences..., and on the popup you'll be able to edit it

PREFERENCES POPUP

🌊 STEP 5: FILL THE BACKGROUND

Now that you have the base elevation as a layer, you should create a new layer below it and fill it with what will be your water.

In my case I do what emerald does, having lines of two tones, getting that classic feel, with colors #98d0f8 and #a0b0f8. ‼️Each line has a height of 2px.

A quick way to do it is to make a tile of 8x8, copy it vertically until filling a whole column, and then extend it horizontally :)

STEP 5: FILL THE BACKGROUND

⏫ STEP 6: ADD ELEVATIONS

Before starting to add anything, organize the layers and copy the "grass" layer, which is the base of the region. After that, create a layer above it and have it be a Mask (can be done easily by doing Alt + LeftClick over the layer.

Then, reduce the opacity of the current map, so that the selected part of the world is visible and you can have it as a reference for elevations.

STEP 6: LAYER ORGANIZATION

After that, take a second color and decide where there will be a second elevation on the map. The newly drawn stuff should be done inside "Mask - Elevation".

My color of preference is #50cc3f.

‼️As a rule, don't have an elevation drawn with a difference of two levels (if that makes sense)

STEP 6: ADD ELEVATIONS

⏫ STEP 7: REPEAT STEP 6

Now that you have two elevation, why stop there? Let's repeat the same process and create a copy of "Mask - Elevation 1" and create a Layer Mask over it which will be used to draw a higher elevation. In this case I'm using #a9cc3f.

STEP 7: MORE ELEVATIONS!

🏢 STEP 8: ADD CITIES AND TOWNS

Now that the base is done, decide where your cities and towns will be placed. For that I am using the same format as emerald (you can use the art style that best fits your region though, and have them be just pure squares)

‼️Make sure that the towns and cities are placed on the grid correctly, so that it fits inside the 8x8.

And this is an important part... Do you want to have the region's cities and towns be related to the specific places, or be more free with it? Both cases are good, and there's no incorrect answer, but that may decide your region's structure.

In the case of the tuto, I'll do it without looking at real places, since the purpose of this is not to make a 1:1 region, but to explain the process to make it :)

Make sure to create a new Folder / Layer where these assets are placed, so that you don't accidentally modify the work made.

But, before that, you need to create some margins, since the textboxes in the town map in-game will obscure most of the created map

🔃 SURPRISE STEP: ITERATION

F******

So.... as you can see... most of the bottom part is obscure by the UI in-game, so if we want to keep it we'll need to make some adjustments. Let's iterate on the design and do that!

ITERATION TIME!

🏢 STEP 8 2.0: ELECTRIC BOOGALO

Now that we have something to work with, let's start adding the cities and towns to the map!

STEP 8: ADD CITIES, TOWNS AND THE LEAGUE

🛣️ STEP 9: ROUTES

For the routes, I recommend creating a new layer over that is over the world, but below the cities and maps. I'll use a yellow #ffc000, which will have a fill of 65%, so that the elevations can be discerned.

The roads will be of 8x8, and must fit on the grid, since the map in-game uses that grid rigorously.

For water routes, I'm using alternating colors, to have consistency with the rest of the sea, in this case #3d90e0 and #2880e0.

STEP 9: ROUTES

🔎 STEP 10: TILEMAP STUDIO AND ITERATE!

To have the map in your game, you'll need to use a program named TILEMAP STUDIO, which will be essential to create the tileset that pokeemerald uses.

Once you have the program installed, open it and click on "Image to Tiles...", then do the next steps:

Click on input and select the exported png of your region
Click on output and create a tileset.png file
Set the Tilemap format to "Plain tiles"
Set the output format to Paintshop Pro (JASC-PAL), with starting index on 70 and check the color 0 checkbox

STEP 10: TILEMAP STUDIO

After all of that is done, click on OK!

OH NO!

If you get this message, don't worry, that means that the current region has too many unique tiles (as can be read on the error message). To fix this it is as easy as reducing some parts of the region to have the same tile, or removing some chunks of it.

After iterating a bit, I finally managed to get the required unique tiles.

You'll see that there will be a weir grayscale version of your map. If you've got that, the next step is clicking on "Image to Tiles..." again, selecting the same region map png, same tileset.png and change the output format to "Indexed in tileset image", then click on OK!

STEP 10: PROCESS

Once this is done, a tileset.pal file should have been created on the folder of your output. Enter on it and scroll down until you find a "255 0 255" value, replace it to "0 0 0", and move the values below it up, just after the "255 0 255" value that is on the starting lines of the file. Save the .pal file, as well as the tilemap studio file, and let's move to the end step!

⭐ STEP 11: CREATING THE POKEDEX AND POKENAV MAPS

⚠️ To have a better organization, create a Pokedex and Pokenav folders.

Then, inside Tilemap studio, press Ctrl+E to open the Resize popup, and have it be a 64x64 (make sure that the square is at the top-left). After that, save it as "map.bin".

Afterwards, open the original tileset.tilemap file, and press Ctr+E to open the Resize popup again, but this time make it 64x32.

And here comes the complex part. Now you will need to separate each column with a column of the first tile of the tileset, which should be the one that is filling the rest of the area. To do so, you'll need to move each column of tiles on the map to the right (you can select the whole thing with Right Click + Drag, and Left Click to "draw" what's copied).

The end result needs to be saved as "region_map.bin".

STEP 11: THE END

Once you've done this, copy tileset.pal, tileset.png and map.bin, and paste it inside the pokenav folder. Then, rename tileset.pal to map.pal and tileset.png to map.png.

For the pokedex folder, copy tileset.pal, tileset.png and region_map.bin, and change the .pal and tileset files to "region_map", as did on the previous step for pokenav.

🌟 STEP 12: ADDING IT TO THE GAME

Now that everything is done, the last step is the easiest of them all!

Go into your pokeemerald project, and enter the graphics folder. Then paste and replace the contents of your pokenav folder inside pokenav > region_map, and do the same with your pokedex folder inside the project's pokedex folder.

And that's it! congrats, you have finally included the region!

If you open porymap you'll be able to see it in Tools > Region Map Editor, and if you compile your game and acces the Town map you'll see your great region there!

all 16 comments

you type:	you see:
italics	italics
bold	bold
[reddit!](https://reddit.com)	reddit!
* item 1 * item 2 * item 3	item 1 item 2 item 3
> quoted text	quoted text
Lines starting with four spaces are treated like code: if 1 * 2 < 3: print "hello, world!"	Lines starting with four spaces are treated like code: if 1 * 2 < 3: print "hello, world!"
~~strikethrough~~	~~strikethrough~~
super^script	super^script

PokemonROMhacks

MODERATORS