Character Creation And Animating For A 2D Engine

WSC-SOON

We recently released our first game called Wingsuit CUTE on iOS and I wanted to outline some of how we set about creating character assets for the game.

I’ll start with Elvis the Fennec Fox. Here, we see a detailed animation of him gliding along on the air currents looking for snackies.

Image

But how did we get here?

First, let’s examine the line drawings that make up each frame. We’ll start with the most interesting portion of the animation, when he turns upside down. It’s important to get the line drawings right before we go in to do the detailed colors of each frame. Movement is paramount in animation, frame detail can come later.

ImageImageImageImageImageImageImageImage

You’ll note that frames four and five are particularly similar. At first frame five was just a copy of frame four to keep the character upside down for a moment longer. However, this made the animation seem stiff and mechanical:

Image

To prevent this awkwardness in the time when he is upside down, frame five was redrawn.

Now with the redrawn fifth frame:

Image

Much more of a natural looking movement from the cute critter.

Since I took the time to do the line drawings first, I was able to catch this hiccup in the animation and saved myself the work of doing each frame to completion and then having to go back and fix whole completed frames. Line drawings first, color later.

Speaking of color let’s bring a frame from the line drawing stage up to completion!

Here’s our Cat character, Marty:

Image

The finished drawing has a nice amount of detail including shading and markings you would typically see on a tabby cat that has been made into a cartoon.

ImageImage

Starting from the line drawing we pick our color palette. Keep it simple for a cartoony feel. I want the wingsuit to be three colors, blue orange and grey. I pick two tones for each color, one for light, one for shadow. Marty himself will have three tones for his hairs and a pinkish color for his nose and ears.

ImageImage

Moving toward completing each frame I’ve added base colors to the wingsuit as well as Marty’s face. I used the lighter colors as a base and then on another layer added shadowing and detail via the darker colors. I can then use the same color swatches across each frame to make sure that coloration is consistent.

The result of all this is a smooth, detailed animation that breathes life into each character:

Image

Thanks for reading, and remember to check out Wingsuit CUTE on iOS and coming soon for Android!

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s