Jack Dye

I was recently searching for a good sprite map / sprite sheet script for Photoshop, and came across this script:

However his approach assumed a graphics engine would take any size image as a sprite map, with myself working in XNA I needed a sprite map that generated images in powers of 2 (32, 64, 128 etc.)

With some tweaking, and learning of JavaScript, I have modified the original to output power of 2 sprite maps:

The script comes in 2 flavors;

1. Square centric with the generated map being the closest power of 2 in a box layout (Top)


2. Dimension aware, and filling the maximum possible horizontal texture size before extending vertically (Bottom)

more

The script is compactable with Adobe Photoshop CS3, CS4, CS5 and will have you making animations in no time.

Here I've taken the export images from blender and converted them into a transparent sprite map.

Download

1. http://jackdye.co.uk/Uploads/SpriteMapClosestSquare.jsx


2. http://jackdye.co.uk/Uploads/SpriteMapBoundsFit.jsx

These are completely free to use/modify; Why pay the ridiculous prices some SpriteMap plug-ins charge, if you only need the basic feature?

Method

Import all your sprite images as layers using Photoshop's batch stack script:

Go to File->Scripts->Load Files into stack

Click Browse then select all your files, then click OK and wait a few minutes for it to process:

You should then have a layerd Photoshop image that looks rather ugly:

Now click File->Scripts->Browse

Select the Script you downloaded above, double click to run:

You should now have a sprite map for your images:

If you need to set the max dimension of the SpriteMapBoundsFit.jsx, open it up in notepad and edit these lines:

Limitations

You should only use source images that are a power of 2 and are all the same size

The sheets are ordered from bottom to top

Credits

Thanks to box hacker who initially wrote the script, support him by visiting his site above!