One of my various side-projects is getting some simple 2D skeletal animation working, since dealing with that would be a useful skill if I wish to make some side-view 2D games at some point. But more importantly, it's interesting.

Most modern games use skeletal animation. This means that for each game character, instead of specifying the location of every single pixel or vertex for each frame, just the angles between bones at joints is given. Even this doesn't need to be given for every frame, because the positions can be interpolated between keyframes.

For 3D it isn't enough to just store an angle, because the joints can twist in more than one way (pitch, yaw, roll). To make things simpler, I thought I would start with 2D. I am not seeing the 2D case appearing much in games, it seems like most games draw the animated characters directly frame by frame. Why is that? Perhaps it just doesn't look so good? This is what I am setting to find out.

In 2D, the angle of each joint changes over time and is a single value. So for each joint there is some function f(t) which gives the angle. My first attempt will be to assume that this function is a cubic spline where the "knots" (control points) are the keyframes. To this end, I started by making a spline editor where knots can be added and deleted.

Even though this might seem simple, it ate up two evenings because I had to get a bit into the math involved to get the spline to wrap around nicely. As you can see in the above picture, the end connects to the beginning so that that if this spline represented an animation, it could repeat seamlessly.

Now that I have this editor, the next thing I need will be some kind of editor where I can specify the skeleton of the character. I will at least need some way to create bones and to tell the editor to which other bones they are connected, possibly with constraints (joints can't bend without limit). I started to question if this whole thing would be possible at all and started paper prototyping it.

It seems possible to represent a character animation like this, although I noticed that even though it is 2D, it is still important to know which bone is supposed to overlap which other bone. Correct drawing order will need to be maintained so that the bones of the front arm will pass over the bones of the arm farther away from the viewer.

I even considered making the "editor" work by just having a webcam pointed at my desk and trying to find the positions of the cardboard bones from the picture, but when trying to actually create an animation by hand I started feeling that the software might actually be better. When editing these cardboard bones by hand, the constraints and connections are not honored. It's easy to accidentally detach an arm.

This is the blog of Bemmu Sepponen, an expat living in Tokushima, Japan.