Jump to content
miletbaker

Photoshop to Spriter (Photoshop Plugin attached)

Recommended Posts

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 photoshop
function 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);
}

post-7122-14159834058975_thumb.png

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
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?

error.jpg

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
Share on other sites

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.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...