I’ve been playing Pokémon X/Y quite a bit recently. This is my first time playing a Pokémon game, so I’m still unfamiliar with many of the 718 Pokémon. So when battling, I’m often looking up their types online (usually on my iPad, which is very slow at loading web pages). Then I have to reference a type chart to see which are weak to or resistant to certain types of moves.
I tried a few free Pokédex apps, but wasn’t too impressed. I wanted something super quick, where I could see a Pokémon’s type almost instantaneously (and maybe its stats too). So I decided to create my own using MonoGame. The focus would be on speed.
It was fairly straightforward to find the data I needed on the internet: a list of all the Pokémon and their stats. I was only able to find it in html form though, so I pasted the table into notepad and wrote code to parse the file into a more useful format I could use in code.
This text file is processed at build time and serialized to a binary format that is quick to read at runtime. The number of entries is small enough that I can do a linear search through all the entries’ names that start with a particular letter in less than a millisecond on the iPad, so no special data structures are needed for fast searching. All I need to do is type the first few letters of the name of a Pokémon and I can instantly see what type it is:
Originally I was satisfied with just knowing the type(s) of the Pokémon, but then I figured I should add in the full stats and automatically calculate the strengths/weaknesses:
This begins to feel a bit like cheating, but you can turn it off if you want to. I also added searches for moves and abilities, in addition to just Pokémon.
I also added the option to show the typical Pokémon Attacker/Defender type chart, with the relevant rows and columns highlighted for the selected Pokémon.
You’ll see images for the Pokémon above. How did I obtain the image data? I looked at one of the popular Pokémon websites and figured out the url format for the Pokémon images they used. I then wrote a small C# program that downloaded all the images in a folder on my machine (There was a bit of massaging/heuristics here, because there are several different images for the same Pokémon if they have different forms).
Always focused on speed of user interaction, I knew I would need to use a texture atlas to draw the images. I found a great texture packing tool that I used to assemble the images into a single texture. It took less than a minute.
Unfortunately, the max texture size on the iPad is 2024×2048, and the images didn’t fit into a single texture. So I ended up with 2.
I then had to write code to parse the output of the texture packing tool (i.e. the data that maps the original filenames to regions of the texture). The tool offers various formats for output, but the easiest I found to parse was a .json format. Then I had to write code to render from this atlas (not exactly trivial, since images can be rotated).
The textures are square powers of two, which lets me compress them for iOS. In total they are 3.3MB, which allows for quick loading when my app starts up. All the content for my app totals about 5.7MB.
Overall, I was pretty satisfied with how things worked. I think it’s helped win a lot of battles. It’s sort of like cheating; but I figure I’m using it as a learning tool (hence the addition of the type chart) and I will need it less and less. It’s also useful to look at the Pokémon’s base stats when EV training and such.
Of course, I can’t ever ship this app, since I’m using copyrighted material (the Pokémon images, specifically).
One problem I noticed when having battles with foreign players is that sometimes I couldn’t even identify a particular Pokémon. The names of the Pokémon will be in a foreign language. So in those cases I have to make an educated guess about its type.
I wondered how you could quickly identify an unfamiliar Pokémon just based on what it looks like. That’s when I came up with the idea of sorting the Pokémon in my database by their hue. So you could quickly scroll to the Pokes of a certain color. How could I classify them like that? That was an interesting problem, and is the subject of my next post.