Lessons in Color Theory for Spyro the Dragon

Author: by Craig Stitt

In a relatively short period of time, videogame art has gone from the single white blocks found in Pong to thousands of colors wrapped around thousands of polygons. This in turn has allowed the worlds in games to evolve from a single black screen to immense 3D worlds. For those of us who find ourselves in the lucky position of being game artists, the trick is to find ways to leverage this cache of materials and palettes to create powerful, realistic worlds that draw in players. How does one do that? By educating yourself about the elements of color and production design and applying these lessons to your games, you can focus the player's emotion within a world, as we did at Insomniac Games in our Playstation title, Spyro the Dragon. In addition to color theory, Spyro's production design is explored by Insomniac Games artist John Fiorito .

The Difficulty of Color

Consider the example of the traditional painter. Subject matter, design, composition, and color must all be balanced together for the painting to come alive. Now take the example to the next level: A movie director or cinematographer has the same issues as the painter, plus the added complexities of motion, changing perspectives, and timing. In games, we face the challenge of making a movie in which the viewer can go anywhere and do anything whenever he or she wants. Our "viewers" can see our world from any distance or perspective anytime they want. How much harder does that make our jobs? We not only have to worry about what is in front of the "camera," or more precisely, in front of the player, but what is behind, below, above, and all around him or her, in real time - and it has to be fun to boot (see Figure 1).

One cornerstone of traditional art and great games is the careful use of color. What makes getting color "just right" so complicated is the fact that color has a powerful effect on our senses, and we're also very sensitive to subtle color changes. A little too much blue in a scene, and the mood of the whole world changes. Fortunately, there are a couple of techniques that can make the process of coloring a game world more manageable.

A Gallery of Worlds and Emotions

Once your basic game design has been completed, as an artist or level designer you ought to start thinking about specific ways that the world you are creating will draw the player in. Which emotions will your world or your level need in order to draw players in and entice them to stay? When selecting a level's color palette, you're also making a decision about the underlying emotion that the level will convey to the player.

I have found that it helps for me to think of the game as a gallery of paintings. In a gallery, each painting must stand by itself, yet it should also support and strengthen those paintings around it. This happens only if each painting in the gallery is balanced; each painting has been placed with complementary paintings which have been thoughtfully selected, and carefully arranged and lit. So it must be with the art and colors in a game. Each level's colors and textures should be chosen to support and strengthen not just the level itself, but the whole game.

Broad Strokes of Color

I like to work in broad strokes of color, picking two or three colors that will be the foundation for the color design for each individual level. It's important to ask yourself, what emotions do I want to evoke in players when they first step out onto the playing field? The color palette you choose will naturally depend on the nature of the terrain, the architecture of buildings, time of day, and the effects of weather. However, if you're trying to evoke a particular emotion as well, you'll have to take that into account. Do you want to fill the player with awe and wonder, or fear and turmoil? Do you want them to feel comfortable and at home, or unsettled and far from home? Once the core emotions are laid out for each level, decide which colors best elicit those emotions from the player and also work well with the other level elements (terrain, architecture, and so on).

Consider how each of the various characters within the game will fit into your color scheme. For Spyro the Dragon (a character-based platform game with a cast of dragons set in a medieval fantasy world), we made Spyro green in the earliest stages. But we quickly discovered that this didn't work with many of our primarily green environments - Spyro kept disappearing into the environment. We experimented with over a dozen different colors for Spyro before we finally found one that satisfied all our concerns: purple. As purple, Spyro didn't disappear into the grass on many levels, he was no longer the same color as several of our competitors' characters, the detail in his textures stood out, and he was a bright, fun character.

These same questions had to be asked for each and every object and creature in Spyro's world. It also was important for game objects. For example, a great amount of treasure has to be found and collected in Spyro, so it was important that players could easily identify treasure at great distances. We made this easier by applying motion and a little animated sparkle to the gems to make sure they were always the brightest thing around.

A level's core palette should contain only two or three base colors. Using these base colors, a level's detail is then defined using various shades and values along with small amounts of complimentary or contrasting colors. Be careful when extending this core palette because using too many colors can lessen the impact of any one color and you end up with emotional mud - just as if you mixed too many different colors of paint together. A variation to this rule is that some worlds may have multiple, distinct palettes, one for each area found within that world. For example, one palette for inside a building versus outside it. Even in these cases though, each of these distinct palettes should be limited to two or three colors, and there will still be one master palette, of two or three colors, which sets the tone for the entire world.

