Helloooo readers (and fellow animators)!

After a bit of searching, we couldn't seem to find a complete way to go from a framed animation in Adobe Photoshop to an ideally packed sprite sheet. Lo and behold, the RA Animation Exporter for Adobe Photoshop was born and we'd like to share it with the animating world. Download it now!




Click "Read More" to learn more...

Getting it to work requires no programming experience! Many thanks go to jugenjury on ps-scripts.com and Mark McCoy from torquepowered.com who supplied a couple sections of code.

Before we begin:
- Make sure you download these files, which contains: RA Animation Exporter.jsx, example.psd and exampleResult.png
- Have Photoshop CS3 or higher (it should work with CS2)
- Works with PC and Mac!

Using the Animation Tool in Photoshop:
For anyone who's never used Photoshop's animation tool, it's fairly easy to pick up. "Frames" simply alter the visibility, position and style of your layers, not its contents. If there's a layer that remains the same, you can turn its visibility on across all layers.

In terms of this script, you can have as many or as few layers per frame as you wish. Whatever appears in each frame is what will appear in the final sprite sheet. Just make sure there are no blank frames and that all layers are unlocked. I should also note that I use the framed format in Photoshop and not the timeline.



Here's pretty basic video tutorial on how to get started. Once the background layer is unlocked, the animation in this video should export perfectly.

What the script does:
- Saves the .PSD in order to revert back after the sprite sheet is finished
- Creates a merged copy of each frame
- Using the width, height and number of frames it determines the most optimal size for the final sprite sheet based in powers of two.
- After resizing the canvas, it places each frame in its consecutive order starting at the top left of the canvas.
- Once the final sheet has been laid out, it runs through a process that prevents a white halo appearing on the image. If you're unfamiliar with "White Halos", you can learn more about about it from our friends at Blurst.
- Finally it uses Photoshop's Save For Web and exports the sprite sheet as a PNG-24 onto your desktop under the same name as the .PSD.

Photoshop, javascript and you:
Working with Javascript and Photoshop actually became surprisingly easy. The two most valuable sources are the Adobe Photoshop Scripting Guide and the Photoshop Script Listener (found on page 73 in the Scripting Guide).

Basically the script listener will log any action taken in Photoshop into a text file on your desktop. If you look at my script, the bits of incoherent code are from the script listener. I added a comment on top of each section with what it does for easy reference.

The script that we use has a few more features catered to our own engine. Here's an example that you might find useful for adding your own functionality:



Installation:
First off, I've provided a .PSD that has a basic animation and a .PNG with what the script should output to your desktop. Once you download all three things, let's put the .JSX in the right place!

Navigate to your Adobe Photoshop directory and place the .JSX into

Adobe Photoshop CS4\Presets\Scripts

Launch Photoshop (or relaunch if it was open). Open up the example.psd I gave you; an 11 frame, bouncing ball. Run the script by going to File » Scripts and choose RA Animation Exporter. If for some reason it's not there, you can click Browse instead and locate RA Animation Exporter.jsx manually. The end result should be an image called example.png on your desktop that looks exactly like the exampleResult.png I provided.

Known issues:
I wrote and use it with CS4, it seems to work well with CS3 and I haven't tired it with CS2, the version Animation first appeared. If you do, let me know! Here are a few things to keep in mind:

- Make sure there are at least two frames of animation
- Make sure there are no locked layers in the .psd
- Make sure every frame has at least one layer visible

Feel free to post comments, suggestions or any changes you've made yourself!


Bug Fixes:
- Fixed an issue that caused some PSDs to set all layers to 0% opacity before placing them in a sprite sheet.

New Features:
- For pixelated animations, you can now turn off the "dehalo" section by opening the script and changing:

to



New Features:
- You can now have the exporter put your frames one after another in a single row.

Under the new Settings section of code in the script, change:
to



Download the RA Animation Exporter v1.2