Laying out celled sprites & Photoshop automation

Mark McCoy — 2006-11-01T22:56:29+00:00

Lately I've been making sprites from 3d renders. The brutal bottleneck in this process has been getting my directory full of rendered files all laid out into a sheet of celled sprites.

So last night I did some tinkering with Photoshop's javascript interface.

The idea was to take a Photoshop file that has all the sprite cells as layers and convert it into a sprite sheet. Like so:

The initial layered file can be easily made using ImageReady's "Import folder as frames" menu option. Move back into PS (crop the file if needed) run the script and you have yourself a celled animated sprite.

Set the number of columns at the top of the script with the 'cols' variable. (Currently set to 5.) The script figures out the rest (based on the current size of the canvas). Bonus points to anyone who wants to script a little UI to allow user input.

Install it in on your machine in C:\Program Files\Adobe\Photoshop\Presets\Scripts\layersToSprite.js
In Photoshop run it by going to File > Automate > Scripts: layersToSprite.js

    // Put this file in Program Files\Adobe\Photoshop\Presets\Scripts\layersToSprite.js
    // Run in PhotoShop: File > Automate > Scripts: layersToSprite.js

    // Arrange layers into a sprite sheet.

    if (documents.length > 0)
    {
        var cols = 5;
       
        // --------------------------
        docRef = activeDocument;   
        var activeLayer = docRef.activeLayer;

        numLayers = docRef.artLayers.length;    
       
        var rows = Math.ceil(numLayers/cols);
       
         var spriteX = docRef.width;
         var spriteY = docRef.height;   
       
        // put things in order
        app.preferences.rulerUnits = Units.PIXELS;
       
        // resize the canvas
         newX = spriteX * cols;
         newY = spriteY * rows;
        
         docRef.resizeCanvas( newX, newY, AnchorPosition.TOPLEFT );
             
        // move the layers around
         var rowi = 0;
         var coli = 0;
        
         for (i=(numLayers - 1); i >= 0; i--)
         {    
             docRef.artLayers[i].visible = 1;
            
              var movX = spriteX*coli;
              var movY = spriteY*rowi;
             
             docRef.artLayers[i].translate(movX, movY);
            
             coli++;
             if (coli > (cols - 1))
             {
                 rowi++;
                 coli = 0;
             }
         }
    }

This script assumes that the only layers you have in the file are sprites, and that all sprites will be the same size. Also I assume that the bottom layer is the first cell and the top layer is the last cell.

It's not the most robust tool in the world but it'll save me some time, so I thought I'd share. For those who just want a zip file, it can be found here: layersToSpirte.zip

Will work with CS, may work with 7 if you have the scripting plugin installed.

Feel free to modify, expand and share any improvements (or alternative tools).

RIP: Eric Elwell 2005 - 2006. We hardly knew you...

Mark McCoy — 2006-06-09T23:37:01+00:00

Eric Elwell: Intern, artist, friend. Rest in peace buddy. We hope you have gone on to a better place.

Captions for above from left to right:

1. Eric hard at work getting the Mighty Fist demo ready for GDC.

2. Eric shows his love for Marble Blast Ultra.

3. Eric and fellow intern Anthony Fullmer play the 'Tim Aste Orbz mini game.' The innovative game play involves the player scrolling through the high-score list and trying to get it to come to rest on score #37: TIM. As in Tim from Tim Aste's content packs. Part game, part performance art, the sounds effects for the game are performed live.

4. A random picture from the GG whiteboards.

Pictured below: The memorial set up in Eric's honor as seen above the desk where he once sat while creating a mix of game ready art assets and random comments. Not pictured: The memorial of the unknown intern and the eternal flame set up in honor of Eric and all the other interns that have moved on to the big contracting gig in the sky.

Eric Elwell, Intern: 2005 - 2006.

Blog for Mark McCoy at GarageGames.com

Laying out celled sprites & Photoshop automation

RIP: Eric Elwell 2005 - 2006. We hardly knew you...