The Art Barn: The Cool Rules of Spriting

Those of you who know about Dinofarm Games might know about its lead designer and columnist Keith Burgun. Anyone who knows him in person would also know me, because we’re housemates. I’m willing to bet, though, that there are a few people(maybe on the internet) who know Keith and don’t know me. First off, you ought to be ashamed of yourself because I’m pretty darn amazing all-around and am especially good with kids (let me hang out with your dumb idiot kids!) But if you want to get right down to it, my name is Blake Reynolds, and I try to make Keith’s games look pretty.

I’ll be general custodian of The Art Barn, the new art column for Dinofarm Games. Its primary goal is to share some half-baked know-how about pixel art, animation and art in general. This will mostly benefit non-artists. Beginners of all types, people new to pixel art and 2D animation, and especially programmers who can’t afford to hire artists. Programming’s hard enough, chaps, so I hope I can provide fun little tutorials that may give some indy developers with no art team some quick and easy tips for making their games prettier.

For those of you who are already artists, you’re probably way better than me. This is good – I prefer learning to teaching anyway, so leave me some comments and let me know where I’ve gone horribly wrong.

This first installment is about spriting or, in scientific terms, “makin’ little mans outa ‘puter squares” (there’ll be a lot of oh-ficial lingo so keep up, jerks!) Spriting is noble work, and by noble I mean an incredibly dumb and inefficient use of your time and life. But we all know it’s worth it because pixel art is really special. It’s challenging, therapeutic and rewarding. As a practical matter, it’s ideal for small resolutions like mobile devices and hand-held consoles. As previously stated in an article by Keith about pixel art, an artist chooses which pixel goes where rather than a computer squashing and approximating pixels from a high res-digitized 3d model. This process of digitizing 3d models, will always, ALWAYS look awful. I’m not saying there aren’t terrifically talented 3D modelers out there or great looking 3D art, but crushing and blurring a 3D model into a 64×64 sprite? Who ever actually thought…

The point is, at small resolutions, every pixel counts, so every pixel should be accounted for. Behold my logics!

Though I’ve been drawing since I was wee, I’ve only been spriting for a few years now, and got my first experience on Dinofarm’s first game, 100 Rogues. Remember what I said about “incredibly dumb and inefficient use of time and life?” Well, nothing quite brings that home like my first spriting experience. We were all learning on the job, as you do when you’re a start-up team. As a result of that, and 100 Rogues’ well-over-a-year development time, there is some art for the game that I find ghastly, and some I can still sort of look at. By the end of the process, I had devised workflows and shortcuts that sliced the time practically in half. So naturally, I made up for it by making the art more elaborate and detailed, which which in turn re-lengthened my workload…behold my logics!…

Don’t make my mistakes… You have your whole lives ahead of you, and to know that you too slave over a 40px X 40px canvas for 10 hours when you only need to spend…9… well, I’m here. Come on. 3 steps to recovery. Bring it IN, Hug it OUT, and abide by the following list of principles and guidelines I’d like to call Cool Rules(I’ve also registered the trademarks for Slick Tricks, and to a lesser extent Bland Commands so don’t steal them).

Cool Rule #1. Every pixel counts

In other forms of visual art, being loose is good. When people paint they tend to value loose strokes that give them impression of, say, some dumb leaf, but computers aren’t people or your friend. Pixel art is a rigid, precise pain in the ass. We’ve already established that pixel art is mostly for low resolution, so naturally you will see each pixel. Like any form of visual art, your goal is to create the illusion of depth, light and shade, and objects in space by means of any given medium. Our medium as spriters are little teeny squares. It’s a bit like pointillism, an art movement born of impressionism. Hundreds or thousands of little dots create the illusion of objects in space. Pointillism is a precise style, but you might say pixel art is even more precise, at least when it comes to articulating tiny things like faces. In this example, mr. alchemist’s eyes and brow are composed of grays, whites, pinks, oranges and peaches. Hopefully when you look at it you’ll see “eyeball,” specifically, “crazy eyeball.” Why is it crazy? Because of 1 pixel. Adding 1 black pixel makes his iris HUGE and thereby changes his whole facial expression, even identity!

