Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
This is a PS script to make Sprite Sheets out of layers. Modified from http://www.garagegames.com/community/blogs/view/11527
// Put this file in Program Files\Adobe\Photoshop\Presets\Scripts\
// In PhotoShop menu File > Automate > Scripts: layersToSprite.js
// Arrange layers into a sprite sheet.
if (documents.length > 0)
{
// --------------------------
docRef = activeDocument;
var activeLayer = docRef.activeLayer;
numLayers = docRef.artLayers.length;
var cols = docRef.width;
var spriteX = docRef.width;
// put things in order
app.preferences.rulerUnits = Units.PIXELS;
// resize the 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);
}
}
@bflanagan2

This comment has been minimized.

Copy link

@bflanagan2 bflanagan2 commented Apr 4, 2014

Very cool. Thanks!

@dwferrell

This comment has been minimized.

Copy link

@dwferrell dwferrell commented Jul 29, 2014

Looks great! Shoot, it seems that it doesn't work with PSD CS6. It resizes the canvas fine, but then gets a transform-error.

@kaskajp

This comment has been minimized.

Copy link

@kaskajp kaskajp commented Aug 13, 2014

Thanks! It worked for me in CS6 despite the transform error.

@jcellis15

This comment has been minimized.

Copy link

@jcellis15 jcellis15 commented May 4, 2015

if i want to make the sprite sheet go from top to bottom as oppose to left to right, what should i adjust in the script?

@Jaytt

This comment has been minimized.

Copy link

@Jaytt Jaytt commented Jan 11, 2016

@baiIey

This comment has been minimized.

Copy link

@baiIey baiIey commented Apr 4, 2016

@Jaytt What'd you change with your remake?

@jsonacob

This comment has been minimized.

Copy link

@jsonacob jsonacob commented Aug 28, 2016

//I made a little modification to make it generate image from top to bottom

`if (documents.length > 0)
{

// --------------------------
docRef = activeDocument;    
var activeLayer = docRef.activeLayer;

numLayers = docRef.artLayers.length;    
var rows = docRef.height;

var spriteY = docRef.height;

// put things in order
app.preferences.rulerUnits = Units.PIXELS;

// resize the canvas
newY = numLayers * spriteY;

docRef.resizeCanvas( docRef.width, newY, AnchorPosition.TOPLEFT );

// move the layers around
for (i=0; i < numLayers; i++)
{   
    docRef.artLayers[i].visible = 1;

    var movY = spriteY*i;

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

}

} `

@jesseleite

This comment has been minimized.

Copy link

@jesseleite jesseleite commented Feb 3, 2017

@KumarSanu15

This comment has been minimized.

Copy link

@KumarSanu15 KumarSanu15 commented Mar 31, 2017

cool......

@theinteresthunter

This comment has been minimized.

Copy link

@theinteresthunter theinteresthunter commented May 21, 2018

Nice work. Thank you, JesseFreeman.

@spajus

This comment has been minimized.

Copy link

@spajus spajus commented Jan 7, 2019

An improved version which takes sprite count per row as input to break sheet into columns, counts empty spaces, is background aware and allows putting sprites in reverse order:

(latest version in this gist)

// Put this file in Program Files\Adobe\Photoshop\Presets\Scripts\
// In PhotoShop menu File > Automate > Scripts: Layers To Sprite Sheet.js

// Arrange layers into a sprite sheet. 

if (documents.length > 0) {
    var docRef = activeDocument;

    var numLayers = docRef.artLayers.length;
    var cols = docRef.width;

    var spriteX = docRef.width;
    var spriteY = docRef.height;

    app.preferences.rulerUnits = Units.PIXELS;

    var hasBackground = false;
    var layerNumbers = [];
    for (i = 0; i < numLayers; i++) {
        if (docRef.artLayers[i].isBackgroundLayer) {
            docRef.artLayers[i].visible = false;
            hasBackground = true;
        } else {
            layerNumbers.push(i);
        }
    }

    var numSprites = layerNumbers.length;

    var rowSize = prompt("How many sprites per row?", "8", "Configure stylesheet");

    var rowCount = Math.ceil(numSprites / rowSize);
    var emptySpaces = (rowSize * rowCount) - numSprites;

    while (rowSize && !confirm("Is " + rowSize + "x" + rowCount + " sheet OK? There will be " + emptySpaces + " empty spaces.")) {
        rowSize = prompt("How many sprites per row?", "8", "Configure stylesheet");
        rowCount = Math.ceil(numSprites / rowSize);
        emptySpaces = (rowSize * rowCount) - numSprites;
    }

    if (rowSize) { // cannot return from function in photoshop :/
        var reverse = confirm("Use reverse order? Photoshop creates new sprites on top, with reverse order first sprite will be the most bottom layer");
        if (reverse) {
            layerNumbers.reverse();
        }

        var newX = rowSize * spriteX;
        var newY = rowCount * spriteY;

        docRef.resizeCanvas(newX, newY, AnchorPosition.TOPLEFT);

        var startOffset = hasBackground ? 2 : 1;
        startOffset += emptySpaces;

        for (i = 0; i < rowSize; i++) {
            for (j = 0; j < rowCount; j++) {
                var layer = rowSize * j + i;
                if (layer >= numSprites) {
                    continue;
                }
                layer = layerNumbers[layer];
                try {
                    if (docRef.artLayers[layer].isBackgroundLayer) {
                        docRef.artLayers[layer].visible = 0;
                    } else {
                        docRef.artLayers[layer].visible = 1;

                        var movX = spriteX * i;
                        var movY = spriteY * j

                        docRef.artLayers[layer].translate(movX, movY);
                    }
                } catch (e) {
                    alert("Layer " + layer + " at row:col " + j + ":" + i + " failed: " + e.message);
                }
            }
        }
    }
} 
@coderars

This comment has been minimized.

Copy link

@coderars coderars commented Apr 29, 2021

Thank you @jessefreeman and @jsonacob (I was needed a vertical solution) !

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment