2D skeletal animation tools

February 24, 2013 Game development Tools Actionscript AS3 Flash

The transition from powerful computers towards mobile devices requires optimization when it comes to memory and CPU usage. Pre-rendered animations using sprite sheets will reduce CPU usage alot, but will instead consume memory. A more balanced approach would be to use sprite sheets for body parts and then animate them using skeletal animation tools.

As a bonus this will also allow blending animations to create a much smoother and lifelike feel as well as introduce access to change animation during runtime.

This article introduces three different 2d skeletal animation tools. Although I'm writing this from a Flash/AS3/Starling point-of-view most of these tools will work with other platforms as well.


 

DragonBones

DragonBones works as a panel inside of Flash, therefor Flash Professional CS 5.5 or later is needed. The animations are rigged in the usual Flash timeline and then tweaked and exported through the DragonBones panel.

The official runtimes are really easy to work with, supporting smooth transformation between animations (something you never get using traditional sprite animations) as well as a programmatic API in order to change rotation etc through code.

Exports both animation definition in XML format as well as a sprite sheet.

Pros: Free. Good supported runtime. Easy to get started.
Cons: Requires Flash Professional CS 5.5 or later.

Price: Free
Homepage: DragonBones homepage
Download: Download DragonBones
Demos: DragonBones demos
Tutorial: Getting started with DragonBones


 

 

Spriter

Spriter was funded through Kickstarter last year and is a stand alone tool available for Windows, Mac and Linux.

Spriter does not provide own runtimes for AS3, instead they've opted to provide developers with information about the file format. This has led to two different AS3 runtimes: SpriterMC and SpriterAS.

Offered as both a free version with a good set of basic features and an upcoming Pro version which will offer a wider set of features (a comparison of the free and pro version). The Pro version is currently under development.

Pros: Allows both bone and free animation. Support inverse kinematics. Free version works well.
Cons: The UI could be easier to work with. Not separate keyframes per bone.

Price: Free / $25 for Pro version pre-order
Homepage: Spriter homepage
Download: Sprite free version
Videos: Spriter tutorial videos


 

 

 

Spine

This tool just got funded on Kickstarter and reached most of the stretched goals, promising a lot of official developed runtimes as well as event timeline, bounding boxes and more.

An impressively designed user interface makes this a very easy yet powerful tool to use. Providing two views; one for rigging and one for animation. Supports keyframing and tweaking of separate bones and transitions.

The demo version allows saving but not exporting. Available for Windows, Mac and Linux.

Pros: Powerful standalone tool. Easy to work with. Support skinning.
Cons: AS3 runtime is on it's way but not yet available. Official AS3 runtime now exists! :)

Price: $60
Homepage: Spine homepage
Download demo: Download Spine demo
Tutorial: Spine overview
Videos: Spine overview

Related posts: