Create HTML5 Animation Sprite Sheet in Photoshop
When developing HTML5 games, sprite sheets are commonly used to implement frame based animations. A sprite sheet has multiple animation frames in a single image.
This article describes how to create a sprite sheet using the HTML5 Photoshop Sprite Sheet Creator script in Adobe Photoshop which combines multiple Photoshop layers into a single image. The script supports sprite sheets with frames that are the same dimensions and includes warnings for sprite sheets that will exceed the maximum size limitation in Safari Mobile.
Installation
To install the script, simply drop the JSX file into Photoshop's script directory.
- Mac:
- /Applications/Adobe Photoshop .../Presets/Scripts/
- Windows:
- C:\Program Files\Adobe\Adobe Photoshop ...\Presets\Scripts\
If Photoshop is open you will need to restart it afterward.
Usage
In Photoshop we will need each frame on a separate layer. One way is to load external image files via the script File > Scripts > Create Load Files into Stack... which will import multiple image files into layers.
Each layer represents one frame in the sprite sheet.
Point to File > Scripts > Create Sprite Sheet from Layers... to launch the HTML5 Photoshop Sprite Sheet Creator script.
The sprite sheet creation dialog will appear as long as there are at least two visible layers available.
The following options are available:
The following warnings are possible:
- IOS size warning
- If the sprite sheet image will be too large to be loaded on Safari Mobile if saved as a PNG. See maximum size limitation for details.
- Legacy iOS size warning
- If the sprite sheet image will be too large to be loaded on Safari Mobile (on iPod 4 or iPhone 3GS and lower) if saved as a PNG. See maximum size limitation for details.
Clicking the "Ok" button will merge all the layers into one layer with the sprite sheet.
Save the sprite sheet as a png or jpg and it is ready to use in your favorite game framework (e.g. BlocksJS).
FAQ
- Why do I get the error "No document open"?
- The script requires an open Photoshop document.
- Does the script support frames that are different dimensions?
- Not currently.
- Why do I get the error "Sprite sheet requires more than one visible layer"?
- The script requires at least 2 layers to create a sprite sheet.
Download
Code and example available at GitHub.
