THOUGHT: Color Theory

[XkyRauh]

[Hehe... I almost feel like Spleen for doing this!!]
Edit way late: I removed the pictures; they don't exist anymore.


Xky's notes on Color Theory for Commander Keen: Invasion of the Vorticons
(and other 16 color titles)

Introduction:

When the Keen:Vorticons trilogy was released in the early 90's, its graphics were above average--crisp, clean, and simple. Keen:Galaxy continued the tradition, but with a new isometric 3/4 overhead view and some amazing color-mixing techniques. Amazingly enough, both games employed a base palette of sixteen colors; Galaxy just had a few years of experience to help it along. When you're designing your next Keen:Vorticons mod, here are a few pointers to keep in mind.

***

"Middle Colors (a.k.a. Checkerboarding)"

The Keen palette is laid out so that each color is given two shades--a light and a dark. By alternating pixels of the two within the form, you can create the illusion of a third shade between the two. Note that this technique works best on larger areas; your Keen Sprite is not likely to benefit from this, but your title screen artwork and even your background art can attain added depth.

An easy way to do this is to shade your area with 3 unique colors, and then fill in with your light, dark, and transitory colors, respectively.

More Examples:
Keen4-6 Title Screen (Keen's Shirt, Helmet; Bloog's Tongue)

***

"Grey is your friend"

Practically every 'dark' color in the Keen palette can be placed next to the dark grey and look fine. When going for a moody, dark, or otherwise harsh atmosphere, the dark colors alone cannot get the job done--often additional shading with dark grey (or in extreme cases, black) can add depth to a background, form to a sprite, and detail to anything. A simple red square can become a blob of humanoid danger or a background wall fixture based solely off of the use of grey.

Further, because the dark colors transition to dark grey so well, Checkerboarding from dark color to dark grey can lead to further shading and coloring possibilities.

