loading please wait..

Spine 101: Animating in Spine


As many of us know Spine is an animation tool that focuses specifically on 2D animation for games. We started off on Spine in March of 2015, from scratch. We have come a long way in discovering and learning the characteristics of it. Here are some basics of Spine.

Getting started

Spine opens up with the Setup mode by default. You can toggle between the setup and Animation mode by clicking on the Setup icon in the upper right-hand corner and toggle back the same way.



                                                                                                                                                  Setup mode:


Characters can be rigged according to the needs of the animators. Spine follows the same rigging principles as a 3D package. Joints are drawn in a hierarchy that mimics a real skeleton and supports both IK and FK.

Character rigs are created with layers just like photoshop. By changing the Draw order of the rig, images can be moved up the order or down the order.

The great thing about rigging in spine is that images can be easily updated and rigs can be updated quickly. Provided that the image size and name should remain same, update should happen in the same folder location. The images should be exported with tightest fit. Any extra area should be deleted.

Vertex Weights

By default all images have 4 vertices each after they are converted to mesh. More points on the images can be added to get ideal deformations. Vertices should follow the contour of the image to get best deformations.


Vertex Limitations

For best performance in the game engine the rigs should be ideally as light as possible. This would mean keeping the vertices to the minimum. A library is maintained with things like facial expressions, hands and other parts can be swapped to animate lip sync or hand gestures. The weight of library images does not count runtime, only the images appearing/rendering runtime count towards the processor load.


Animation Mode:

An ideal workflow for spine would be Pose to pose keyframing, from blocking to final. Keith Lango’s animation process can be applied here as well.


Keyable attributes:

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                Every bone has four channels each: scale, rotate, translate, and shear.


Setting key frames

Setting key frames is simple and straightforward. All keyable channels are available to you to animate in a simple and clear UI. You set keyframes to the joints in the skeletal based 2D animation system. The advantage is that complicated designs and detailed 2D characters can be animated with ease. Doing this with traditional 2D animation would be difficult and time consuming.


The animation plays in a loop by default. You can easily change and customize the range of animation to be looped.



Modifying Keys

When you wish to adjust the timing, keys can be easily moved around the timeline to adjust timing. The Spine timeline displays all the key frames set for the character even if nothing is selected. This saves you precious time by not having to select everything manually. All keyed joints are automatically selected which reduces the chance of human errors. Works great for animators who work with organized keyframing.


A great feature to do that is the Shift keys option which allows you to move the keys frames without having to select all the keys after that particular key frame. This feature automatically selects all the keys on the right to the key that you want to adjust, depending on what direction you want to move the keyframes in.



Auto key:

It automatically sets a key each change any attribute to animate saving you the trouble of setting a keyframes manually. A first key still has to be set manually.


Animating the Scale attribute of the images

Although this is used sparingly, Scale keys feature is an upgrade on the flip X & Y feature which existed in the earlier versions.You could just flip the entire character or just a particular bone in the earlier version. This new feature allows you to set custom scale values and is not just limited to the values of 1 and 0.


Graph editor

Spine offers the animators to set how the transitions are interpolated. Standard interpolations like Spline, Stepped, Linear are available. Custom interpolation can be saved and reused.




            Mesh Animation

Each image in spine is converted to a mesh in Spine, each vertex on the mesh can be keyed. We try and keep mesh animation to a minimum for optimal performance in the game.

Mesh animation should be used judiciously because it is more performance intensive as compared to animating a bone.


Animating opacity and color :

The opacity and slot colour of the images is an animatable attribute in spine.




                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       Import Projects:


Skeleton import

The skeleton import option allows you to copy a complete skeleton from one image to another which requires a similar bone structure. In case the skeleton is not exactly what is required you can make further changes to suit your needs.


Animation import

On any given project there might be any number of animators working independently. Sending so many different files to the client is inconvenient. You can import all animations on a particular rig and compile them into one single file. This is helpful in both backing up data and sending deliveries.

Posted on September 1, 2016 in Developement Diary

Share the Story

About the Author

Leave a reply