Our artist has been working hard drawing all the graphics for our new game (more info to come on that front). She’s been working on the main character’s animations recently. These are complex animations with many frames and, to ensure they line up properly, she draws all the frames within a canvas the size of a single frame and separates the layers into layer sets. This is to ensure that the image for each frame of the animation aligns correctly with the frame before it.
However, our animation system in the game requires that each frame is drawn separately from left to right. Even with the layer sets, it’s still a lot of annoying manual work to move and align each frame while ensuring they’ll draw the same as they did in the single-frame-sized canvas. I recently found out that you can script for PS and so this set me thinking: there must be a way to write a script that can do this!
So, that’s what this is. I’m not going to get into too much detail other than to say that it looks like you can pretty much do anything from the Photoshop GUI with scripting. The other great thing about it is that you can pick your language. It supports apple script (on Macs), VBScript (on Windows) and JavaScript (on both). Of course, I chose JavaScript and after perusing the documentation, I was able to whip up a script within 30mins.
The basic goals of the script were to:
- Enumerate all visible layer sets
- Expand the canvas width by 1 frame width times the number of visible layer sets
- Move each layer set into it’s own frame section
So I did this, found some bugs and then added some error checking. This script is the culmination of that:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
if (documents.length == 0) { alert("There are no documents open."); } else { var ad = activeDocument; var docWidth = ad.width; var layerSetCount = ad.layerSets.length; var activeLayers = new Array(); for (var i = 0; i < layerSetCount; i++) { if (ad.layerSets[i].visible) { activeLayers.push(ad.layerSets[i]); } } layerSetCount = activeLayers.length; if (layerSetCount > 1) { ad.resizeCanvas(docWidth * layerSetCount, ad.height, AnchorPosition.TOPLEFT); var invert = confirm("Do you want to invert the order " + "of the tiles? This will set up the tiles in " + "the reverse order of the Layer Sets (bottom " + "to top instead of top to bottom). Click \"Yes\" " + "to invert it or \"No\" to leave it as is."); for (var i = 0; i < layerSetCount; i++) { if (invert) { activeLayers[i].translate( (layerSetCount - i - 1) * docWidth); } else { activeLayers[i].translate(i * docWidth); } } } else { alert("There must be at least two layer sets to tile this."); } } |
Note: I added some line breaks to make this fit into my theme.
To use it, you just have to save it in your Photoshop Directrory/Presets/Scripts folder with the name “Make Tiled.jsx”. Then run it from the File > Scripts menu.
I do want to do a write up about scripting in PS but for now I’m just going to post the file in case you want to use it. Click here to download it.
