Old School Pixelated Resizer–My Gift To You


Games? You’re working on games?

Lately, I’ve been starting to focus a bit on developing games for the Windows 8 platform (in addition to my work on Azure).  It’s been fun getting to work on the client side of things, although I’m still quite the novice at it compared to my server side stuff.

Those of you who know me know that I love old technology. I have a collection of old machines that I love, including a couple of old Commodore Vic-20’s and C-64’s, a Texas Instruments TI-99/4A, and even a fully functional Altair clone.  I also owned about 30 Timex Sinclair 1000’s in high school, which I earned at a 5 to 1 ratio for fixing them (that is, I got a free TS 1000 for every 5 TS 1000’s that I repaired).  I fixed about 150 of them one year, and ended up giving away personal computers to all of my friends for Christmas…

My love for old computers extends to old computer games as well.  For example, in 1983, one of my favorite games on the Commodore 64 was B.C.’s Quest For Tires.  Laugh all you want, but this thing won “Best Use of Sound and Graphics in a Video Game” from Billboard Magazine that year.  No, seriously.  It did.

Building New Games, While Keeping It Old School (yes, maybe even prehistoric)

OK, take a look at that cave man (his name is Thor, in case you’re wondering).  Pixelated goodness.  He takes up about 25% of the available height of the screen, which on a Commodore 64 translates to about 50 pixels tall (the resolution of the machine was 320 by 200, which was known as… ahem… “hi-res graphics” at the time).  Given what we had to work with, he looks pretty good.

Now, skip ahead to today.  Typical monitor resolution is at least 1024 by 768, and most machines are running at even higher resolution that that.  So called 1080P monitors have 1080 pixels in the same place that we used to have just 200 – a 5x increase in “pixel density”.  On the flip side, something that’s 50 pixels tall now will end up being about 5% of the height of the screen, rather than 25%.  Poor Thor would be a tiny little spot on the screen, rather than his glorious pinkish pixelated self.  How can we bring him forward, and use him (or something like him) in a video game today?

Well, the first thing we could try is simply resizing him in an image editor.  To make him approximately the same size as before, we’d have to upsize him to about 500% of his original size.  So, we open up trusty old Paint.Net and try it out.  Here’s what we see (note, we’ll upsize our image only 200% for illustration):

Thor, before, in pixelated goodness. Thor, resized to 2X original size, using BiCubic Sampling.

OK, he’s definitely twice as big, but he’s really not looking good.  In fact, he’s smudged and blurry – a bit like looking at him through a soft focus filter.  Romantic, maybe, but definitely not what I’m looking for to bring him into a video game today (while retaining his retro-pixelated awesomeness).  Back to the drawing board.

It turns out that the haziness is caused by the resampling filter.  By default, in most photo situations, the best looking thing to do when resizing is to resize by using a BiCubic sampling.  In many situations, this is exactly what we would want, but not now.  I want my sprites to be big enough to see, but still be pixelated.  Is there a different algorithm that gets me there?  What’s this “nearest neighbor” option?

Thor, before, in pixelated goodness. Thor, resized to 2x original size, using Nearest Neighbor Sampling.

Perfect!  That’s what we want.  I can work with this to make my old tiles big enough to be visible on my screen, while simultaneously keeping that old school pixelated feel.  Here we go…

And then, it hits me – I have something like 300 tiles to convert.  I have lots of different characters, in different poses, all across all sorts of sprite strips that I have to convert.  And Paint.Net, while awesome, isn’t able to be batched (at least as far as I know).  So, to Visual Studio I go.

And here’s the result – a simple utility that will upsize whole directories full of images, using the Nearest Neighbor algorithm

Multiply your sizes by 2, 3, 5, 10, or whatever you like, and make them big, but still blocky.  My gift to you.  Enjoy it and crank out some killer new (old style) games!

Before (my Input Directory):

After being upsized 5X (my Output Directory):

Next Steps – You Could Make This Even Cooler

Additional Reading: It turns out that some brilliant people are doing brilliant things to upsize pixelated images, and keep them crisp and pixelated, while simultaneously keeping them a little less “blocky”.  My utility here doesn’t do it (yet), but the “2xSAI” scaling described here looks pretty amazing.  Anyone want to build a new upsizer that uses that algorithm (hint, hint)?