Is Spine The Best Tool For 2D Animations In Mobile Apps?

The popularity of Spine is increasing rapidly among professional animators and mobile game developers. In what follows, we have highlighted some of the key factors that make this 2D skeletal animation tool really user-friendly.

For creating high-end, realistic 2D animations for mobile games, sprite sheets are most commonly used by developers. Sprite sheets offer manifold advantages, but are far from being an absolutely problem-free tool. For starters, the memory requirement (texture memory) of sprites can be on the higher side – particularly when there are many images saved in a single .png (i.e., the elements of an animation stored in .png format). Content-scaling for retina screens can be tricky as well. Many mobile app developers feel that the general maintenance requirement of sprite sheets can be difficult too, and there is hardly any room for mistakes. In fact, these reasons have been instrumental for a large number of game developers moving over to the Spine 2D skeletal animation tool (by Esoteric Software). Here are some of the best features of Spine:

1. Extensive support for game toolkits – The excellent runtime support of Spine is certainly a high point of this tool. Mobile game development experts get out-of-the-box support, while working in the libgdx, cocos2d-iphone and cocos2d-x frameworks. Those who create apps and games with the Unity 2D toolkit or the XNA/Corona runtimes can get the full benefits of Spine as well. GameMaker, Actionscript 3 and Haxe are some of the external third-party runtime environments that are also compatible with Spine.
2. Less memory requirements – Spine does away with the hassles of having to create separate images for every frame of animation. Instead, an interpolation method is implemented – which makes the animation transitions smooth (as per the frame rates). Many iPhone app developers regularly create slo-mo animations with Spine as well. Since there are no bulky files involved, Spine scores over Sprite sheets in the memory usage aspect.
3. Compatibility with all popular programming languages – This feature has been specially lauded by the worldwide game development community. In addition to supporting nearly 20 runtimes, the Spine tool is compatible with as many as 7 different coding languages generally used by developers. C#, C++, Objective C or JavaScript – whatever might be the language you are coding in, you always have the option of using Spine. The question on every iOS developer’s mind at present is, whether Spine runtimes would support the Swift language as well.
4. Easy to maintain – It’s not that mobile game-makers can make mistakes galore on Spine and still hope for a brilliant animation – but the tool is definitely easier to learn, handle and maintain than traditional sprite sheets. Only the bone data of 2D animations (hence the name ‘skeletal animations’) are stored in the Spine tool. This, in turn, opens up the opportunity of including as many unique animations and slides in mobile games as required. Thanks to the small size of Spine files, maintenance is hardly a headache.
5. Dual modes of Spine – The learning curve of Spine is not at all steep – and the presence of dual modes is one of the reasons for that. When the tool is activated by mobile app developers, it is, by default, in the Setup Mode (as indicated in the upper corner on the left side of the editor screen). Images and animation bones are created and attached in this mode. Once that is done, users can toggle to the Animate Mode – where the actual animations and transitions are created, with the help of keyframe-setting and posing the skeletal images. The systematic way in which Spine works makes it ideal for relative newbies too.
6. Available for 3 OS and in 5 different versions – Yet another indication that Esoteric intends to expand the reach of the Spine animation tool as much as possible. It can be installed on Windows, Linux and Mac systems (at iPhone app companies, Mac systems are, of course, most commonly used). Depending on their requirements, users can also take their pick from five alternative versions of Spine. The Trial version is free, while Essential, Professional, Enterprise and Education versions are all competitively priced (the Enterprise version of Spine, with a base price of $2200, is the most expensive).
7. Wide range of customized features – The feature-rich nature of Spine has also found favor among game developers and app experts. The tool has a built-in Graph Editor as well as a Dopesheet. The latter comes in handy for adjusting the animation timings seamlessly. For physical integration and hit detection, the Bounding Boxes feature is a wonderful addition. Thanks to the presence of Skins, attachments for one character can be easily reused as well. Other noteworthy features of Spine include Texture Packer and Free Form Deformation.
8. Ideal for blended animations – Developers who have struggle to crossfade multiple animations with Spriter have, understandably, moved over to the Spine tool. The latter allows two or more animated movements (say, shooting and running) to be blended in simultaneously. Since the crossfading is very smooth, there is no risk of the character movements appearing to be jerky. Representatives from leading mobile app companies have confirmed that the animation mixing in Spine is indeed of good quality.
9. Built-in help for Gimp and Photoshop users – The Photoshop script of Spine helps UI/UX designers to take full advantage of the Adobe Generator tool. Since all the image files (.PNG) are kept in sync with the PSD file – further exporting of files is not required. The 2D skeletal animation tool comes with the latest Gimp script as well. JSON files are created after the export of the PNG images. All that the developers need to do next is import these JSON files.
10. Better pixel fill rates – Instead of conventional rectangles used for game animations, Spine makes use of polygons. This, in turn, ensures high fill rates – since drawing is not possible outside the polygon, and pixel-wastage is minimal. This is particularly important for animations in iPhone/iPad games. The polygons in the Spine interface are created with a feature called ‘Meshes’.
11. Option to add procedural animations – Creating mobile games and apps using Spine gives developers greater leeway to play around with their animations. Through procedural animation, a wide range of interesting effects can be added to the characters – right from glancing in specific direction, to running along slanted surfaces, and a whole lot more. Since very few art assets are required while working with Spine, the entire procedure gets speeded up.
12. Exporting files in any format – In addition to binary files and JSON files, Spine ensures that files saved in other formats (including media files) can be exported without any hassles. Videos can either be in QuickTime or AVI format, for being directly exportable. JPG, PNG and GIF pictures/image sequences are also exported by the Spine animation tool.
13. Installing X11 is easy for Mac users – In order to work properly on Mac computers, Spine requires the presence of X Quartz. Many new game developers have been confused by the Java Error that pops up, while trying to download Spine on their systems. In reality though, this is only a prompt to install X11. Users need to click on the ‘Continue’ button, and download X11 from http://xquartz.macosforge.org (look for it on the Apple support page). After this, installation of Spine will be hitch-free.
14. Useful shortcuts with Keyframes – The icon beside Rotate, Translate, and Scale tools in Spine has to be used to set keyframes (originally set to frame zero) and proceeding with the animations. There are a couple of cool keyboard shortcuts available here as well. If the ‘L’ button is pressed, all values of the active tool(s) will be automatically keyed. On the other hand, if you press ‘K’ – the edited values will have their keyframes set. Provided that you are proficient with using Spine, using these shortcuts can help you save quite a bit of time.

With the Spine runtime libraries, all animations can be loaded and rendered realtime by the game toolkit. Assembling characters is fairly simple too (game developers do make the mistake of adding different versions of the same label on the stage though). The Spine vs Sprite Sheets debate is, in essence, a comparison between skeletal animation and frame-based animation – and the former does offer a fair few additional advantages.

Have you worked with the Spine animation tool?