One way to check the overall state of your "gallery" - the color continuity between game levels - is to view screenshots or test swatches from each of the levels side by side, as if they were a color wheel or contiguous screenshots in a consumer game magazine. Decide if each individual level's look supports and strengthens the others. If not, rework the colors in one or more of the levels. More often than not, it doesn't take much of a change to find that balance if you catch the problem early. With Spyro, as soon as we had a rough design document with its specified worlds, we put up a white board in the art room with a brief description of the sky and the core palette for each of the levels. Further along in the development process, small color print outs of screenshots augmented the white board (see Figure 2).

The Power of the Sky

If your game takes place outdoors, one of the dominant colors in the master palette will be that of the sky. Time and time again at Insomniac we have been surprised at the tremendous impact that the color and nature of the sky has on a world. Many times when we had a difficult time getting the right emotional impact from a Spyro level, someone would suggest that we try a different sky. Every time we were surprised at the extent of the change brought to the level by the new sky. We learned that unearthly colors in a sky can create unexpected emotions, which is sometimes good if you want to make the player uncomfortable (as if he's in an alien environment), but if that's not your goal, use caution when dealing with sky colors (see Figure 3).

Recently, I designed a sky that was one of my all-time favorites. It was a misty green sky, filled with wispy clouds and distant planets. It complemented the world it was designed for, but something wasn't right. While beautiful, it also evoked negative reactions from people. Finally someone pointed out that it looked poisonous. That would have been great if that was what we intended, but this particular world wasn't supposed to be poisonous; threatening yes, but not poisonous. In the end, we went with a more naturally-colored night sky, which contained several moons and a haunting red glow on the horizon.

Consider the relative contrast between a world and its sky, and the differences in their color saturation. If the terrain is bright and saturated, then often it's helpful to color the sky using softer, desaturated colors. The reverse is also true. This helps set off the horizon against the skyline, which in turn gives the player some depth cues and aids navigation. When the terrain and sky are too similar in color or saturation, they lack the necessary contrast and appear to flatten out. Definition gets lost, and players often do as well.

Wallpapering Worlds

At Insomniac, we try to keep both the contrast and the color saturation down and still keep colors bright in our textures. Typically televisions, especially NTSC-based ones, pump up both the contrast and saturation of game colors, pushing the images over the top into a cartoonish look. Sometimes that's the goal of the game developers, but more often then not, a slightly softer, more realistic look is better, even on a cute or light-hearted game.

Shading and Lighting

The final major source of color comes from shaded textures, from techniques such as colored vertex shading. The addition of colored shading on top of rich textures can create a spectacular look, but sometimes it can be too rich. The problem is that the cumulative effect of colored vertex shading can over-saturate or intensify the contrast of texture colors. This is one more reason to keep the base textures somewhat desaturated - there is plenty of room to apply color shaders with out blowing the colors over the top (see Figure 4).

Where Am I, Where is it Safe to Stand?

The two practical aspects of videogame art show the player where it is safe or unsafe to travel, and to give him visual landmarks so that he doesn't spend too much of his time wandering around lost and confused.

The simplest way to show the player safe areas to walk is by defining edges. It's a time consuming task, but making sure that a real-time strategy game, for instance, has terrain with carefully highlighted nooks and crannies will add reality to the game and alleviate much of the frustration a player is bound to feel if he keeps getting killed because he inadvertently walks off cliffs, into quicksand, and so on. Sometimes edge definition requires a not-so-subtle value or color variation to properly indicate the edges of a walkway or where a ledge exists on the far side of a canyon. Proper texture design can also help define edges and boundaries.

Creating navigational landmarks can be helped by careful level design, but it also depends upon careful coloring. Sometimes it's the case of simply color coding similar looking objects so the player can differentiate between them. Sometimes it is difficult, when "landmarking" an area, to set aside the desire to create a truly realistic environment. There may not be a good reason why one section of the wall is colored differently from the rest, or why one cave would emit a blue light and another cave had a red light, but the player won't care about that nearly as much as they will if the caves aren't color coded and they repeatedly get lost because the caves look alike (see Figure 5).

Ageless Principles

Overseeing the color management within any game is an ongoing process. One of the most important things to do during development is to regularly take a step back and view the game as a whole. Examine each level and make sure that it works on its own and also supports the overall gestalt of the game. The textures and shaders should strengthen the settings, the settings should strengthen the game play, and the player, at a glance, should be able to see what's important what's simply eye candy. It's constantly a surprise to me, and everyone here at Insomniac, how powerful a role color plays in pulling all these elements together, or in tearing them apart.

Take advantage of the lessons learned from the traditional schools of art. Basics such as color theory, balance and composition are ageless, and we must understand them and keep our creative edge sharp by using them. It is all too easy to get caught up in tile counts and polygon limits, and miss the fact that a level is lifeless or confusing because we failed to show adequate respect for the power of basic artistic concepts.

Spyro Production Design

For the Spyro, Insomniac Games faced the challenge of creating a unique look for a new game. The production design needed to be strong and consistent enough to endure a year-and-a-half development schedule, yet even more significant was the need to set Spyro apart from an already crowded field of platform games and various titles that involved dragons and medieval worlds. To do this, our team established and followed a rigorous set of production design guidelines while making the game.

Our goal was to make Spyro the Dragon visually unique, coherent, and memorable. Well before starting production we developed a set of artistic guidelines that we came to know as our "production design bible." Our basic rules were as follows.

Use bright, saturated colors. We felt that too many games, especially 3D games, achieved their look of realism by using muted color palettes which favored gray, brown, and black. By applying bright, vivid color schemes throughout Spyro, we would stand out from the start.

Leverage the look of Camelot and fairy tales. While there were many games set in medieval and fantasy worlds, most seemed to favor a darker more serious Dungeons and Dragons look. To complement our use of saturated colors, we pursued a lighter medieval style, closer to Camelot than to D&D.

Characters should complement the environments. Spyro was going to be a character-based game, and much of its personality came from its animation. Therefore it was necessary to make the characters stand out from the environment while maintaining our fantasy theme. Often much of a character's body was gouraud shaded which allowed its design and movement to stand out to the player. By keeping the colors of the characters bright, we further emphasized their appearance while maintaining our global color palette.

Use soft textures and simple decorative motifs. Our early tests showed that the Playstation's display sharpened textures to the point where highly detailed artwork degenerated into distracting visual noise. By avoiding hard outlines, high contrast, and too much detail in individual tiles, we were able to create a soft atmospheric quality which was aesthetically pleasing, yet not distracting to game play.

These basic rules formed the foundation of the game's appearance and helped us achieve visual consistency throughout the title. With these rules established and understood by our entire team, there was little room for miscommunication or confusion since we had established a look and a definitive way of qualifying it (Figure 6).

Spyro's universe comprises six distinct worlds, dozens of animated characters, bonus flying rounds, a secret level, and introductory and win sequences. With so many characters and locations, adhering to our production design was essential. Yet at the same time we needed to give each world as distinct a look as possible without straying from our basic design rules. One of our solutions was to design extreme variation into the game's environments. Spyro begins his adventure in a castle garden and proceeds through a desert, snowy mountain peaks, a swamp, dreamscape, and finishes in a mechanical world. Furthermore, the flying rounds are made of glowing crystals. Finally, to differentiate each world even more, we designed a dramatic three-dimensional panorama at the start of each world to give the player a memorable first impression (Figure 7).

Within each of these worlds there were three levels of game play, a boss round, and a central navigational hub. Again, we faced the production design challenge of giving each level an individual look while maintaining a consistency to the overall world. Our first method was to vary the locations and geography of a level. For instance, in the desert (or "Peacekeeper") world, the settings include a fortress, pueblo village, ice cavern, and volcanic crater (Figure 8). We also created unique looks within a level by depicting varied and dramatic times of day. In the Artisan world, the levels occurred at daybreak, mid-afternoon, sunset, and under a full moon.

In Spyro's worlds we developed a series of visual motifs that emphasized the connection between them. One such motif was a member of a family of balloonists that Spyro had to hire to travel from world to world - so seeing one of these balloonists indicated the way out of the level. Likewise, within a world, a system of portals gave access to each of the levels and each portal was styled to fit its world. Similarly, the architecture within each world maintained consistent design sensibilities which included flared bases, crenellated turrets, and decorative buttresses. For added variety, we sometimes located rival civilizations in a level, which allowed us to display the contrasting styles of the indigenous and invading characters and their architecture. Regardless of a level's theme, each one shared the same amount of ornamentation, and this gave each level a rich appearance.

Some of our greatest production design challenges arose within the levels themselves. In these massive, free-roaming, 3D environments, it was very easy for a player to become disoriented and lost. Just finding a level's exit often proved difficult. Searching for that last piece of treasure or completing a spatially-oriented puzzle could be especially taxing. Getting lost could even prove fatal in any of our timed flying rounds. To prevent players from getting too frustrated we needed to supplement our production design rules with a series of visual solutions that kept the navigation of a level as straightforward as possible. Here are the supplemental design rules we created.

Use landmarks whenever possible. A landmark is a unique structure or geographical feature that distinguishes one area from another, which gives the player a reference point in the level. Specific pieces of architecture, such as bridges, castles, fortresses, or other buildings that had a strong presence and appeared only once in a particular level proved to be the most effective landmarks (Figure 9). To enhance the uniqueness of a landmark, we added specific natural features around it, such as waterfalls, rivers, rock formations, or trees.

Create gateways and checkpoints. To indicate that a player was making progress in a level, we tried visually to emphasize the transition between specific areas. This could be as fundamental as entering a castle gate or crossing a bridge, or as subtle as adding more snow on the ground to indicate higher elevations within the level. These transitions would often occur after passing through a narrow corridor or completing a long glide, and they served as memorable focal points in a level.

Balance interior and exterior spaces. We found that a variety of interior rooms and exterior spaces throughout a level provided a player with strong visual references. It also gave us the opportunity to create unique geometry. By placing a cavern between two valleys, for example, we not only defined different zones of game play, we were also able to change the look of the environment markedly and naturally. And by varying the types of spaces using caves, halls, valleys, or courtyards, we were able to create numerous unique locations throughout a level.

Change scenery lighting. Varying the lighting in different areas of a level created environments that were dramatically different. We lit interiors in a variety of ways, including natural light, fire and torch light, and any number of colored, glowing light sources. This helped players get their bearings, and also gave us added aesthetic opportunities throughout a level. Outdoor lighting varied as well. For instance, where a mountain divided two valleys, one side might be sunlit while the other lay in shade. Narrow spaces such as canyons allowed us to create strong shadows, while open places contained bright areas of sunlight.

In addition to our visual choices, a number of technical and game-play elements influenced our production design. Since Insomniac's game engine for Spyro did not use fogging to reduce the on-screen polygon count, many areas of the game were designed to hide large portions of geometry in the distance. Wherever possible, the world had to be built in solid, continuous masses, such as mountain ranges, castle walls, cliffs, and buildings. Artistically, we were careful not to build monolithic fortresses, walls, or cliffs which dwarfed Spyro. Where we needed exceptionally large sections of geometry, we tried to reduce its scale by varying the surface with unique textures, buttresses, or decoration. Fortunately, and not coincidentally, our decorative approach, fairy tale theme, and softened textures also reduced the scale of Spyro's world.

Spyro's ability to glide great distances forced us to design areas that would contain him, yet not feel enclosed. This meant that most of our worlds had a horizontal orientation and simultaneously needed boundaries to halt his free-roaming nature. Wherever possible, we sought to vary the limits of the worlds. In addition to walls, we employed bodies of water, cliff tops, or infinite drops to define our outer edges - the more boundaries in a level the better.

Our team soon learned that time was one of the biggest limitations in creating Spyro's look. In every instance we needed to streamline our production processes. We relied heavily on sketches and diagrams in our production design, because solving a visual problem on paper was much faster than using a computer. Often, a series of preliminary studies could be created in a matter of hours, instead of the days or even weeks it might take to implement one finished design on the computer (Figure 10).

Ultimately, the production design methods we used to create Spyro the Dragon were as much common sense as inspiration. We discovered, however, that defining them as rules or guidelines aided and quickened our production process. Our framework of visual motifs resulted in efficient development as well as consistent presentation. While we were always short of time, we used our production design to streamline the creation of finished artwork. Not only did the production design support the technology and game design, it also unified the playing experience. Players of Spyro were rewarded with a game that was visually logical, possessed artistic continuity, and in the end was memorable.

After finishing a degree in Art Education from San Jose State, Craig Stitt started making videogames for Sega in 1991. While at Sega, he worked creating 2D textures and animations on Genesis title's Kid Chameleon, Sonic 2, and Sonic Spinball. In 1996, Craig joined Insomniac Games and began creating both 2D and 3D art for Insomniac's debut title, Disruptor, followed by their hit title, Spyro the Dragon. Visit Insomniac Games' web site at www.insomniacgames.com.

John Fiorito is an artist at Insomniac Games where he creates wireframe models, textures, and conceptual sketches for Spyro the Dragon. He received degrees in architecture from the University of California, Berkeley, CA and illustration from Art Center College of Design, Pasadena, CA. Contact him via e-mail at [email protected].