Cool Rule #2: Roughs

This one applies to all forms of illustration. Block out your form, and get major shapes down as quickly and easily as possible. In pixel art, it’s useful for 2 things. It saves you time that you know is already down the toilet, and it allows you to, instead of making a new sprite from scratch for every new character, take one “humanoid” rough and repainting it for all humanoids of the same size and kind. Even as a non-visual artist, you might be saying “duh you dumb idiot go back to your dad’s garage,” which is mean, but bear with me. Though this is a very well-known technique in spriting, most people make their roughs out of pixels. Don’t do this. I did it for 100 rogues because I read a tutorial that told me to. Here is my first humanoid rough and sprite for 100 rogues.

In these examples, I had to essentially do the job twice. Blocking out shapes and form in pixel art is a pixel-by-pixel process. Doing the rough in pixel art is just as painstaking as the final. Sure some of the lines you can just trace over, but if you’ve got to add just as much in the painting stage, and if you’re not careful you’ll have to redo a hand or a leg or worse, like if the character is fat you’ll have to redraw his chin a THIRD time! Hahaha gross!

In short, draw your roughs with tablet brush strokes. If I had done this practice during 100 Rogues I really would have gotten it done in half the time. This approach solves many problems and enhances the final product. First, it’s so tremendously faster you have no more excuses for putting off hanging out with Greg. Seriously he’s been through a lot so give the guy a call. Second, the loose strokes facilitate circles, arcs and other shapes hard to articulate with a mouse, and more organic and pleasing to look at than a circle tool. Third, using a brush creates many shades of the color you’re using. This will respond to your pressure, allowing you to hint at areas of depth, where you’re going to shade things or blend them, etc.





But I saved the best reason for this for last. You can make a stroke, check it against other frames and erase and redraw with oodles of efficiency. This will allow you to reach a higher potential of framerate vs. labor. I hope to steal ALL your girlfriends with the result of this technique when they see it in Dinofarm’s upcoming title, “Prince Auro.”

Cool Rule #3: Onion skins.

This is obvious dumb idiot stuff I know. But photoshop has a great animation window now, and you can use layer opacity for a lot of onion skin options. Those of you still spiriting in MS paint, finish losing to your grandma at Big Boggle and haul it on over to photoshop cs3 or higher. At least for the roughs.

Cool Rule #4: Modular pieces

This is another no-brainer for anyone with the least bit of experience in spriting, but usually it’s only seen for purposes of making a sprite sheet smaller or articulating only certain parts of a large sprite. You’ll see boss characters’ hands as their own sprites so the whole guy doesn’t have to be redrawn. What I’m talking about, if you’ll listen, is animating pieces bit by bit for the sake of efficiency. In the floaty skeleton ghost you just saw, I animated the cape flowing as its own animation, and once I got that looking ‘aight I made the head and hands move in their own respective animation. Then I combined the two. Another example is in the shiny crown of Auro. Tracking all those pixels as they shine across the crown while his head was moving down would have been a nightmare. So i animated the crown’s shine on its own without the moving up and down. Once I got it good, I slapped it on the unshiny rough of Auro’s head.

There are a few other things I’ll mention before I finish that I won’t qualify as Cool rules because you’ll all just call me a dumb idiot again. But a couple other quick time savers involve:

Copy/paste – don’t redraw the head if it doesn’t move, buttcrack!

Go back and forth; tweak and check – don’t be sloppy. Try, if you can, to track the movement of every pixel. Refer to Cool Rule #1. For larger sprites and high framerates, it’s a fool’s errand to try to get it perfect. As you can see, mine are far from perfect. But too many anomalies and rogue pixels, the eye will cease to be convinced and everyone will call you a “guy who looks at the toilet before he flushes it.” So just don’t blame me if that happens.

That’s it for Cool Rules. What have we learned? Something about grandmas and being thorough. Oh yeah. Be thorough, and change your grandma’s youtube password to “M.C.Buts-feast” and that’ll teach her cheatin’ ass. She has SO much time to practice Big Boggle. UGHH.

Happy spriting from all of us at Dinofarm!