Game Project part 3: An animated discussion

… well, a blog post about animation, at least 😉 .

Last time I left my preliminary game characters to move around the preliminary game world with their legs gliding across the ground and their arms sticking out like scarecrows’. My task since then has been to get them animated properly.

There’s a few different ways of handling animation in 3D. At the most basic level, if you want to make a character model appear to walk, you need to show the model with its arms and legs in different positions each frame to give the illusion of motion. So one method would be to just make a separate 3D model for each animation frame and show them in quick succession, one after another.

This is a pretty simple approach, but it has its drawbacks. Firstly, you’re going to have to make a lot of models! If you want a walking animation that runs at 30fps and is 2 seconds long, you need to edit and export 60 separate models, one for each frame. That’s a lot of work, and if you then want to make a walking animation for a second character, you need to do it all over again. Secondly, a lot of models means a lot of data, and in the case of a web-based game like mine a lot of data is bad news because it’s all got to be transferred over the internet whenever someone plays the game.

These drawbacks can be overcome by using skeletal animation instead. In this case you assign a skeleton (a hierarchy of straight line “bones”) to your character model, as well as a “skin” that describes how the character mesh deforms when the skeleton moves. Then you can create animations simply by determining the shape of the skeleton for each frame, and the model itself will automatically contort itself into the right shape. This means that you don’t need to store a complete new copy of the mesh for each frame, only the angles of each bone, which is a much smaller amount of data. Even better, as long as all your human models share the same skeleton structure, you can apply the same animations to all of them.

A skeleton “walking” in Blender:

Despite the big advantages of skeletal animation, I hadn’t been planning to use it at first for this game, because it requires some slightly complicated calculations that JavaScript isn’t ideally suited to. But once I’d thought about it a bit I realised that realistically I would have to use it to keep the amount of data involved (and the amount of manual effort to create the animations) manageable, so I coded it up. It wasn’t as bad as I feared and the core code to deform a mesh based on a skeleton only came to about 100 lines of JavaScript in the end.

Even small bugs in the animation code can cause effects that surrealist artists would have loved

You can make animations using Blender’s “Pose Mode” and animation timeline, then save them to BVH (BioVision Hierarchy) files. I wrote (yup, you’ve guessed it) yet another converter tool to convert these into binary files for the game engine, as well as extending my previous Collada converter to include the skeleton and skin information from MakeHuman. MakeHuman has various built-in skeletons that you can add to your human. I use the CMU skeleton, partly because at 31 bones it’s the simplest one on offer, and partly because it works with some nice ready made animations that I’ll talk about in a bit.

Here’s a simple animation of a character’s head turning that I made in Blender. It probably won’t win me any awards, but it served its purpose of reminding me how to create animations:

I didn’t, however, make that “walking skeleton” animation that I showed earlier. It came from a great animation resource, the Carnegie Mellon University Motion Capture Database. This contains a huge library of animations captured by filming real people with ping pong balls* attached to them performing various actions, and they’re free to use for any purpose. I will probably use some of these in the game, though they probably won’t have all the animations I need and I’ll still have to make some myself, so I’m a bit worried that the CMU ones will show up mine as being pretty rubbish! Still, we’ll get to that later.

Here’s one of my game characters walking with an animation from the CMU database:

With the animation in place it suddenly starts to look much more like an actual game, though admittedly a pretty dull one at this point!

Next I think I’ll turn my attention to re-organising the code a bit so that it can better manage all the assets required for an actual game – not the most glamourous of tasks but it needs to be done and will be well worth it. Then I’ll probably switch back to working on the game world and add something more interesting than a bare landscape for the characters to explore! Hopefully talk to you again soon.

(In case anyone’s interested, the current JavaScript game code runs to 1,558 lines).

* may not actually be ping pong balls

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.