Friday, 9 March 2012

Creating 2D animations using Inkscape

Balls Abound contains a number of animated elements. I used Inkscape to hand render each of the elements below.

Flame Crab Idle Crab Walk
Pelican Flight

Each of the above animations contains at least 2 keyframes that were hand drawn using Inkscape. Inkscape provides a function for creating an interpolated series of shapes that morph from a start shape to an end shape.
Start and end shapes

Using this function you can select shapes from your key frames as start and end shapes, and interpolate between them to create a series of intermediary shapes.
Straight interpolation, left to right, no exponent

This set of shapes will define the frames of your 2D animation. There are some drawbacks to this unfortunately. You will be given back a group of objects that needs to be separated out into layers. If you want to interpolate between two objects with gradient fills you have some work ahead as well.
Gradient fills don't interpolate properly

Solid fills do fortunately interpolate, if you require that.
Solid fills do interpolate correctly

I like to separate each of my animated frames onto it's own layer, and use a dummy layer to hold a rectangle that will be my export viewport. This way I can select the viewport rectangle, hide the dummy layer, and then export the animated frame images by simply turning on the desired layer and exporting. There are likely better tools out there for this, Inkscape is very labour intensive. I'm sure this could be scripted in Inkscape as well, but haven't bother to look into it. You will need to repeat the interpolate process for each shape in your key frames, and gradient fills don't interpolate with the shape, so you will be hand tweaking fills on each frame for each shape. But the end result can be very good if you are ready to invest the time.

The pelican animation made use of the exponent feature in Inkscape's interpolate function. When interpolating between two shapes you can set an exponent which will create an easing function. The size of the exponent determines the amount of easing.
Exponent = 1, leftmost shape selected first

The order in which you select the two end points of your interpolation determines which end the easing occurs.
Exponent = 1, rightmost shape selected first

The easing on the extremes of the pelicans flap are baked into the animated frames, this allows the animation to be run at a constant frame rate in the game, but still appear as natural flight.

The torch animation uses a bunch of code to alter the timing of four distinct stages of the flame animation that run in an endless loop. The smoke emitted from the torches is synchronized with the flickering of the flames. Other properties of the flame animation, including the lighting, are affected by the Perlin noise function. Perlin noise with the right inputs can produce output that flickers very much like fire.

I used Blender to create the balls and the coconuts.

Beach Ball Happy Ball Wood Ball Eight Ball Eye Ball Coconut

Each of the above renderings used the same technique. Using Blender, create a spherical 3D model and point the camera some distance from it's circumference, and make the ball fill the cameras view. Then setup a timeline where the camera rotates 360 degrees around the ball for however many frames you want the animation to take (I used 64 frames; though most of the balls repeat half way round and have been shrunk to 32 images). In the game the balls have a a bunch of simple math applied to calculate the circumference of the ball and determine the distant that the ball needs to move/roll before the next frame should be displayed.  Keeping track of setPosition calls it is possible to adjust the sprites display frame and rotation to provide the illusion of a rolling 3D ball.

In the game the coconuts rotate in accordance with a Perlin noise function.  The rotation of each coconut is based on the output of the Perlin noise function that has been provided x, y, and z as coconut position x, coconut position y, and time, respectively.  When the game is in play, the x and y parameters above have an additional play ball offset added to each.  This additional offset causes the spin of the coconut grid to be affected by the position of the in play game ball, the effect is subtle.


  1. The content was really very interesting. 2d animation studios I am really thankful to you for providing this unique information. Please keep sharing more and more information......

  2. wow that is a good tutorial. Many people do code a game as I see but I hope to be a game designer too^^ Anyways Your last post seem to very far away. What happened? what happened to your game. And what you did afterwards?