Simplify 2D sprite sheet creation with photoshop scripting

You want to use Photoshop for your pixel art creation? Really? If you are not working for a big game development company and you want to pay thousands of dollars for an application like Photoshop, then you are really crazy ūüôā Cause there are cool free tools for doing that stuff… Like Gimp, Paint.NET… or the awesome Graphicsgale. No? You still want to use Photoshop. Okay dude.

A Useful trick for you

There is a cool Photoshop script to speed up your progress a lot. Found it in a book written by Jesse FreemanBuilding HTML5 Games with ImpactJS. Cool script for creating a tileset of you sprite layers in Photoshop. With this script you will save a lot of time you can spend doing more important things. Hey Jesse sorry for adding this additional lines of code… only some cosmetical improvements I swear it ūüôā

What you need

You need Photoshop CS3 or higher, and a texteditor (maybe SublimeText3). You don’t need much, as you can see. For all of you, who didn’t notice: Photoshop is expensive, but you can do really powerful stuff with it. Photoshop uses JavaScript (.jsx) for scripts like this one I wanna show you in a few moments. If you want to know more about scripting Adobe Applications you should take a look to the Adobe documention. It can simplify your workflow a lot.

Okay lets write the script

/*
    Create a tileset out of Photoshop layers
    This Script was originally made by Jesse Freeman
    and was mentioned in the book "Building HTML5 Games
    with ImpactJS". Nice resource for starting gamedev
    with html5 and ImpactJS.

    I've added some helpful lines of code :)     
*/

#target Photoshop // we only want this script started with PS 

// We want to make sure, the user wants to have his/her layers as a tileset
var result = confirm("Sure to create a tileset? Layers will get lost?", false);  

// If user is sure to create the tileset
if (result == true) {  

    // document not empty?
    if (documents.length > 0) {

        docRef = activeDocument;
        var activeLayer = docRef.activeLayer;

        // how many layers have we got
        numLayers = docRef.artLayers.length; 

        // whats the width of our document
        var cols = docRef.width;
        var SpriteX = docRef.width;

        // order layers
        app.preferences.rulerUnits = Units.PIXELS;

        // Resize Canvas
        newX = numLayers * SpriteX;
        docRef.resizeCanvas(newX, docRef.height, AnchorPosition.TOPLEFT);

        // move the Layers Around
        for (i = 0; i < numLayers; i++) {
            docRef.artLayers[i].visible = 1;
            var movX = SpriteX * i;

            docRef.artLayers[i].translate(movX, 0);
        }

    }

}

As you can see, scripting in Photoshop is not as hard as it sounds like… You now have to save the code as whatEverYouWant.jsx at a folder of your choice. If you now have a Photoshop file with 10 x (16×16) layers containing your game main character, you now have to go to “file > scripts > browse“, choose your whatEverYouWant.jsx and your tileset will be finished in a few seconds. Isn’t that cool?

Hope you will have fun using Photoshop for game development ūüôā See ya!

Leave a Reply

Your email address will not be published. Required fields are marked *