Animating a game character – from Inkscape to Spine

Inkscape/ Spine Video Tutorial

This is the 3rd video tutorial in the ‘caveman series’. I will be taking the art from Inkscape to Spine and animate the game character. Part 1 covered the head and the general approach while part 2 was all about the body, arms, and legs. In this video, I will arrange and export the art from Inkscape. These files are taken into Spine to set up the key pose and create an idle and walk animation.
The caveman was first created in an old [now obsolete] tutorial on character animation. The design was nice but missing detail and depth. Since then [2014 to now] Inkscape has constantly improved and new ways of animating game art have evolved. It is now possible to quickly and easily add a layer of polish using clipping groups, blurred shapes, and work with layer blend modes. Rather than animate frame by frame – which is doable in Inkscape [even if it’s not designed for animation] – I am using skeletal animation.

Skeletal animation

The character/ object is broken up into separate parts that are connected to a rig/ bones system. In the animation, these bones are being transformed. They are rotated, move, scaled, or skewed and the images assigned to them are displayed accordingly. There are a couple of advantages. A lot fewer assets – as different animations of the same character work of the same sprite sheet. More flexibility as assets can be replaced [in code or in the editor] to allow changes in appearance or tools/ weapons without having to rework the animation. The ability to alter animations in the game through code.

2Dgameartguru - spacer
2Dgameartguru - spacer

I hope you had as much fun with this video on animating a game character done in Inkscape using Spine.

The same workflow of animating the character would apply in Spriter, DragonBones, or Unity and Godot just to mention a few. I was told that Blender has a similar setup, even though I have not tried it myself. Yet, my personal preference is Spine as it allows skewing and IK [inverse kinematics – restricting the movement of connected bones], which makes animations that little bit smoother at times. The last time I checked, Spriter was still missing these functions.

I am sure there is a bunch of other tools that work in similar ways. Ultimately, it depends on what you feel most comfortable with. Animation is at least as much fun as art creation. The right tool makes it that much more fun. Enjoy it!


Get the original caveman source art (svg file) for free!

2Dgameartguru - spacer
2Dgameartguru - adding shading and detail to your vector designs
2Dgameartguru - adding detail to character designs
2Dgameartguru - refining a game character
2Dgameartguru - refining a game character
2Dgameartguru - animation a game character in Spine
2Dgameartguru - adding shading and detail to your vector designs
2Dgameartguru - adding detail to character designs
2Dgameartguru - character concept Smithy
2Dgameartguru - character concept blob in Inkscape
2Dgameartguru - spacer

Check out more video tutorials on our youtube channel!

2Dgameartguru - spacer
2Dgameartguru - spacer
2Dgameartguru - spacer
2dgameartguru - cute and colourful character design2Dgameartguru - spacer