David Deraedt

By now, you're probably aware of the fact that Flash CS6 includes several ways to export MovieClips to EaselJS SpriteSheets, for use with the CreateJS canvas-focused game library. This is great if you work with vector based assets. If this is your focus, I recently blogged about how you can improve the generated code to adapt to your needs.

But what about bitmaps? If you're a pixel artist and want to work with raster graphics, Flash (or Zoë) is not the best way to go. My understanding is that you can work with the very nice TexturePacker to export EaselJS spriteSheets, but the support seems limited, and you still need a separate tool to draw your graphics anyway.

So why not work from Photoshop directly? I created a proof-of-concept work-in-progress use-at-your-own risk script which can export EaselJS SpriteSheets directly from Photoshop. The script is part of my CreateJS Utils github repository and you can grab it here.

Like for my Flash plugins, the goal here is more to give a starting point to create your own script for your own needs. So while you can try to use it as-is, I strongly encourage you to read the following to understand how it's built and how you can improve it.

Infrastructure

Photoshop has no built-in infrastructure for exporting spriteSheets like Flash's. So what I did is a simple extendscript file which parses a Photoshop document according to some conventions, copies each frames on a new temporary doc, and generates both a spritesheet image and a corresponding javascript library file.

Here is the very simple convention it is based on:

• Each sprite should be in a separate layer folder at the top level of the document, even if it's the only sprite in the document. The folder name is used for the resulting BitmapAnimation class name.
• Each animation should be in a separate layer folder inside the sprite folder. The folder name is used for the animation name.
• Each frame should be place inside an animation folder, otherwise it won't be processed at all. The layer name is not used (unless for some options).

While the script could also be used as a foundation for exporting other SpriteSheets, it's still very tied to EaselJS at that time. I'd love to tell you I'll support formats in the future, but I simply cannot guarantee anything.

If you want to start implement it in production, I strongly encourage you to read the release notes in detail, in particular the limits & known issues section.

Testing sprites

When creating sprites, a designer shouldn't have to waste time loading it in the actual game to see it work. This is an inefficient way to set up a designer developer workflow because the designer is too much tied to the developer environment. Of course, sprites will need to be tested in game eventually, but my point is that it shouldn't be a requirement.

So I created a very simple in-browser EaselJS sprite tester which takes your spritesheets and allows you to play each and every sprite animation easily.

It is still very basic at this stage but has the advantage to load any kind of easelJS spritesheets (not just the ones generated with my own exporters), and can run from the filesystem, which means that the designer doesn't need to have a server running to test his artwork.

Going further

I hope all this can somehow be useful to some of you guys. Again, this is all very basic and I think we can go way further to improve the designer developer workflow. I have a much more ambitious project under development related to all this, but it is simply too soon to talk about it now, so I hopefully will come back to you with an even more exciting project.