More Examples:
Keen4-6 Title Screen (Keen's Shirt), Keen6 (Dome of Darkness), Keen4 (Pyramid of Moons)

***

"Shading versus Realism"

The Keen:Vorticons series had its light source in the upper left corner of the screen; that is to say, the upper left corner of most box-shaped obstacles and environments was lighted, and the lower right corner was shaded. If you're browsing this webpage with Internet Explorer, your scrollbar buttons and title bar will be shaded similarly. This simple light-one-corner, darken-the-other appearance can add depth with a minimal amount of color. However, it's often not enough to have straight lines on everything. Just as bump-mapping is useful in polygonal level design, making a flat surface appear to be uneven is handy when designing outdoor or nature-based tilesets.

Despite the rectangular nature of hit-detection boxes, not all your level tiles should be perfect squares graphic-wise. Vary the shading on seemingly solid objects and you can change the fundamental aesthetics of your levels.

More Examples:
Keen1's Girders and Ice Bridges, Keen2's Girders and Stairs, Keen3's Girders and Rocks.

***

"Contrast and Form"

Some colors (or pairings thereof) work better when grouped with other colors (and pairings thereof). For example, White leads to Light Cyan which slides into Light Blue, who lays quite nicely with Dark Blue, who can lead into Dark Grey. If you Checkerboard each step, you get W-cb-LC-cb-LB-cb-DB-cb-DG, which is 9 'colors'--quite a bit of shading and detail. Similarly, one can take Light Red into Brown (Dark Yellow) into Dark Red; add Checkerboarding and you've got a solid 5 color transition. However, these longer transitions set themselves up for certain stereotyping; the white-blue-grey streak will almost always be associated with water or ice.

That being said, contrast is what makes the world go 'round. Keen himself has Yellow pitted against Blue and Pink, with a dash of Red thrown in for good measure; and he weilds a Green handgun. The only color he hasn't made extensive use of is Cyan, and that's only if you don't count Keen Dreams! You are neither obligated to have every color on every sprite, nor only two specific colors on another. This is really where trial and error pay off!

More Examples:
Keen1 Snow to Redland, Keen3 Pink'n'Yellow Wallpaper, Keen5's various backgrounds.

***

"Painting yourself into a Corner (and a few ways to get out)"

Inevitably, you're going to encounter a few problems when dealing with colors in your mod: Too many black pixels making a part of your enemy look clumpy, trying to Checkerboard too small an area and losing the effect in the process, and even being torn between which color to use as your core background. Trial and error help to a certain extent, but one of the best ways to avoid these problems are to consult an outside source. The Keen:Modding forums aren't just about hacking executables and patching data... Start up a thread in the General Discussion boards asking for advice on a subject!

Often, too many black pixels can be evaded by use of a neighboring dark color, or even leaving an area un-outlined. Keen's shoes in the Keen:Vorticons trilogy had no 'bottom' to them; likewise, only the extremities of a sprite had a black outline. Don't worry about checkerboarding your sprites if you can help it--that's only necessary for larger areas. Lastly, be aware that Black has a very strong onscreen presence compared to most colors; but too much of any color can be a bad thing.

More Examples:
Keen3 rockfaces, Keen2 drop shading, LEVEL16.ck1's yellow pillars.

***

Conclusion

Nothing particularly groundbreaking, I'm sure, but hopefully you've become at least a bit more aware of some of the ways to work with such a limited palette. There is no formula for making a good-looking mod. Bazooka Wowbagger had practically no black outlines, while Episode X had plenty of them. Try different looks and decide which one works best for you. Don't be afraid to ask for advice on the boards!


--Xky

[CommanderSpleen]

[Hehe... I almost feel like Spleen for doing this!!]

You nearly sound it, too, except that you didn't say 'indeed' nearly enough.

---

Shading is indeed a very helpful skill to have when using a sixteen colour palette. I don't dare imagine where I'd be without all the years of practice I've had (that one art class in Year 7, about six years ago, did wonders). Strangely, it was a smooth transition from the 256-colour palette in TGF to the 16-colour palette found in Keen. The graphics in Bumpermaze Classic 2003 improved from my experimenting with the latter.

The strange thing about the lighting angle for me is that I seem to be most comfortable working from the top-right. I have no idea why, as most graphics one usually comes across use the top-left angle. I wonder how a mod would look with a bottom-left/right light-angle...? Surreal, or inverted? Might have to experiment...

That being said, contrast is what makes the world go 'round.

Amen to that.

making a flat surface appear to be uneven is handy when designing outdoor or nature-based tilesets.

It takes a lot of practice to do this well, but the end effect is always well worth it. Though I haven't really been able to do checkerboard effects very well with uneven surfaces. The cloudy areas on the CK:MB map use this technique... I'm not too happy with the way it looks at the moment, but at this point it's about the best they're going to get until I decide to remake them.

---

Hmm... I've been experimenting with masking recently. Using shading with a mask makes for some weird effects. One of the screens I uploaded the other day for CK:MB shows Keen falling through a gap of blue tiles which have a shaded circular mask set on them (black circle, surrounded inside and out by dark grey, then light grey, then white). It looks insane when Keen walks through such areas.

Anyway, intriguing reading material be this topic. Shading is one of the most fundamental requirements when working with a limited palette (though there are exceptions), and it's incredibly easy to create stunning effects with the right techniques.

For best results, go crazy and mess with the colours as much as possible. You'll either end up with some cool graphics, or... experience.

>Commander Spleen

[XkyRauh]

Two questions and a statement for ya:

Question One: Where did you post pictures of CK:MB?

Statement: Checkerboarding works best over large areas, or in areas with supporting colors around them--my experience with checkerboarding against diagonal black lines has always been negative. ;-)

Question Two: Wanna write an article that makes this one look like garbage? :-D Sounds like you've got much more artistic sense than I do (heck, just look at my little 2-minutes-to-make examples)

--Xky

[KeenRush]

First of all, cheers for writing this good stuff Xky! :) I enjoyed reading it. Maybe I also learned something. ;)

The strange thing about the lighting angle for me is that I seem to be most comfortable working from the top-right.

LOL, same for me! And I'm using the top-right as my light source.

And you haven't seen Spleeny's shots Xky? You surely have missed something, there has been quite a bunch of those:
http://jimsoftlair.tripod.com/keen/spleen/index.html

[Ilsoap]

Ooh! Those are purdy!

I look forward to that! And good discussion on color theory! I might put in my 3 cents some time.

[Ilsoap]

Here's a sprite creation link:

http://steve.neonstar.net/fighter1.htm

It's not entirely relevant to what we're doing here, but it gives some important points on fooling people into thinking you've created detail where you haven't. :)

[KeenRush]

Useful link. :)

[XkyRauh]

Most Capcom sprites stand anywhere between 80-120 pixels tall depending on age, gender and individual height characteristics. Some sprites are a little taller, standing at around 150-175...

Holy shmoley... Keen's about 32 pixels tall, less than half of the smallest Capcom fighter! And he's constructed with much less than half the possible number of colors! ;-)

