2D Skeletal Animation with Spine

Spine01Today I thought we’d talk about the animation systems that we’re using for our upcoming role playing game. The game is being developed using Unity, and Unity provides all sorts of support for 3D models, textures, and animation … but our game is 2D, so what can we do?

Well, if this were 20 years ago, we’d do what we’ve always done and make sprite sheets and page flipping animations … which basically means you draw frame 1, frame 2, frame 3, and then you flip the image from one to the next to create an animation. This method has a couple of drawbacks:

  • To make smooth animations you have to have a lot of frames
  • Lots of frames take a lot of memory
  • Sharing animations between multiple objects is difficult

So we’ve decided to go with a 2D skeletal animation system. For those of you not familiar with skeletal animation, I think the easiest way to describe it is like a paper doll where you move all the body parts to create animations. For a character, there are a series of single 2D images that make up the head, arms, legs and those images are posed around each other on top of a skeleton making your character. Through animation tools and code you can move each of these body parts around independently to make your animations. Each of the body parts are connected to each other through what are called “bones” and they behave just like the bones in your body do, when the arm is rotated the hand moves with it just like you would expect. This has several advantages which really help us out:

Spine02

  • Every animation is smooth and fluid
  • Animations don’t take a lot of memory since we’re just moving single body part images around
  • It’s easy to share animations between characters as long as they all are built to conform to the same skeleton

But writing your own 2D skeletal animation system and tools is a very time consuming task … enter Spine from Esoteric Software!

Spine is a set of editor tools and runtime code for making fluid 2D skeletal animations in 3D engines. The Spine editor is a professional level multi-platform tool that lets you create your skeleton and animate all the parts around using key frames. I can’t stress enough the quality and the amount of polish put into the editor tool, it’s a real joy to work with. There are key frames for rotation, translation, scaling, IK for posing, control of the curves between keyframes and much much more.

SpineLogoThe second component of Spine is the runtime which is how you get your animations into a game. Spine supports out of the box an enormous amount of platforms an runtimes. The full list can be found at http://esotericsoftware.com/spine-runtimes, and thankfully they already have a Unity runtime to get up and running right away. Another great feature is that all of the source code for the runtime is included so you are free to modify and tweak for your individual needs, and it’s crucial to have that kind of control over this area of the game since it’s so important.

Spine also has support for what are called “skins”, which is basically a way to swap out images on the skeleton giving you a whole new character that shares all of the animations. With just a little careful planning in your character and skeleton design, this can save you a lot of time.

Check out Spine at the Esoteric Software website www.esotericsoftware.com

EsotericSoftwareLogo

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s