Character animation

Inkscape tutorial

This is a basic introduction to character animations in Inkscape. Obviously, this is just one way of doing animations. It’s very similar to old school cut out animations. Though, it might not be as fluid as hand drawn animations or 3D work. Its straight forward approach makes it easy to follow. In short, it works quickly and quite well with small size sprites.

Creating the [soon to be animated] caveman

Basically, it’s the same process used in the ‘creating a game character’ tutorial. I added complexity in the facial features. Also, the setup of the limps is altered.

2Dgameartguru inkscape toolbar

The Head

2Dgameartguru - spacer
2Dgameartguru - character animation

Let’s start with some circles for the main shape of the face and the eyes.

Group the eye, duplicate and mirror it. Scale it down and position the smaller eye at the right edge of the face.

Add another circle, modify the right node to form the ear.

Using the line tool draw an arrow shape with four lines. Convert the lines to curves and modify them.

Two circles create high-lights on the ears. Two squares form some thick eyebrows.

A circle becomes the neck and another one the nose. Use a gradient fill on the nose and curve the nodes.

2dgameartguru - character animation
2Dgameartguru - character animation

A circle at the bottom of the stack forms the base of the hair. The hairline ist created from a triangle. Another two circles at the top will make the beard.

Deform the hair and add some gradient fill to add depth.
Next, two more circles make the mouth and teeth…

…and three more for a pony tail (placed behind all other shapes – Page down) along with some transparent shapes for highlights.

2Dgameartguru - character animation
2Dgameartguru - spacer
2Dgameartguru - character animation
2Dgameartguru - spacer
2Dgameartguru inkscape toolbar

The Body and Setup

2Dgameartguru - spacer
2Dgameartguru - character animation

Modify another circle for the leg…

… and create a smaller duplicate for the lower leg. Create the knee by adding a bit more curve.

The feet are based on one deformed circle with two mirrored copies. Lastly, group these objects and set the pivot to the ankle.

2Dgameartguru - spacer
2dgameartguru - character animation
2Dgameartguru - spacer

The arms and hands are just modified circles. Duplicate the limbs and darken the slightly to add some depth.

Group the head and adjust the pivot points of the separate objects and you have the basic character.

2Dgameartguru - spacer
2Dgameartguru - character animation
2Dgameartguru - spacer

Note:
I mirrored the limbs in the image above just to show the ‘exploded’ body setup. There is no need for that when you use the elements in a side-on view [both feet should point in the same direction].

2Dgameartguru - spacer
2Dgameartguru inkscape toolbar

The Layers

So far we just worked on one layer. To do the ani-mations we will make use of inkscape’s layer abilities.

Creating a new stance will be a lot easier by keeping the objects on different layers and copying the changes from stance to stance as they are created.

2Dgameartguru - spacer
2Dgameartguru - character animation

Arranging the objects in a basic stance.

Bring up the layer panel via Layer / Layers or SHIFT & CTRL & L.

Our caveman is currently on layer one – by clicking the eye icon he will ‘disappear’.

The lock icon blocks the objects on the layer from being selectable or editable.

The opacity allows adjusting a layer’s transparency.

2dgameartguru - character animation
2Dgameartguru - character animation

Create a new layer using the plus icon.
In the ‘Add Layer Box’ name the layer and select the ‘Above current’ option.

Click on Layer 1 in the Layers panel and select all the objects (CTRL & A) and copy them (Edit/ Copy or CTRL & C).

Select Layer 2 and paste the objects in place (Edit/ Paste in Place or CTRL & ALT & V).

2Dgameartguru - character animation
2Dgameartguru - spacer
2Dgameartguru - character animation
2Dgameartguru - spacer
2Dgameartguru inkscape toolbar

The Layers (continued)

2Dgameartguru - spacer
2Dgameartguru - character animation

Set the opacity of the first layer down to 25% and lock the layer.

Select the Layer 2 and move an object (e.g. the head).

The layer setup allows you to work on the animation while keeping track of the past frames.

2dgameartguru - character animation
2Dgameartguru - character animation

After changing a pose copy it to the next layer, lock the old one and reduce it’s opacity.

Turn the visibility of your current layer on and off to test your animation steps.

2Dgameartguru - spacer

Note:
I work quite a lot with CorelDraw. As result, I appreciate the multiple page setup of CorelDraw documents. Instead of layering animations you just place them on separate pages. Flick through them to check your progress with easy.
The program even alows you export all the pages in one layered bitmap file. Idealy, keeping layers and pages separated.


Animating:
If you start out animating it’s helpful to go with some more basic animations first. There is nothing wrong with the ‘mad-kung-fu-360-tiger-meets-dragon-in-mid-air-move’ but it might be a little frustrating to start with.
Think simple and create something you can use in your game.  This way you keep motivated and focused.
I test a character’s setup with a simple idle animation. Usually, followed by a walking test.

Note:
It’s always helpful to check out references.  Poses, animations or colours are covered in heaps of tutorials. A lot of the reference will show you a simplyfied setup. This makes it a little easier than working off memory or your own experiences.

2Dgameartguru - spacer
2Dgameartguru - character animation
2Dgameartguru - spacer

After setting up the technical side – let’s go and attack some animations front on…

2Dgameartguru - spacer
2Dgameartguru inkscape toolbar

The First steps

2Dgameartguru - spacer
2Dgameartguru - character animation

We start out walk animation with the front leg stepping down and aim for an eight frame walk cycle.

As the body is going down a little during a step move all but the feet objects down (Arrow keys).

… and start rotating the upper legs to make the step. Rotate the lower legs and move them into position

Next are the arms – start with the rotation of the upper arms and adjust the lower arms accordingly.

2dgameartguru - character animation
2Dgameartguru - character animation

This is the start frame and also the 9th frame in the animation again as we want to make.
Copy the objects to a new layer and lock the old layer and set it’s opacity low.

After the first frame the front leg will go down. The back leg moves up while the arms swing slightly back to the centre.

the head goes down a little more (to it’s lowest point in the walk cycle). For the walk it’s essential to keep the feet level.

Again we copy the objects to a new layer and lock the old one to continue the animation on the copied elements.

2Dgameartguru - character animation
2Dgameartguru - spacer
2Dgameartguru - character animation
2Dgameartguru - spacer
2Dgameartguru inkscape toolbar

The First steps (continued)

2Dgameartguru - spacer
2Dgameartguru - character animation

Now we move the head back up a little as the back foot moves forward and front foot moves back.

The back knee is leading the legs motion – becoming visible with the front limbs taken off.

With four frames down it’s the middle of the walk.

The next frame is similar to the first frame with ‘reversed’ arms and legs. The front arm and the back leg are now moved forward.

2dgameartguru - character animation
2Dgameartguru - character animation

This is the start frame and also the 9th frame in the animation again as we want to make.
Copy the objects to a new layer and lock the old layer and set it’s opacity low.

After the first frame the front leg will go down. The back leg moves up while the arms swing slightly back to the centre.

Now we turn to Layer 2 as reference. Arrange the arms and legs to mirror this pose.

It’s the same with frame 7 which matches the 3rd frame.

Finally, frame 8 is the pose from frame 4 with swapped arms and legs.

2Dgameartguru - character animation
2Dgameartguru - spacer
2Dgameartguru - character animation
2Dgameartguru - spacer

Finally, this is a scaled down version of what the walk cycle looks like:

I hope you enjoyed this addition and it gave you some ideas how to have fun with vectors.

Get the source art (svg file) of this tutorial for free!

2Dgameartguru - spacer

Update:

After all that, I have to admit that this tutorial was fun, I still like it but it’s obsolete as far as the animation goes. In the years since this tutorial was written a lot has happened in 2D animations for games. With tools like spine, spriter, dragonbones (just to name a few) as well as the ability to animate right in the game engines of e.g. Krita or Unity, it makes very little sense to go through the pains of animating straight in Inkscape. Exporting the parts to separate pngs and taking them into the animation tool of your choice is the smarter way.)