Spriting and learning

Mon, 07 Sep 2009 13:57:09 -0700

In the mid-1990's I was really into Nintendo games, as was everyone. My favorite was the original NES Final Fantasy. Sometime in my teens I got my first computer, and I decided it would be cool if I had some sprites of that game on my computer.

Before

My first computer ran at 640x480 with 16 colors. I had Windows 3.1 and the most sophisticated image manipulation program around was MS Paint. How could I get sprites into my computer? Well, I had a strategy guide for the game, with blurry photos of all of the enemies, so I just opened up MS Paint, zoomed waaaaaaaay in, and drew all of the sprites pixel-by-pixel. Insane? Maybe, but it's a fun kind of insane.

This took about a year of off-and-on work, but in the end I had something I thought was great. I still have the file:

Note that my computer couldn't even produce sophisticated colors like "orange" and "brown", so I had to tile red and yellow together so it looks orange from a distance. Oh how computers have progressed since then.

At this point I loved computers but I literally didn't even know what programming was. I had never heard of the internet. I didn't even get a taste of programming until high school.

In 1999 I was in college but still largely ignorant of programming. I decided to start my first website, which was about the NES Final Fantasy that I still liked. I decided to put some sprites on the site. For the first version I chopped up my old image file from above into individual sprite files, but the quality of these was terrible.

So the way I got good sprites was by taking screen-captures of the game in an NES emulator, then in Paint Shop Pro I cropped out the backgrounds. This was much faster than hand-drawing, but it still took months.

This is an example of using a thousand-dollar piece of equipment as a hammer to pound in a nail. It's the most rudimentary form of computer use. It's the kind of thing I cringe at when I see coworkers do it today.

After

Last weekend, many years older and hopefully a tiny bit wiser, I pulled out my copy of the most recent remake of FF1, for the PSP. I decided it'd be cool if I could rip some sprites from this.

So, first I got an ISO of the game and mounted it loopback so I could view the files. In the ISO there's a 100MB BPK file. I didn't know what this is so I opened it in a hex editor and saw that it was some kind of archive. You could clearly see an initial list of filenames with byte offsets and some other flags for each, then a bunch of binary data.

A few google searches later and I found this where someone else had the same idea as I did. There's an extraction script there in some language I don't know, but it wasn't hard to figure out what it was doing.

So then I was going to write a script to extract the BPK but thankfully someone in Japan already did which saved me the trouble of even doing that. Some of the extracted files were themselves archives, but after running the script on its own output a few times I had a bunch of GIM files.

What's a GIM file? Never heard of it. But a quick google search for "GIM to BMP" will net you a program called gimconv. Sadly it's Windows-only, but a batch file or two later and I had a bunch of BMPs like this:

These files have solid backgrounds, but I want transparent backgrounds. But it isn't hard to make an image's background transparent in Linux using ImageMagick and its nice documentation. One snag is that all the images have different background colors, but I can tell ImageMagick to use the color of the top-left pixel as the transparency color:

for f in *.bmp; do convert -matte -fill none -draw 'color 0,0 replace' $f ${f/bmp/png}; done

Some of these images look like sprite sheets. So let's pick one, chop the sprites into individual files, then make an animated .gif from these sprites (while also adding a transparent border around it).

convert KURO.png -crop 32x32 +repage KURO%d.gif
convert -matte -bordercolor none -border 28 -compose Copy KURO?.gif -delay 25 -dispose Background KURO.gif

Giving us:

So after a matter of 2-3 hours (most of which was puzzling over some hex data and then googling around), I am already pretty much done. Barely any skill on my part required other than knowing what to look for.

The moral of this story is:

The internet is awesome. It's easy to forget how much better life is with so much knowledge at our fingertips. I can't even remember what it was like without the internet and I'd never want to go back to that.
Learning is fun. What was a year-long job became a few-minutes job with even a rudimentary knowledge of scripting.
ImageMagick is pretty handy.
Old school games are great. FF1 is still fun after 20 years. They keep re-making it for new systems for a good reason.
I got a late start in programming. I wish I would've started at a younger age. Think of how much more I could've accomplished with my time. I'm still playing catch-up in many ways.
Sitting here in front of 3840x1200 pixels worth of million-color monitor screen, typing a story people are going to read in a few minutes in countries I'll never visit, ripping sprites from a portable game device that's probably thousands of times faster than my old NES, I can't even imagine what we're going to be doing with computers in another 15 years.

briancarper.net (λ) (Tag: ImageMagick)

Spriting and learning

Before

After