Spriter is a tool for creating sprite animations out of multiple images. By moving, rotating, and scaling them over a timeline you can create much more efficient 2D animations than traditional full-frame animation. While Flash animation has worked similarly for years, it’s largely incompatible with the Stage3D API that is quickly becoming mandatory to achieve adequate performance. Today’s article will show you how to use Spriter in your Stage3D-powered Flash app via a Starling and some custom classes I’ve created.

The Spriter tool is currently in the alpha stage of development, so it is not yet stable or fully-featured. However, you can download it and try it out. As such, the file format that it exports may change before the final release. My code to work with Spriter may stop working if that happens and require some modifications.

Starling, on the other hand, is quite a bit more stable. It’s currently on version 1.2 and being used in several production Flash apps. Still, new versions may break backward compatibility and, by extension, the below code.

Lastly before we look at the code, what I have is based on the work of two other developers. First, Abel Toy created several Flash-based implementations for loading and displaying Spriter sprites. Unfortunately, this code no longer works with the latest Spriter file format version. I then merged in the work of Oddysee that updates the file format handling to the latest version. Then I made a series of optimizations to Abel Toy’s code that improved performance so that it’s roughly 50x faster:

  • Switched to using texture atlases
  • Removed now-obsolete “blitting” mode
  • Cached several lookups (e.g. atlas sub-textures)
  • Minimized addChild/removeChild calls.

The bulk of the speedup here was really the conversion to using a texture atlas. The old code had two approaches. The first was to draw each image making up the sprite as its own draw call. The second was to compose the image on a BitmapData and upload it as a texture. Both of these approaches pale in comparison to the texture atlas approach which requires only a single draw call, no CPU-side composition, and no uploading textures every frame.

Now, to use the code you’ll need to prepare the assets. Here are the steps:

  1. Export the sprite from Spriter
  2. Pack the sprite images into a texture atlas with a tool like Texture Packer (free lite version or full license)
  3. Embed or load the texture atlas image and description XML in your Flash app

Then you’re set to create and use the Spriter sprite:

  1. Create a Starling TextureAtlas
  2. Create a StarlingSpriter, a Starling Sprite derivative
  3. Add your StarlingSpriter to the Starling stage and move it around like normal
  4. Call playAnimation on your StarlingSpriter to play the animation you want

The following test app will demonstrate the StarlingSpriter code and has a few keyboard controls to help you try out different aspects:

  • C – Correctness mode (just two sprites)
  • P – Performance mode (a big grid of sprites)
  • S – Toggle texture smoothing
  • H – Show hero sprite
  • M – Show monster sprite
  • Page Up/Down – Raise/lower number of performance test rows/cols

Launch the test app (default: performance mode, may take a while to load)

Download the code and assets

I hope you find this code useful. Even if you don’t use Spriter, it’s a good example of how to improve performance in Stage3D apps. I don’t currently have any plans to maintain or improve this code, but I certainly welcome any of you to do so. If you do or you have any questions about it, feel free to post a comment!