E. Darwin Hartshorn: //Boilerplate

Pixel Art for Programmers: If You’re not Cheating, You’re not Trying (Shading and Colors)

Last week, we left you with this:

Spaz McDragon, Flat colors.

Scaled down so we can see it more objectively.

I’ve gone ahead and done a little more pixel-pushing and jaggy-correcting since then.

Pretty obvious, isn't it?

Pretty obvious, isn’t it?

Now it’s time to add some color!

First thing we need is a set of color ramps.  What’s a color ramp, you ask?  Glad you asked.  A color ramp is a set of two to five colors like this:



That ramp defines basically all the shades of green we are going to use, and has a roughly even fade from the almost black blue, to the almost white yellow, with our core green color in the middle.

I define the ramp using a program called Inkscape.  Here’s a screenshot of the file I used:



Building TheGreen Ramp

First, I use the rectangle tool to draw a rectangle.  Then I hit Ctrl+Shift+F to bring up the color options, and set the rectangle to that nice, green shade I want.

Then I duplicate the rectangle with Ctrl+D, and holding Ctrl, I drag it upwards.  Holding Ctrl ensures that it moves in a straight line.

I change the fill type to gradient, hit the ‘edit gradient’ button , and I change one node of the gradient to my shadow color (dark blue), and the other to my light color (pale yellow).  Then I add a couple of nodes, and change them to transparent.

Next I move the whole thing down so that the gradient rectangle covers the green rectangle:


And I line up five little squares underneath it and eyedropper colors from my navy-to-ivory-by-way-of-green gradient.

The best part is, all I have to do to create a corresponding ramp for any other color in the character is change the color of the green rectangle itself, then re-eyedropper the colors:



This keeps the shading looking consistent across the character.

So why use blue and yellow instead of black and white?  And why only five colors?

The answer to the first question is that light is seldom pure white, and so there is usually a sense of progression in real life from the color of the light, to shadows which seem to be the opposite color (such as yellow and blue).  Using this progression makes the characters and objects in the game world seem rooted in their world, as opposed to seeming like stickers slapped over a separately-painted backdrop.  It is also more visually appealing than a straight-up change of shade.

Here’s the final set of ramps for the character.  Note that all the ramps share first and last colors.  Note also that there are only fourteen colors total.  If we are wise, we will not even use all fourteen!



Right-O.  If you import the graphic with the ramps into GraphicsGale, you can just pick the colors right off the ramps, then flood-fill the relevant areas on the sprite.  Let’s see how Spaz looks after this:


That’s not exactly an improvement, and the colors may need some tweaking, but let’s see how shading goes first.

Right:  Here’s what not to do.  Do not pillow-shade.

Pillow-shading is when you work inward from the borders, from dark to light.  Like so:

Spaz McDragon Pillow Shaded

“But that’s not so bad,” you may say.  And indeed:  this was sloppily put together because of time constraints.  A more lovingly pillow-shaded sprite would look even better.

But it would still look like a shaped pillow, when it could look like it had depth.

So how do you know how to shade it if you’re not naturally artsy?

If you aren’t cheating, you aren’t trying hard enough.  Observe:

First, I fire up Blender, a free 3D modelling, animating, and rendering suite (and yes, I will be running tutorials on 3D, though probably not for a year or more).

Next, I start adding various shapes.  If you type Shift+A, a menu of things you can add pops up.  I’m going to pick Mesh–>Cube, here.

Hitting tab puts you in Edit mode, allowing you to edit the cube.

Hitting Ctrl+R puts you in loopcut mode.  Move your mouse around until a purple line appears around the middle of the cube, then left click, then right click.

Cube Loopcut


The loop should be automatically selected.

Spaz is a crescent shape, so I hit G (for Grab), and Y (for ‘Constrain to the Y Axis, which is forward/back in Blender’), and move my loop forward a little.  Left click confirms and puts the loop back down.

Cube Into Crescent


By the way, you can rotate the view with the middle mouse button.

You can hit A to un-select the loop, and holding Ctrl, left-click and drag a lasso to select the points you want to manipulate.  In this case, I want the top set.

Then hitting S allows you to scale your selection by moving the mouse and then left-clicking when you’re happy.  I’m going to scale it down, deselect all, grab the bottom, scale that down, and move it back (once again, G for Grab, Y for Constrain to Y axis).

Just as G grabs, and S scales, R Rotates, and like the other two, you can constrain it to any axis using the X, Y, and Z keys after you hit R, and you confirm the rotation with a left click.

Now I press Shift+A again, and this time add a cylinder.  I scale, move, and rotate it until it forms Spaz’s forehead ridge.  Pressing Shift+D creates a duplicate, which I rotate and move until it forms the ridge on the other side.

Adding Eye RidgesNo need to be exact here.  We’re not trying to create an awesome model.  That would take way too much time.

A pair of cones becomes horns.



A cone scaled way down in the X axis becomes spikes.



And a cylinder with one end scaled slightly down becomes a cute little pig nose.



And that’s all we really need.

Hit tab again to switch into Object mode.  Then add a plane.  The plane is going to be your lamp, so grab it and move it above and in front of the character, and rotate it to face the character.



Up at the top of the screen there’s a drop-down box that says  “Blender Render”.  Click that box and change it to Cycles Render.

Cycles Render is a raytracer that simulates bouncing light.  Now we just need to tell it what each object needs to simulate.

Right Click your mock-up character to select him.

There should be a panel on the right.  Click the button that looks like a glass sphere.  That’s the materials button.

Changing Render stuff


And hit the button that says New.

That’s all for Spaz!  Now the lamp.

Right-click the lamp to select it, and hit the button that says New again.

There should be a button that says “Diffuse BSDF”.  Click that button, and select “Emission” from the box that appears.  Then click in the box labeled “Strength”, and change it to 60 or so (think strength of a light in Watts.

Now smack the button on the bottom left that looks like a white sphere:

Display Type


Select “Rendered”.

Rotate your view with the middle mouse button until you get the angle you want for your game.  Viola!  Blender has given you a reference for how the lighting will work on your character.

Cheating with Blender


Back in GraphicsGale, using your Blender Screenshot as a guide, select one, and only one, shadow color for each shadowed area, and fill in shadows in similar fashion.

Shading Spaz with Blender


Lookin’ good!

The sprite is excellent as-is.  In fact, some games use this two-tone style to great effect.  Hyper Light Drifter uses a two-tone style that’s even flatter, and it looks gorgeous.  Of course, HLD has a very muted, faded look to it, whereas I’ve always been more of a chiaroscuro guy myself.

But I’m going to go ahead, make a few more tweaks, and just barely break the two-tone rule (but with a light touch).  Mostly adding detail (like nostrils and pupils), and fixing bits and jaggies here and there.  The eyes and horns are supposed to be shiny, so I went and added highlights to ’em.  And here we are:

Spaz McDragon Shaded

So, for comparison: Lines, Filled, Flat, Pillow-Shaded, and Final:

Spaz from Sketch to Final

Ah, but we are missing something, aren’t we?  Where are Spaz’s wings?

The wings are going to be created and animated separately so that we can have Spaz flap around with very minimal effort on our part.  Which gives us next week’s subject for Pixel art for programmers: Animation basics.






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.

Continue Reading >>