That's still a fantastic article, though--and seeing the work the guy does shows just how useful the techniques are. Blending and "AntiAliasing" work wonders--but much like Checkerboarding, it seems these techniques work best on LARGER areas. I somehow doubt a littl 32x16 Keen Sprite can benefit much from shaded edges.

Kudos on the find, though!

--Xky

[Stickmanofdoom]

Great article! i will definatly try to use those techniques in my mod.

[grelphy]

Long-distance gradients are hard to achieve in a 16-color palette, even with heavy dithering. Here's several good ones to try:

white - cyan - dk. cyan - lt. blue - dk. blue - black

white - yellow - lt. red - dk.red - dk. grey - black

white - magenta - lt. red - purple - dk. grey

white - yellow - lt. green - dk. green - dk. grey

white - cyan - lt. green - ck. green - dk. grey

There are undoubtably innumerable more good ones; however, in my experience, these generally work best.

One other thing - Xky, if you're going to do a Keen color article, be sure to use the Keen palette! Your greys don't match up.

[JosephBurke]

All the above posts are very insightful and it is because of the enthusiasm in these posts that I have decided to make my own post about color theory. You should know that most, if not all, of the things I will say have already been said one way or another. Despite this I've decided to write anyway. One last thing, please note this post is more about the way I approach using colors and not the way they work.

Gray works as a shading color because color is less distinguishable in the shade. Color theory, IMO, is a person's method of dithering and when they dither, some people love doing it everywhere others don't. It's about getting the proper balance and finding out what you like.

I would encourage others not just to talk about color theory but also their approach to using colors. Here's a quick overview if how I use color.

Characters should stand out from their background, for this reason they will have no really dark shades. I have chosen this method because they are an interactive part of a game and you need to be able to focus on them easily.

Backgrounds should be subdued and not use bright colors this will help create contrast between the sprites and their background. Their being not sharp edges in the background also gives the impression of depth, let me explain, a brick wall when viewed up close will have shadows between each brick, however and at a distance these shadows will disappear. For this reason only sparingly use the color black in the background.

The ground should have a great deal of contrast. This contrast coupled with a subdued background make it easy for the player to focus in on what's a platform and what's scenery. Additionally player will never have trouble spotting a sprite in a level because the sprite will stand out from the highly contrasted ground, all movement in a level will be easily spotted.

You can call my method the primary, the important, and the less important. The sprites being a primary part of the level, the ground being the important, and the background less important. All the primary objects (sprites, points, spikes) get extra lighting that make them easily visible, the ground gets extra contrast to make it easily graspable, and the background has lesser contrast so that it doesn't distract from the first two things. You can describe my method in one sentence, "contrast has both a light and dark side the light being more visible."

Those are more a guideline to me and not an absolute method. Other methods like the one used in Bazooka Wowbagger are fascinating. I wonder exactly how many different methods and variations there are for coloring in 16 colors? :lol

[XkyRauh]

Exactly, Joseph! That's why I emphasized the "too much black" issue in sprites. Black is a very powerful color when used in the background--has its place, but is very abyssmal.

I apologize for my greys not matching up--my reds don't, either. I wrote the entire article at work, and didn't have access to any Keen-based pictures at the time. I just opened up Paintbrush and hit "16 color BMP" and it turns out the grey there is not correct. :-( I plan to edit the article above sometime in the future, anyway, to add in the screenshots that KeenRush took for me--so I'll get rid of those lousy examples.

To give the thread a bit more direction, I've got the following question: How do you guys distinguish your point-valued items? In Keen:Vorticons, it's very plain to know what tiles are worth points, from the candy bars to the teddy bears--this applies not only to their color and appearance, but their placement and use in the levels. How do you guys color your items to make them appear "getable"? This was another comment I got about my Keen1 mod; many of my point items apparently weren't obvious!

--Xky

[levellord]

Don't ! Make 'em search, hide items! Or you could just place them in an arch or colour them brightly (or make 'em look like food.)

[Ilsoap]

Well, although people think that my point items aren't really Lego-ish (and I agree, but I couldn't think of anything else unique to use as points), I distinguished my point items by the fact that nearly everything in Lego Keen has a black outline, and the point items don't. The things with a black outline are generally things that you can stand on or get effected by, so the point items are a contrast to this. (You notice this especially in the indoor castle levels.

[Stickmanofdoom]

my point items are either brightly colored or animated. the coffee mug has steam coming out of it, the tv jumps around, and gum is bright pink.