Prev/Next Blog
by date

Laying out celled sprites & Photoshop automation

Name:	Mark McCoy
Date Posted:	Nov 01, 2006
Rating:	4.7 out of 5
Public:	YES
Comments:	YES
RSS Feed:	or Subscribe with .
Profile Page:	View profile page for Mark McCoy

Blog post

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).

Recent Blog Posts

List:	11/01/06 - Laying out celled sprites & Photoshop automation 06/09/06 - RIP: Eric Elwell 2005 - 2006. We hardly knew you...

Submit your own resources!

Eric Elwell (Nov 01, 2006 at 23:17 GMT) Resource Rating: 5

Yes, I will steal this!!!! Mark, this is really great! Thanks pal!

Mark McCoy's Animated Sprite Shader!!

Tom Bentz (Nov 01, 2006 at 23:17 GMT)

Glueit works great sysimage.250free.com/

Mark McCoy (Nov 01, 2006 at 23:34 GMT)

@Tom: Thanks! That is the kind of tool I was looking for yesterday on Google. Nice. (Note to self: When looking for tools, skip google, hack together a script that sort of does what you need and blog about it. Then wait for others to link to the tools someone else already made. Easy as pie.)

What other tools is google holding out on me?

@Eric: You can make forum posts from the afterlife? Wow.

Mark McCoy (Nov 02, 2006 at 02:08 GMT)

Upon additional work flow testing, I'm finding the Photoshop workflow to still be useful, since it allows me to batch crop my renders as well...

David Montgomery-Blake (Nov 02, 2006 at 15:44 GMT) Resource Rating: 5

This is VERY useful!

Mark McCoy (Nov 03, 2006 at 04:47 GMT)

I found another script that allows you to skip the ImageReady step.

Download the "Import Folder As Layers" script here:
user.fundy.net/morris/?photoshop28.shtml

It will magically convert a directory of files into a Layered PSD.

I commented out lines 111 and 112 to preserve the transparency of my files.

     //docRef.flatten();
     //docRef.changeMode(ChangeMode.RGB);

Edited on Nov 03, 2006 07:43 GMT

David Higgins (Nov 05, 2006 at 06:40 GMT)

Hrm -- strange.

The "Import Folder as Layers" script you referenced -- when I point it to a directory full of 512x512 images, the resulting PSD with multiple layers winds up being 504x490 ...

My images have transparencies, so I commented out the same lines -- but none of the graphics in these images touch the borders of the image itself -- so I'm thinking there's some extra code in there that makes the resulting PSD file as large as the "used pixel area" (or however you want to refer to it as).

Just a heads up to anyone else who may find themselves having this same issue -- perhaps i'll find a fix for it after looking through the code ...

J. Alan Atherton (Nov 06, 2006 at 14:11 GMT)

This can also be done using ImageMagick (free for those w/o photoshop). It's command line, and it took me about an hour to figure out. If you really want to know how it's done, send me an email to remind me.

John Sledd (Dec 19, 2007 at 18:42 GMT) Resource Rating: 5

Mark. Dude. Nay...I say "God." Thank you! I'm a 3D Illustrator/Animator, etc and every couple of years I do the artwork for a game or two. And every time one of these games shows up, I go out looking for a plug-in or something that will streamline this sprite card thing but wind up failing miserably and go back to doing it manually. What tools that do exist seem to be win only and I don't swing that way. If such tools do exist for Macsters, they are extremely adept at eluding my search tactics.

Not this time!

Although it didn't work exactly as I needed, I had my wife (custom code tech support girl at her dayjob, multimedia scripting advisor when she gets home) change a few things around and blammo! What used to take seemingly forever is now nearly instantaneous. Now my only concern is trying to avoid bogging down the game engine. Ha!

I can confirm that it works in PS CS 3 and I use it in conjunction with the Load Files Into Stack script.

Again, thank you.

J.

You must be a member and be logged in to either append comments or rate this resource.