Unbrick Powerup Icons

permalink         categories: game jones         originally posted: 2006-01-19 21:55:01

This is the first of what may be a series of good ol' "developer blog" entries. I'm working away in relative anonymity here, and there are some parts of this project that may be interesting to read about. Let's find out!

The game I'm working on is an "Arkanoid-style" game. That's like a "Breakout" game, but with powerups.

I'm in the middle of overhauling the entire look of the game, because I finally realized the game looked too busy. I've sent the game to two other indie shareware game developers, and both of them said the game played great but the art style falls apart. The first one said he just didn't like the art, but couldn't say why. The second one—a guy whose games look astonishing—said the initial menu "looks really stylish" (hey hey!) but then the game just got "inconsistent". He couldn't point to specifics, he just thought it was all too much somehow. I meditated on this, and tried to look at my own game with fresh eyes, and I realized that he was right.

So right now I'm busy taking things away, so to speak. Previously the game was rich with color and texture and animation going every which-way. I'm toning it all down.

As I mentioned, Unbrick has powerups. Twenty-five of them. In the game, some bricks turn into powerups when you destroy them. Since they appear on the sides of bricks, they need to be iconic, representing the powerup. And since there are so many of them, they need to be individually distinctive.

I've redone the powerup icons about twice before, if I recall correctly. Many things about this game have been an iterative process, and nothing moreso than the art. I'm not a skilled artist, and I don't always know what I want, and sometimes other things change and it makes me realize I need to revisit something. I hadn't originally planned on redoing the powerup icons on this art pass, but gradually I realized that the improved look of the game made them look a bit tawdry and shabby by comparison.

Here's a page displaying the icons as they looked a week ago. (There are only twenty-four on that page; the twenty-fifth is special, and I didn't need to re-theme it, so I omitted it.) You'll notice that the icons are colorful, and some of them are shiny, and most of them have drop shadows. In retrospect this was "adding insult to injury" with the overdriven visual style of my game.

While I was working on re-theming the game, I accidentally changed the way that the powerup icons were rendered, in a way that made them monochrome. All of a sudden they looked like international symbols for powerups, and the effect was great. So I decided to go with it. (Sometimes you make progress completely by accident—especially in art.)

During gameplay, the powerup icons are always drawn on a light-gray-to-white background. I figured they'd look smashing done all black, so they really looked like international icons. I spent all day yesterday redoing them to conform to that restrictive style; no half-shaded areas, just either opaque monochrome or clear.

Well, I did bend those rules a little. One of the last sets of icons I re-did were the "ball saver" / "activate warp" / "alternate warp" icons. I had a hard time conveying those three ideas—which are really just three different varieties of the same powerup—in three different yet related monochrome icons. Finally I cheated and differentiated the powerup icons using color, which is how the game separately represents the three varied states to you.

When I was done, I took 'em for a spin... and found that they didn't really work. The main problem was that they were now too same-y. Sometimes they can be drawn really small, and it can be hard to tell one little black blob from another. Some parts of the icons needed to be bigger, so it were easier to make out those features when the icons were small. Also, some of the font changes I'd made didn't sit well. The graphics just plain needed further tinkering, but most of all, they couldn't be all-black anymore.

I stared at the icons for a while, and I concluded that the ones that worked the best were the ones where I'd cheated and used a little color. I figured I'd try giving the icons each their own color. They would still be monochrome, just not all black. I wanted them to vary as much as possible, so I decided to take the color wheel, split it up into twenty-four colors, and assign each of the icons one of those colors. It sounded like a lot of Photoshop work to me, particularly as how I didn't know what icons I wanted to be which colors—but if it worked it would of course all be worth it.

When I sat down to work today, I decided to start by whipping up a web page showing me all the colors at once. That way I'd know what I had to choose from. I could have done it by using the color picker in Photoshop, moving the hue forward by 15 degrees each time (its Hue setting goes from 0 to 360 degrees) and copying out each "web color" hex value. But that sounded like work. Recently I'd noticed that Python had just the thing for splitting up the color wheel like I wanted, in the colorsys module. Python is my favorite tool in my toolbox, and I take advantage of almost any excuse to use it. It was quick work to block out the script, and in five or ten minutes I had something that generated a reasonable HTML file. Definitely faster than doing it all by hand.

But then I started thinking... maybe I could do all the work in Python. There's an excellent image manipulation library for Python called (strangely enough) Python Image Library. I could read the existing images in, tint them, and save them back out. Save me a lot of work in Photoshop. I didn't like the idea of not having my final art in Photoshop, but I figured I could mock it up this way, get the colors how I like it, and then finalize it in Photoshop.

It took me maybe half a day, and the script isn't exactly a thing of beauty, but it works great. The script still outputs a page, but now the page shows all the icons, which the script tinted to order. I tried out the new spectrally-colored icons in the game, and it was an improvement, but it still wasn't quite right. I tweaked a couple of the icons, and hey! it all sort of came together. After yet more tweaking, I think I'm done. You can see for yourself; here are the current icons, on the very page generated by the script. (And for those of you who are really curious: here is the script itself.)

Well, I'm still not done tinkering. Like I said, developing this game is nothing if not iterative. I'll try fiddling with the brightness on some of the icons; right now the colors are all the same brightness, and I think a couple could stand to be brighter. Thankfully, my Python makes fiddling like this totally easy. As a result I've decided to keep my Python script as part of my art creation process, and I'm checking it in.

So! Not only does the story have a happy ending, it teaches us three important morals about Python programming:

1. In Python, "the batteries are included". Python already had all the tools I needed to do my work today: a magnificent third-party image processing library, and a built-in module to do color space conversion—an obscure need, yet one that was already covered.
2. When you write your prototype in Python, odds are good that your prototype will simply become your finished product.
3. Wherever and whenever you can: automate, automate, automate. If I'd done all the work directly in Photoshop, it would have taken far longer and the result wouldn't have been as nice. But, with my mighty Python script, I can fiddle with the icons all day and have them pop out with the correct colors. It took less time and gave me more flexibility to do the work in Python. Since it's so easy to fiddle with the icons now, I'm doing a lot more fiddling, and the end result will be better.

Update 2005/01/22: I redid the fonts; they were Futura, and I think the Avant Guard looks nicer. I also fixed the inconsistent exclaimation points for "hurry up" and "extra ball", rounded the edges of the arrows of "paddle grow" and "ball grow", brightened colors 14, 15, and 17, and changed the tint so that instead of a straight monochrome it has a slight, gentle gradient. And I've re-redone them some more, removing the 12-dot and shuffling colors so things that are traditionally red (like stop signs and horseshoe magnets) are now red...ish. And rounded the corners on the arrows for the two grow icons. And played more with varying the brightness. See 'em for yourself here. And here is the updated script.