How can I easily assembly a sprite sheet?

Question

For a project, I will need to design several 8x8 tiles and assemble them in a 256*224 frame.

My problem is that once I have all the 8px x 8px tiles, I can't figure how to easily access/assemble them without involving a LOT of file opening, copying, pasting, closing, etc.

Is there a more convenient way to do this? Ideally, I would have a panel with all my tiles, and would just have to move them on my canvas. And even more ideally, it would work with Photoshop (but I'm open to using another software too, if necessary).

Answer 1

A quick search brings up this page: ( http://boxhacker.com/blog/?s=layertoanimation ) which gives the instructions about a way to do this. In order to bring in the useful info to this page, I will summarize:

) load your tiles into a single document as layers using photoshop "file>scripts>load files to stack"

) use a script (javascript) to resize the document and then iterate through the layers, translating the position of the layer item(s)

That page has a script sample, which I have modified. I tested it on a 16columnx10row sprite sheet. It is slow.

Code follows (javascript. Save code as a text file, rename with js or jsx file extension if needed, then run from the "file>scripts menu item in photoshop). The first 5 lines are configurable variable where you specify the tile size and new document size.

I cannot give technical support on this, but you might look at adobe's help site for scripting reference information.

var newDocWidth = 16*8;
var newDocHeight = 10*8;
var tileWidth = 8;
var tileHeight = 8;
var bottomLayerFirst = false;


var appPrefRulerUnits = app.preferences.rulerUnits;

var rows = newDocHeight / tileHeight;
var cols = newDocWidth / tileWidth;

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

    var numLayers = docRef.artLayers.length;    

    if ( numLayers === (rows*cols) )
    {
        var spriteX = docRef.width;
        var spriteY = docRef.height;    

        app.preferences.rulerUnits = Units.PIXELS;
        docRef.resizeCanvas( tileWidth * cols, tileHeight * rows, AnchorPosition.TOPLEFT );

        if ( bottomLayerFirst)
        {
            var currentLayer = numLayers-1;
            var layerIndexIncrement = -1
        }else
        {
            var currentLayer = 0;
            var layerIndexIncrement = 1
        }
        for (r=1;r <= rows ;r++) 
        {   
            for ( c=1; c<= cols;c++)
            {
                docRef.artLayers[currentLayer].visible = true;

                var movX = (c-1)*tileWidth;
                var movY = (r-1)*tileHeight;

            docRef.artLayers[currentLayer].translate(movX, movY);
            currentLayer = currentLayer + layerIndexIncrement;
            }

        }
    }else
    {
        alert("Number of layers ("+ numLayers +") does not match desired canvas size.\nEnsure tilesizes in script match and you have the proper number of layers in document (should be " + (cols * rows)+ ")");
    }
}else
{
    alert("Sorry must have more than 1 image open in photoshop to work");
}

app.preferences.rulerUnits =  appPrefRulerUnits;