Character Creation And Animating For A 2D Engine


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.


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.


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:


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

Now with the redrawn fifth frame:


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:


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.


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.


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:


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



Leave a Reply

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

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

Google+ photo

You are commenting using your Google+ 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 )

Connecting to %s