Photoshop Sprite Map Script

I was recently searching for a good sprite map / sprite sheet script for Photoshop, and came across this script:
http://boxhacker.com/blog/2011/05/23/a-little-spritesheet-script-for-photshop/

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)

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

Step 1:
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:

Step 2:

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:

Step 3:

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!

2 Replies to “Photoshop Sprite Map Script”

  1. Thank you for checking out the sprite script, its nice that you have extended it too 😛

    I am actually going to use your one for a project I am working on!
    At first I was going to make the power of 2 change my self but yours seems to do the trick.

    – James

Leave a Reply