Peter Hajas

Notes

Pokémon Map Generator

A map with caves in a city

The generator is available on my website here.

I recently took a week long vacation. I love working on recreational programming projects during a vacation. It’s a great chance to try programming in a space I am less familiar with.

This vacation, I worked on something I’ve wanted for a long time: a Pokémon map generator! I’ve always been interested in the maps in the Game Boy Pokémon games (read more about parsing the data format and visualizing the map connections). There was something magical about exploring these areas, pouring over towns in strategy guides, and designing my own maps on paper.

Generated Maps

I love looking at the maps you can generate with this. Here are a few of them that stood out to me:

A Town with a Cave

A map with a cave next to a town with large buildings

Shop by the Sea

A map with a shop near the water

Skyscraper By a Lab

A map with a lab next to a skyscraper

Mountain Route

A route map with mountains next to it

The Super Nintendo Room

A map with a bunch of Super Nintendo consoles on tables

The Algorithm

In addition to letting you visualize maps from Pokémon Red and Blue, this site also lets you generate your own maps using a (naive) Markov-style approach.

Here’s how it works:

Note that it has bugs! I’d recommend not getting larger than 8x8 for most tilesets. Some tilesets are missing, like “DOJO” and “REDS_HOUSE”.

Rendering Maps

To render both built-in and generated maps, the site uses a similar mechanism to my Emoji-based approach (although much faster than rendering all that unicode!). It parses the tileset and blocksets, and renders them using <canvas> into an image element. This is great for saving the map for use offline.

Because of my very fond nostalgia for the Game Boy Color, I also added support for rendering using multiple palettes. The Game Boy Color could switch palettes based off of the button combination you held down when it booted. As a kid, I found it fun to hold down the buttons and see what cool palettes I could see Pokémon in. I also added a “grayscale” and “gameboy” palette for completeness - you can see maps rendered in their green original Game Boy glory!


I had fun building this generator, and I hope you have fun playing with it! Get in touch if you have questions, feedback, or if you generate any really cool maps!