Pop Goes The Weasel – Creating Jack (In The Box)

If you’ve been following along in the previous articles, you’ve seen how I create animated characters for my Windows Phone 7 games.  For my recent update of Zombie Circus, there were several new features I wanted to implement, one of which was a final battle against a big boss zombie clown.  To meet this goal, I came up with Jack, a huge jack in the box toy.

The process began with a list of questions and answers to things I wanted Jack to be able to do.  How would he make himself present on-screen?  How would he attack?  What kind of motions would he perform?  I imagined a big clown head on a long neck, swaying back and forth with each attack and spitting huge, colorful clown balls at the Ringmaster.

With the general idea in mind, I took to Photoshop for the initial sketch using the pen and tablet.  I expected several iterations of head designs to take up a good part of the evening, but it ended up coming out in one, single design sketch.

Jack's Sketch

Jack's Sketch

While doodling Jack, I had to keep in mind that he would eventually be cut up into parts, a necessity for the animation process.  I go into this procedure in some detail in another article.  This is why knowing the motions the character will be performing before sketching its design is important.

For Jack, the animation would be fairly simple – his head swaying back and forth at the top of a long neck.  During inking and coloring, each part of Jack that would be animated was placed into its own layer in Photoshop so it could be easily exported individually.

Jack Inked And Colored

Jack Inked And Colored

Jack’s individual body part images were imported into XSI, the software I use for animation.  In turn, each image was projected onto its own rectangular billboard.  A billboard is just a 3-D polygon that always faces the camera.

Jack's Parts

Jack's Parts

Each billboard was rearranged back into the complete shape of Jack’s body.  As a final part of character setup, the polygons were “rigged” with bones.  The bones are what I manipulate to move and animate the character.

Jack Rigged With Bones

Jack Rigged With Bones

A swaying motion is a simple looping animation, so I animated just the forward half of the sway.  The cel animation component in my game engine has an option for looping and bounce-looping an animation back and forth, so this why I only needed the first half of the animation.  By having my engine handle the bounce-looping, it cuts the number of required frames down by half, which in turn keeps down the amount of device memory required to hold all the frames.

Jack In Zombie Circus

Jack In Zombie Circus

The final part of bringing Jack to life was the coding.  Since Jack is pretty big, his game asset is only half-size, to keep memory and app size down.  In the game, I scale his size back up to restore his proportions.  In the screen shot above, you can see the pixelation from up-scaling his sprite, but on the phone’s small screen it’s hardly noticeable, and worked out quite well.

I used my particle system to *POOF* his box into existence on the screen with a puff of smoke.  Then the game plays an audio clip of an actual Jack In The Box being cranked.  I used a timer so that when the song gets to the “pop goes the weasel” part, I fire another puff of smoke and start playing back Jack’s animation.  The end result is Jack bursting out of his box as the box’s handle is being cranked to that classic tune.

On every game frame update, I keep track of which animation frame Jack is on.  When he’s all the way forward, I launch a huge physics-based clown ball out of him.  It’s up to the player to catch the ball mid-air with their finger, and throw it back at Jack.  Alternatively, the player can throw the ball down at the little normal zombie clowns that are attacking.  Either way, the clown ball blows up on contact and sends all the nearby clowns launching into the air.

So that’s Jack, from bundles of firing neurons in my mind to defeatable big boss enemy in the game.  Jack, meet World…World, meet Jack.

Download the free Zombie Circus game for Windows Phone 7.

About GlowPuff

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