2D Skeletal Animation with Spine Tutorial

If you’ve ever made a 2D game and needed to animate your sprites, you likely asked your artist to create separate images for each frame of the animation, like this example from iOS Games by Tutorials:

You then probably wrote some code to play through the list of frames quickly, to give the illusion of movement, like you see here:

This method is simple and it works, but it has a number of big disadvantages:

• High memory and storage requirements. Because you have to make a separate image for each frame of animation, you are using a lot of memory and storage for your textures. The bigger the sprites are that you are animating, and the more sprites you have, the bigger a problem this becomes. This is a particularly big problem on mobile devices, which only have a limited amount of memory and texture memory.
• The animations are expensive to make. Drawing individual animation frames like this is time consuming for your artist. Also, making changes to the animations after they have been completed is very time-consuming.
• You (probably) cannot make the animations yourself. Since each frame animation needs to be hand-drawn, if you are a developer this is probably something you need to rely on your artist to do – even if there’s a particular effect you’re going after.

The way to solve these problems is to integrate something called a 2D Skeletal Animation system into your games. The idea is instead of saving out each and every frame of animation, instead you save out individual body parts like this:

Then you create a small file that describes how to move the body parts around in order to perform the animation you want, such as walking, running, or jumping. You also add some code into your game to read this animation file, create sprites for each body part, and move them around according to the instructions in the file.

Of course, creating a 2D skeletal animation system by hand is a crazy amount of work. Luckily, the folks at Esoteric Software have created a great tool to help you out called Spine.

Spine is a graphical interface that allows you to create a skeleton out of each pieces of your sprite, and move it around in order to create animations you can use in your game.

Spine also comes with a huge list of pre-made Spine runtimes, which is a fancy way of saying “code you can add into your game to read Spine files, and create animated sprites from them.” Runtimes include Unity, Sprite Kit, cocos2d-iPhone, and much more.

In this tutorial, you’ll use Spine to animate a clumsy elf so that it walks and trips. Along the way, you’ll learn how to:

• Import artwork into Spine.
• Build a skeleton for the elf.
• Create two different animations.
• Save and export your work.

Note that this tutorial does not cover integrating the resulting animations into a game; that will be a separate tutorial. Instead, the focus of this tutorial is using Spine itself, which will be useful no matter what game framework you may be using.

If you’re ready to take your first steps with Spine, let’s get started!

Getting Started

First things first: you need to download and install Spine.

Spine is available for Windows, Mac and Linux. There are five versions of Spine from which you can choose.

• Trial (Free): Includes all features, but you cannot save, import or export projects. This version is great for learning the software, but you won’t be able to export your animations into your app.
• Essential ($60 – $75 USD): Contains the most important features with the ability to save, import and export projects. This version does not include some current features, such as auto-keying, dopesheets and ghosting. It also does not include support for new releases.
• Professional ($249 – $299 USD): Contains every feature, as well as all future-release features of Spine.
• Enterprise (Base price $2200 USD): The same as Professional, but for businesses with $500,000+ of annual revenue.
• Education ($610 – $8217 USD + 10% enrollment fee): The same as Professional, but for schools and educational institutions. The price of the license depends upon the number of computers supported.

For the purposes of this tutorial, you can do almost everything with the trial version. However, at the end of this tutorial, you’ll find an optional section on exporting your animations, which you cannot do with the trial version. If you complete the rest of the tutorial and are eager to see your animations running in your apps, you should consider purchasing an Essential or Professional license so that you have the ability to save and export your work.

So – choose a version of Spine and download, install, and run it. If you are running on the Mac, you may get the following message when you try to run Spine:

Click Continue and you will be directed to an Apple support page. On this page, click the http://xquartz.macosforge.org link in the first paragraph. This will take you the X Quartz download page. Download and install X11, then run Spine again and it should launch with no problems.

Once you successfully run Spine, you’ll be greeted with a sample project.

Feel free to peek around the sample project if you’d like. When you’re ready, read on to learn how to create your own animation!

Importing Artwork Into Spine

So that you can focus on learning how to use Spine, I’ve created some artwork for you to create an animated elf.

Download the art here, uncompress the folder and drag it to your Desktop. This will make it easier to find it in Spine.

Click on the Spine logo in the upper-left corner and select New Project.

In the Tree panel on the right, select the Images folder and then click Browse under the Images listing.

Browse for the SpineElf_START folder on your Desktop, select it and click Choose.

Now your Tree window contains all of the art for your elf in the Images folder.

At this point, you would normally save your project. After all, the Number 1 rule in developing is to save often.

Unfortunately, if you’re using the trial version of Spine, you won’t be able to save. However, if you’ve upgraded to the Essential or Professional version, you can Ctrl+S or Cmd+S now and save your project in the SpineElf_START folder.

If you’re using the trial version, don’t fret. You’re a developer making your own animations, which means you are bold and adventurous! That Cmd+S hotkey is for the faint of heart, which you certainly are not!