Pixel Art for Programmers: Silhouette and other improbable French words.

Programmer art. It can be awe-inspiring (Like anything by Dean Dodrill or Derek Yu), it can be messy-and-sketchy taken to an art form by way of awesome thematic unity (I refer you to the work of James Silva), or it could be utterly awful, an eyesore beyond all eyesores (names withheld to protect the guilty).

Odds are if you are a mad code-monkey set on a life of fame and fortune as a lone-wolf developer, you fall into the last category. Me? I can draw. I was an artist before I was a programmer. I’m not brilliant, but click that link and check out my deviantArt page — if you are looking for art tutorials, odds are you would consider hiring me to do your art. Provided you had the money, and the style was right, of course.

(And hey, if your game is truly awesome, and I have a reason to believe it will get done, contact me at the email on the About page, and we can talk turkey.)

I think I can help you out. I’m a decent (but not fantastic) programmer, and a decent (but not fantastic) artist, and with these two skills, perhaps I can serve as a bridge between programming and art so that you can walk across my burly1 shoulders to the promised land of awe-inspiring (or at least awesome thematic unity) programmer art!

Let’s do this crazy thing.

So, my next series of games, the Super Crossover Arcade series, is going full-on retro with pixel art because I can make pixel art look good at a relatively fast pace. And over the course of several tutorials, I’m going to let you in on all of my dark secrets, as I can’t find many decent tutorials out there besides Derek Yu’s.

The first dark secret is the power of the silhouette.

The Power of the Silhouette

Silhouettes are amazingly powerful. To demonstrate this, I threw together a few basic shapes in an art program.

I spy with my little eye, something that begins with M…

Despite the fact that I spent zero effort throwing together these shapes, odds are you recognize at least three of them and identify them with specific famous characters that you recognize.

Making a character with a silhouette that is unique, yet simple enough to recognize on sight, is one of the great challenges of character design whether you are doing art for animation, comics, video games, or anything else. And when doing pixel art — or any art — it is an important challenge to overcome.

Not just for brand recognition. Your characters in a game could be anywhere on a screen full of animated objects. The player needs to be able to look at the screen and instantly pick out the character that he’s playing.

Now, making a silhouette that is unique within your game, as opposed to a silhouette that is just plain unique, while still tough, is much less difficult to manage. But manage it you must for any player character. So let’s start by picking a character with that in mind:

Spaz McDragon

I spy with my little eye, something that begins with D…

Meet Spaz McDragon. Spaz was created for a show called “Super Crossover Kingdom” or some such (we never did settle on a title). The idea of the show was we would create an old-school 2D platformer game engine capable of recording its output, and then use it to produce a machinima cartoon starring a bunch of obvious parodies of popular videogame characters. Spaz was the stand-in for pretty much every animal-based character in existence, with Sonic the Hedgehog and Spyro being obvious influences. He was to have hailed from the fictional game “Spaz McDragon”, which would resemble a cross between Sonic the Hedgehog and Zero the Kamikaze Squirrel.

The first game I’m going to make post-Starfighter X, however, is going to be a shooter, but far, far better than Starfighter X. It’s going to have powerups, multiple enemy types, multiple environments, and whatever else I can put in with a few weeks of intensive work. And since I’m doing a series of games that are increasingly complex, and using them as the basis for these art tutorials and the programming tutorials, I thought I’d dust off the Super Crossover characters and use them as a base.

The picture above is the last remnant of my first space-shooter starring Spaz: Spaz Invaders, which was eaten by badly bungled file-handling on my part. But that sprite is 128 pixels square. Aside from the fact that he’d take up most of the screen when doing a low-resolution retro game, he just isn’t made of pixel art.

So let’s fix that! Step one: fire up any program capable of manipulating pixels.

I prefer Microsoft Paint version 5 (the version included with Windows 7 and, I think, Vista, is 6, and they’ve added all sorts of fancy features that make pixel work harder than needed). But today, I’m going to work with GraphicsGale, as it is a tool designed for the job I’m doing. Note that every feature we want is built into the free version, too.

Step two: Make a new picture, 64×64, and fill the editor with black (bwahahah!). Why? Two reasons. First, because it’s black, and black is awesome. Second, because when you finish your sprite, no part of the sprite itself should be pure black (or pure white).

Now, we sketch out a rough outline of the character. I have a Wacom tablet, and I still use my mouse for this. Grab the pencil tool, pick a color like cyan (that’s electric blue to the non-artsy types), and start doodling.

Here’s what I’ve got so far:

I spy something cyan. Cyan…

Yeah, hideous, right?

Well, now it gets fun. First, I grab the flood-fill tool and fill in all of his little areas with the colors that are supposed to go in those areas (just the rough colors: red for the spines, green for the scales. No need to be precise with the colors at this point. The important thing is that whatever is supposed to be red is the same red (fun fact: in GraphicsGale, the eyedropper button is… right-clicking! Just hold down shift and right click to pick up a color.)

I think that made it worse…

Now, we replace our electric-blue lines. Not with black, nor with any other outline color, but with the color of whatever it is that we are outlining.

Now it looks kinda like finger paint…

Right. So now we start the individual pixel-pushing. Start adding and subtracting pixels of the different colors in the character. But don’t, don’t, don’t add shading. Don’t add detail work. Add nothing that is not in one of the flat colors of the character.

The goal is to make it look good as-is. Spaz, right now, is barely more than a silhouette. he is a group of attached silhouettes, and if I am lucky, the player will only notice this level of detail when he’s moving around on the screen, so I have to make sure the character looks good at this level of detail.

Hm… let’s see that without the grid.

Lookin’ alright.

That’s a lot better. But we can still improve on it. There are some problem areas of note:

There’s a great big flat area on the front of his spike. This needs to be less of a straight line.

There’s a box-angle corner on the back of said sprite.

And a nasty corner on his toe.

These (except for #1) are examples of jaggies. Jaggies are when a section of line has a different size than the sections on either side. The best explanation I’ve seen of this is on Derek Yu’s pixel art tutorial, about a sixth of the way down the page. I’m going to go ahead and de-jaggify the sprite.

Tada!

Spaz is ready to play! Well… I can see a couple of problems, but I never actually stop tweaking my art even after it’s ‘done’. This is a good stopping point. In the next Pixel Art for Programmers tutorial, I will show you how to color and shade him properly, but note that even this could work.