It’s Alive! Bringing A Game Character To Life

In broad terms, most every game has a “main character” that drives it. Yes, even strategy and puzzle games. (In my puzzle/strategy game Steampunk Fantasy, the characters are the little pieces of junk and the game board itself. Significant time was put into making the board and its pieces come to life, giving them their character through detailed animations.)

Character design has to be fresh, hold interest, and hold the weight of the gameplay it’s expected to partake in. After the design is done, it’s a technical process of integrating the character into a moving, animated entity inside the actual game.

For many characters, the visual design process starts with sketches and concept paintings. That’s what we are familiar with — at some point most of us doodled superheroes and epic battles on paper as children.

Over the years, the canvas moved to the digital realm with the debut of the pressure-sensitive pen and tablet and scanners. It’s now economical for an Indie developer on a budget to possess these tools, and even 3-D modeling software is within reach thanks to the advent of free, open source solutions. With such an extensive toolbox of options, there is little but one’s own imagination holding back creativity.

For my recent Windows Phone 7 game, Gridrunner Girl, it made sense to use both 2-D and 3-D art assets. Technically, the game is played in 3-D with polygonal enemies and objects, 3-D matrix math, and a 3-D camera. However, since it’s a modern throwback to the old Space Harrier game, I wanted the main character’s roots to be in “hand drawn” 2-D. The challenge was to bring the main character — a 3-D model — into the game as a flat, 2-D animated art asset.

Since Gridrunner Girl would be a 2-D asset in the end, I needed a lot of frames of animation, like a flipbook or traditional cel animation where hundreds of individually drawn pictures are shown in sequence to create the illusion of movement. The original Space Harrier probably had maybe a dozen frames of animation for its main character, which resulted in choppy motion. In contrast, the Gridrunner Girl character had nearly 200 frames of animation at the end of development, to cover all of her motions smoothly.

So the main character was done in 3-D; I didn’t want to hand draw 200 frames of animation. In 3-D, I could quickly manipulate the model into static poses over time and have the software compute hundreds of in-between frames of animation (“tweens”). Those frames could then be rendered out as individual pictures that are composed into one final “film strip” image.

3D Wireframe of Gridrunner Girl

3D Wireframe of Gridrunner Girl

The first task was to match the look of a pen and ink cartoon. I used a “toon shader” to render the model, which uses the edges and incident angles of the model’s polygons to render the object in a way that resembles a traditional, hand-drawn pen and ink cartoon. If you’ve seen the anime movie “Appleseed,” you’ve seen toon-shaded 3-D models in action.

3D Render Of Gridrunner Girl Using Toon Shader

3D Render Of Gridrunner Girl Using Toon Shader

After the “film strip” was created, I loaded that picture into my game engine. My engine has a component that specifically deals with cel animation, so I can tell it the dimensions of a cel, set a frame rate, and play back the animation.

A Few Cel Animation Frames At 30% Of Actual Size

A Few Cel Animation Frames At 30% Of Actual Size

In a 2-D game I would have been done, but for Gridrunner Girl I needed to bring the 2-D imagery into the 3-D game world. The trick was to use a single 3-D polygon — basically a square that faces the camera — and project the 2-D picture onto this 3-D “billboard.” (Hence the name for this technique: billboarding.) The game’s plasma bullets and missiles use this billboarding technique.

Gridrunner Girl In The Actual Game

Gridrunner Girl In The Actual Game

It’s a lot of work, but the results are unmistakable. Playing the game, the player has no idea that Gridrunner Girl started out as a high-polygon 3-D model — they see an animated 2-D cartoon zipping through a 3-D game world.

The process is a technical smorgasbord of different techniques ultimately glued together by my game engine’s cel animation component. It’s a good example of the intimate melding of art and code in bringing a game character to fruition.

About GlowPuff

GlowPuff is a Windows Phone 7 developer focusing on XNA game development.