I’ve made three games whose art style could be described as “pixel art”. What is typically meant by this is “graphics that exaggerate pixels”, with images built of “blocks” larger than the smallest points the display can show. “Big pixels”, right?
I’m often asked this question about those games: do you draw your art at double size? If you think the answer is completely obvious, you’re not alone; I think so too. But since it’s not obvious to everyone, I’ll explain.
On an iPhone 3GS, our game The Incident runs at twice the natural pixel size. So each in-game “pixel” is drawn with 4 actual screen pixels. Like this:
I could have, in theory, drawn all these graphics at their pixel-doubled size in Photoshop.
But that would be quite nutty, honestly. So much work to make sure everything falls on a double pixel! So difficult to tweak! Even if I drew my graphics at 1:1 and then exported them doubled each time I saved, that would still be a pain to maintain, and it’s totally unnecessary work.
When doing “pixel art”, all the scaling should be done in the code, at runtime. The game should literally be drawn on a small canvas, then scaled up as the last step.
Here’s what The Incident “actually” looks like:
When you run it on a 9.7” iPad or a 27” iMac, you’re still seeing those tiny, 32-pixel graphics. They’re scaled up in code, along with the whole canvas of the game. (In the case of The Incident there’s a bit of finesse there when we rotate the pixels, but that’s neither here nor there.) In fact, we scale to well over 2x on these larger devices, up to 16x (I think). Big, BIG pixels.
This approach is a personal aesthetic preference, not an immutable law of retro pixel art. In addition to saving you space and memory, I think it’s a very good guideline to prevent your art from becoming inconsistent and committing the grave sin of mixed pixel sizes. That means using two different scaling factors; usually large pixels to communicate that the game is “retro”, and small ones to cram in info. Here it is in Disney’s (pretty good) game Fix-it Felix Jr.:
Big pixels for the button, smaller pixels for the text. I would have either used a chunky, big-pixel font for the text, or made the button bigger to fit double-pixeled type. That’s just me.
Scaling graphics is a classic example of something computers are good at, so you shouldn’t have to be. Draw your art at 1:1 and let the engineer scale it up on their end.