Research and Design

Counting to 5

By Annie Wilson on 9 September, 2016.

I need to discover how we were going to animate a hand so that it would count to 5 — simple right?

Late last year I started on some concept design for one of our studio side projects and after being parked on the “too busy to work on side projects” shelf, I recently dusted off the illustrator files and started looking into how I might turn static concept artwork into some animated video game assets.

Iteration 0

Using Photo Booth on my Mac, I filmed several crude videos of myself counting with just my hand. I then brought the videos into Photoshop where I cut them up into segments to get a more accurate idea of the finger movement and timing between down and up finger states.

Screenshot of a video editing application and hand clip

How many fingers am I holding up? (33.4 megabytes of fingers is the correct answer)

Something surprising I discovered was that the actual hand wasn’t moving much, just the folds in the hand and depth of shadow cast by the fingers that remained down. With this information, and in the name of keeping things simple, I decided to cut apart the fingers from the hand and treat them as individual keyframes, which would all attach onto the one static hand shape.

Further down the line I thought this would also mean that we could change the order of fingers extending, or animate any digit independently with relative ease.

Drawing the in-between keyframes

The in-between state from ‘finger down’ to ‘finger up’ is an important one as it has the power to bring the hand movement to life and make it look real. However it is also only shown for a fraction of a second so I didn’t want to go overboard with detail that your eye isn’t realistically going to pick up on. With this in mind I decided to only draw one keyframe for each fingers in-between state.

Illustrations of individual fingers

A bunch of creepy decapitated finger worms

Hand counting to five animated

Something about how this animated felt a bit clunky for me, it didn’t feel like a smooth transition. Almost as if the finger was ‘flicking’ up, rather than extending naturally.

I watched the reference videos of my counting hand through a few more times and realised that there is never really a ‘clear’ keyframe between fingers, just a blurry outline of a moving finger.

From here I jumped into photoshop to blur the frames in-between, and attempt to make it look a bit more natural.

Frame sequence of hand animated

The Counting Order

Remembering a pivotal scene in Inglorious Basterds, where (spoiler alert) a character impersonating a German Nazi counts to 3, giving themselves away as not bring a true German, I wanted to make sure I got it right in context for how Australian children are taught to finger-count.

Researching online I discovered most European countries start counting thumb first, whereas the UK, US and Australia all start counting from a closed fist, index finger first and thumb last. This is also the case with Australian Sign Language (Auslan).

Getting the Timing Right

Below are several timing tests I put together, at various speeds and intervals of finger extension. Through my own reference videos I discovered that it took on average .25 seconds for one finger to go from a complete down state to an up state.

Although the game we’re building will have other animated elements, the real core to the visual experience will be the movement of the hands and fingers, so I’m interested in exploring the core of this animation.

Which version do you like?