Unity 2D Skeletal Animation

30 Jul 2014

One of the biggest draws, if not the biggest, of doing my own games is the opportunity to spend as much time on a feature as I feel is needed — not something you can say about most client projects where you have the constant pressure of a strict deadline on your shoulders. While most of the time, you just have to step back and realize when you’re pushing a certain feature or detail too far, sometimes you also need to bite the bullet and re-do some of your previous work.

That’s what happened on Project Cuba when I realized my character animations were not up to the quality level I was targeting for the game. There are several reasons for that — besides my lack of animation experience — but one of the biggest is that Unity’s 2D tools are still in its infancy and there really isn’t anything built-in to handle 2D animations. You have to rely on simple rotations, translations and scaling. And while sometimes that is enough to do proper animations, the workflow is cumbersome and far from ideal.

Fortunately, there are some plugins on the Asset Store that will greatly improve the process and bring to the table some very interesting features. Amongst those, I’ve tried Puppet2D and the free Unity Sprites And Bones, but there’s also SmoothMoves which seems to be pretty popular as well. While these will help you immensely in comparison to what’s provided built-in, neither of them seems to be particularly polished or a one-stop solution for all of you animation needs.

The advantages of these plugins far exceed the disadvantages, but you’ll probably find yourself fighting against the framework for a fair share of the time spent with it. I know I did with Puppet2D and Unity Sprites and Bones but also with Mecanim itself. Don’t take me wrong, Mecanim is an incredible piece of Unity and if you’re doing 3D humanoid animations I’m pretty sure there’s nothing out there that can compete with it. It makes animations transitions and blending a breeze and the editor is quite useful for those who prefer a more visual approach. However, at this stage, is still not focused and/or optimised for 2D games. It has a fairly large overhead, especially on mobile, and the API is lacking. As an example here’s what my main character setup looked like with Mecanim:

Main Character Mecanim layout

As you can see, it’s a bit convoluted since I have well over 20 animations for my main character, but it did the work reasonably well. However, with Mecanim once your animation logic starts getting too large, performance will suffer. There are some optimizations you can do to minimize the problem but that’s not the purpose of today’s post.

Today I want to show you what I think is the state-of-the-art tool for 2D animations. Meet Spine!

With an extensive, and impressive, list of features (FFD, skinning, IK, etc), but most importantly, a standalone editor and support for over 20 runtimes it’s, in my opinion, currently the way to go in terms of 2D animations in Unity (or really any other game engine). I’m not going to give you an extensive overview of what Spine is or does since you can get that from the video and link above.

I want to show you an example of an animation I did with Spine for my Project Cuba main character (Jack). Two of his most distinguishable trademarks are his pompadour hairstyle and his big donut belly. Without Spine it would be really complicated and cumbersome to get a decent animation of these elements without recurring to multiple images.

As you can see above, with Spine support for FFD (free-form deformation) and skinning (attaching bones to a mesh), I was able to accomplish a simplistic 3D effect on his belly and a bouncy effect on his hair. All without having to recur to multiple images stealing precious memory space.

I’m still in the process of converting all my animations to Spine but I can say that from what I’ve seen I’m pretty sure I won’t regret to have taken this step. In the meantime, I’ll leave you with the almost final version of Jack’s run animation.