miletbaker Posted November 2, 2012 Report Share Posted November 2, 2012 Hi all, This isn't a Spriter Plugin, but a handy Photoshop one to export to Spriter. I have been working on improving my workflow and have written a simple Photoshop script to exports the contents of each top level layer group into a separate flattened png file for use as in Spriter. For example if you have layers organised as per attached image. The script creates a subfolder in the same directory as the psd, named with the psd's name and within (in this example) would be: head.png (which would have merge the sub group too) r_forearm.png r_upper_arm.png l_upper_arm.png body.png (In the example image the ungrouped layer1, a scanned image I am tracing from, is not exported) As I can't upload jsx files, just copy and paste the script below into your text editor and save it as 'Export Layer Groups to PNGs.jsx' and copy the file to your Photoshop CS6/Presets/Scripts folder. You can then access the command (after a restart) from File > Scripts > Export Layer Groups to PNGs I have only tested on CS6 but pretty sure it will work on CS5 #target photoshopfunction main(){ if(!documents.length) return; var doc = activeDocument; var oldPath = activeDocument.path; var docname = doc.name.replace('.psd', ''); new Folder(oldPath + "/" + docname).create(); for(var a=0;a activeDocument.activeLayer = activeDocument.layers.getByName(doc.layerSets[a].name); dupLayers(); activeDocument.mergeVisibleLayers(); activeDocument.trim(TrimType.TRANSPARENT,true,true,true,true); var saveFile= File(oldPath + "/" + docname + "/" + doc.layerSets[a].name +".png"); SavePNG(saveFile); app.activeDocument.close(SaveOptions.DONOTSAVECHANGES); }}main();function dupLayers() { var desc143 = new ActionDescriptor(); var ref73 = new ActionReference(); ref73.putClass( charIDToTypeID('Dcmn') ); desc143.putReference( charIDToTypeID('null'), ref73 ); desc143.putString( charIDToTypeID('Nm '), activeDocument.activeLayer.name ); var ref74 = new ActionReference(); ref74.putEnumerated( charIDToTypeID('Lyr '), charIDToTypeID('Ordn'), charIDToTypeID('Trgt') ); desc143.putReference( charIDToTypeID('Usng'), ref74 ); executeAction( charIDToTypeID('Mk '), desc143, DialogModes.NO );};function SavePNG(saveFile){ pngSaveOptions = new PNGSaveOptions(); activeDocument.saveAs(saveFile, pngSaveOptions, true,Extension.LOWERCASE);} Alealokato and IzbranniY 2 Quote Link to comment Share on other sites More sharing options...
Mike at BrashMonkey Posted November 2, 2012 Report Share Posted November 2, 2012 Very Cool. Thanks miletbaker! Mike at BrashMonkey Quote Link to comment Share on other sites More sharing options...
lucid Posted November 2, 2012 Report Share Posted November 2, 2012 awesome, seriously! Quote Link to comment Share on other sites More sharing options...
Thinksquirrel Posted November 7, 2012 Report Share Posted November 7, 2012 Nice. Is there any way this could work with the SuperPNG plugin rather than Photoshop's native PNG save feature? Not sure how scripting in Photoshop interacts with plugins. Here's some more info about SuperPNG: http://www.fnordware.com/superpng/ Quote Link to comment Share on other sites More sharing options...
miletbaker Posted November 9, 2012 Author Report Share Posted November 9, 2012 Nice. Is there any way this could work with the SuperPNG plugin rather than Photoshop's native PNG save feature? Not sure how scripting in Photoshop interacts with plugins.Here's some more info about SuperPNG: http://www.fnordware.com/superpng/ I'm not too sure, you might be able to record an action and then call the action. Quote Link to comment Share on other sites More sharing options...
stephan_h Posted November 11, 2012 Report Share Posted November 11, 2012 Thank you very much for that useful script. Exactly what I needed. Quote Link to comment Share on other sites More sharing options...
Drakkheim Posted November 30, 2012 Report Share Posted November 30, 2012 Oh my god this is SUCH a timesaver! Quote Link to comment Share on other sites More sharing options...
isaacburns Posted December 10, 2012 Report Share Posted December 10, 2012 Thanks for the script, miletbaker. So useful that I went ahead and added a few more features. github.com/flyover/psd2scml This version will not only export each visible layer as a trimmed PNG file, it will export a SCML file with the positions of each object set to the correct position. It will also look for a layer group called "root" and use it to define a bone hierarchy. Objects will automatically be connected to the corresponding bone in the root group with the same name. Or, you can override this by naming the layer "object-name bone(bone-name)". The export will still use the "object-name" for the PNG file name. The circles in each layer of the bone groups defines the center of the bone. I've also included an example Photoshop document in the project. Note that the "item" object is mapped to the "hand_r" bone. Enjoy! Quote Link to comment Share on other sites More sharing options...
Mike at BrashMonkey Posted December 10, 2012 Report Share Posted December 10, 2012 Holy Crap! That's amazing work and thinking isaacburns! Great job! -Mike at BrashMonkey Quote Link to comment Share on other sites More sharing options...
soho54 Posted December 12, 2012 Report Share Posted December 12, 2012 I just got the chance to try this out myself, and I have to say that this is pretty darn nice. A great time saver. The isaacburns additions really puts this script over the top. You have just saved me hours of transfer and setup time. Quote Link to comment Share on other sites More sharing options...
Solo Posted February 21, 2013 Report Share Posted February 21, 2013 Cool script isaacburns. I was wondering if you would write a quick tutorial on it. I'm not a coder, so I'm not sure how it works. I tried it on my own sprite character, but it won't work since I don't have bone null objects or whatever they are. Do my body parts have to be named the same as yours? Does my group hierarchy have to be the same as yours with bones before sprites? I have plenty more questions, but I think if you gave an explanation on how it works and how to work it everyone would much appreciate it. Thanks Quote Link to comment Share on other sites More sharing options...
isaacburns Posted February 27, 2013 Report Share Posted February 27, 2013 Hi Solo. Thanks for the feedback. I don't have a step by step tutorial ready, but here are a few notes on the requirements of the plugin until I can write up something more complete. --- The exported files will be placed in the same directory as the PSD file. Each visible layer will be exported as a cropped PNG image file using the layer name. If the layer is in a group, the image file will be placed in a directory using the group name. The order of the groups and layers is used as the draw order. If a top level group named "root" is found, the hierarchy within the group will be used to parent the exported objects to bones. The bounds of all the layers within the group will be used to determine the location of the bone. For each object exported, the root group will be searched for a group with the same name. To override the bone name for an object, use the format "object_name bone(bone_name)", where object_name is the name of the object-layer and bone_name is the name of the bone-group in the root group. There is an example of this in the test.psd where there is an "item" object-layer that is meant to be attached to the hand_r bone-group. Therefore, the layer name is "item bone(hand_r)". --- It may help to look at the test.psd and collapse all the groups then expand the root group one level at a time to see how the bone hierarchy is set up. I hope this helps. Quote Link to comment Share on other sites More sharing options...
hepary Posted April 3, 2013 Report Share Posted April 3, 2013 Hi Solo. Thanks for the feedback.I don't have a step by step tutorial ready, but here are a few notes on the requirements of the plugin until I can write up something more complete. --- The exported files will be placed in the same directory as the PSD file. Each visible layer will be exported as a cropped PNG image file using the layer name. If the layer is in a group, the image file will be placed in a directory using the group name. The order of the groups and layers is used as the draw order. If a top level group named "root" is found, the hierarchy within the group will be used to parent the exported objects to bones. The bounds of all the layers within the group will be used to determine the location of the bone. For each object exported, the root group will be searched for a group with the same name. To override the bone name for an object, use the format "object_name bone(bone_name)", where object_name is the name of the object-layer and bone_name is the name of the bone-group in the root group. There is an example of this in the test.psd where there is an "item" object-layer that is meant to be attached to the hand_r bone-group. Therefore, the layer name is "item bone(hand_r)". --- It may help to look at the test.psd and collapse all the groups then expand the root group one level at a time to see how the bone hierarchy is set up. I hope this helps. I am stuck. I would be really glad if you were still following this thread... and if you would help me. I'm getting this message the whole time. It seems that I can't export these layers without adding a root group... for which I don't actually have a need right now. Could you or someone please help me? Quote Link to comment Share on other sites More sharing options...
isaacburns Posted April 4, 2013 Report Share Posted April 4, 2013 Thanks for the bug report, hepary. I've checked in a fix to the github project. Quote Link to comment Share on other sites More sharing options...
lucid Posted April 6, 2013 Report Share Posted April 6, 2013 Just wanted to stop in to say your art looks awesome hepary And thanks again for this awesome plugin isaacburns. It's been really useful for alot of animators. I've seen it mentioned a few times across the nets and by devs in emails Quote Link to comment Share on other sites More sharing options...
rxninja Posted April 9, 2013 Report Share Posted April 9, 2013 Would it be possible to make this backwards compatible with CS5? I don't fully understand how it works, but it sounds like quite a timesaver from my current method of using the "Export Layers as PNG" function and then adding that folder and rigging up the whole skeleton by hand. Quote Link to comment Share on other sites More sharing options...
jayderyu Posted April 9, 2013 Report Share Posted April 9, 2013 That's really awesome..... I hope some one comes up with an Inkscape/Paint.Net/Gimp version. :D kudos' totally awesome and jealous :) Quote Link to comment Share on other sites More sharing options...
Trumgottist Posted April 11, 2013 Report Share Posted April 11, 2013 Would it be possible to make this backwards compatible with CS5? Or CS4, for those of us who can't afford to upgrade? Quote Link to comment Share on other sites More sharing options...
isaacburns Posted April 12, 2013 Report Share Posted April 12, 2013 Have you tried running the script on the test.psd in CS5 or CS4? It was saved it in "maximum compatibility" mode. From what I read, there is a limitation of 5 nested groups in CS4 and 10 in CS5. The script should work starting with CS2, when JavaScript scripting was introduced. Quote Link to comment Share on other sites More sharing options...
Trumgottist Posted April 12, 2013 Report Share Posted April 12, 2013 Cool - I'll try it out. Quote Link to comment Share on other sites More sharing options...
Trumgottist Posted April 12, 2013 Report Share Posted April 12, 2013 It seems to work in CS4 too! Opening the test file gave me some errors: "This document contains unknown data which will be discarded to keep layers editable. […]" and "Some groups were found corrupted and repaired." Running the script on that file gave me a Spriter file and accompanying png files, so that it looks the same as the psd file when it's loaded into Spriter. But I got no bones. The problems with it are obviously the 5 nested groups limit you mentioned. Instead of a "root" group, I get an empty and hidden "root" layer. If I remove enough parts so that it fits in five nested groups, put the bones in a root group, and hide the bone layers, I do get bones. Odd looking (all horizontal - but I guess that's how it should be, as the bones in your sample spriter file looks the same), but functional bones. So thanks! It is indeed working in CS4 too. The bone creation is less useful due to Photoshop's group limitation, but even without that, I'm sure that it'll prove useful! Quitleusere, WasdfriKn and Alealokato 3 Quote Link to comment Share on other sites More sharing options...
naqproductions Posted April 19, 2013 Report Share Posted April 19, 2013 I am also a little confused about how to use this with a freshly created character PSD. How exactly should you create the bone layers so it works properly when you import into Spriter? Should I copy the test PSD layout and just delete out joints I don't need? Quote Link to comment Share on other sites More sharing options...
hepary Posted April 20, 2013 Report Share Posted April 20, 2013 Just wanted to stop in to say your art looks awesome hepary Thank you. :D Good to hear you like the art, I wasn't sure whether I should go with this version or pixel-art. /isaacsburns you posted a fix? I'm gonna go check out. By the way, thanks a ton! Once Brashmonkey releases the new version with the ability to merge projects, my work process will be complete. Quote Link to comment Share on other sites More sharing options...
isaacburns Posted April 24, 2013 Report Share Posted April 24, 2013 @naq The test psd would be a good place to start. Or, start with a simple case (one or two bones) and build from there. If you start with the test psd, you can rearrange groups using drag/drop. Adjust the position of the bone layer image (a circle) to move the bone anchor in spriter. Remember, if you change the name of a bone group, you must change the name of the object layer too, and vice-versa. Quote Link to comment Share on other sites More sharing options...
tam Posted April 29, 2013 Report Share Posted April 29, 2013 Thanks for this tool Isaac. I'm just making my first character for Spriter and came on the board to ask for tips exporting. You solved all my problems! (as a FYI, I'm using Photoshop CS5) My only gripe is that the Spriter document that is automatically made causes all the objects to be named "object X" rather than the name of the layer they were on in Photoshop. Apart from that, great tool! Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.