Jump to content

Photoshop to Spriter (Photoshop Plugin attached)

Recommended Posts

if the problem is that the scml has no 'name' property in the 's, then Spriter will automatically name them object_XXX incrementally, then naming the 's after the exported layers would solve that problem and would also greatly reduce load times for larger projects, because verifying each 'object_XXX' name isn't taken takes time.

Share this post

Link to post
Share on other sites

Can confirm object names now go across from layer name in photoshop to object name in spriter :)


There's a rough tutorial on page 2 of this thread, or, here's how I've been doing it:

Download the tool from here: http://www.github.com/flyover/psd2scml

Then get the json stuff from here: http://www.github.com/douglascrockford/JSON-js (You can download zips of each near the top of those pages)

Put the json stuff in the json folder of the psd2scml folder.

Then in photoshop break your character into layers and name each layer accordingly. (layer groups will result in folders when output)

In photoshop go file > scripts > browse and then open psd2scml. Give the tool a few seconds to work.

Now look in the folder where your photoshop document is saved and in there will be all your individual images along with a spriter file.

Open the spriter file and your character should be all set up the way it was in photoshop.

There is also a test.psd in the psd2scml download which you can look at for clarification on layers and bones etc.

Share this post

Link to post
Share on other sites

Im using Photoshop CS6, and i have this error:

Error 8800: General Photoshop error occurred. This functionality may not be available in this version of Photoshop.

- The command “Make†is not currently available.

Line: 28

-> executeAction( charIDToTypeID('Mk '), desc143, DialogModes.NO );

Share this post

Link to post
Share on other sites

Hey, just tried in in Photoshop CC and it works perfectly!

Great work, thanks.

A question:

Any chance that the resulting bones are not all horizontally aligned but point to the next bone in the hierarchy, so we get a real skeleton?

I guess in the script it would mean a 2-pass approach going through the whole tree prior to the generation and building up the hierarchy in memory. Then an arbitrary bone could check if it had children and set its direction to the anchor of the child.

This would make it even more killer...

All the best


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.


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.


Awesome work, dude!

I've posted an Issue to Github at https://github.com/flyover/psd2scml/issues/1

Making the angles and lengths of the bones correct would make this even more awesome.

Share this post

Link to post
Share on other sites

I've added bone rotation.

If a bone has one child, it will rotate the bone towards that child. Otherwise, if the bone has a parent, it will rotate the bone away from the parent. This handles all cases except when the root bone has more that one child. In this case, the bone rotation is 0.

The bone lengths are tricky; to adjust the length, they need to be scaled. This scale is applied down the hierarchy. Also, the scaling is applied to the objects before rotation. The bone would be scaled to the distance of the child and the objects would be scaled by the inverse. This introduces a lot of math (even more than that of the bone rotations) that could eventually lead to round-off error when tweening.

As an alternative to this, I suggest changing the widgets in Spriter, such that the bone (joint) modifier would be a simple pos/rot/scale widget at the origin of the bone. To render the skeleton, you would simple draw a line (or the polygon bone thing) from each bone to it's parent.

Perhaps Edgar has some thoughts on this?

Share this post

Link to post
Share on other sites

Whoa! You gotta be kidding me O__o

You are f.... fast with this kind of stuff ("frickin" that is ;)

Who in the world are you? This seemed to have taken you 1-2 hours at the max.

Ok, I am impressed :)

This version does produce a complete and correct skeleton in the .scml file. However, it does not generate the object folder with the images any more (which worked before today's changes).

The test folder contains a test.scml and a test-skeleton.json file. No objects folder and no spine file.

I guess its some simple thing you forgot somewhere in the code.

I work with Photoshop CC on Mac OSX Mountain Lion. The committed files in the test folder indicate that on your test it did seem to have worked.

Share this post

Link to post
Share on other sites

Thanks! It works perfectly now.

The force flows strong within you, master. Are you a pro game developer?

I saw that yesterday it created a spine file, which would load in Spine. As I use Spriter its no issue for me, but maybe for Spine-users it could be interesting to re-activate it?

Share this post

Link to post
Share on other sites

Ha! Yeah, that's me.

I've added support for attaching a group of layers to a bone.

This is the order it looks for a bone.

look for "bone_name" from layer name of the format "base_name bone(bone_name)"

look for layer name

look for "bone_name" from group name of the format "base_name bone(bone_name)"

look for group name

I've added an example to the project to demonstrate.

Share this post

Link to post
Share on other sites

ok so as you guys might guess I'm just starting to use spriter and I ran into this awesome sounding script.

I have one problem though, photoshop wont run it =(

the error is

error60: Not well formed (invalid token)

Line 461



Also, I'm only really using photoshop because it's the best way I know to export layers from illustrator =/ if anyone knows an equivalent of this script for illustrator or can point me to an easier way to export from illustrator I'd be very thankful

Share this post

Link to post
Share on other sites

EDIT: this post used to be about how I couldnt get the script to work, found out it was because my JSON folder was empty. Maybe it'd be useful if it was somewhere clarified that you NEED to do this, maybe in that readme file ?

Now, I want to ask two things.

1-my scml is coming out really weird, parts are exploded all over the place...is it because of incorrect positioning of the "bone" image? I have a few overlapping joints unlike the sample image so that could be a factor.

2-does anybody know a way to export vectors straight from illustrator? this would be very helpful for me.

thank you guys for such an awesome script

Share this post

Link to post
Share on other sites

Thanks for the feedback, conzeit.


To answer 1; yes, there was a bug where the script that adjusts the direction and length of the bones did not account for concentric bones.  I have checked in a fix for this.


As for 2; I'm not sure of there is a script to go directly from Illustrator to Spriter; however, there may be something that can rasterize from Illustrator to Photoshop, then you could use this plugin to go from Photoshop to Spriter.


Thanks for pointing out the JSON-js dependency.  I have been using a Git interface that also grabs the submodules.  I have added a note to the readme for those downloading the project as a ZIP file.

Share this post

Link to post
Share on other sites

Hey everybody,


thanks Isaac for this awesome script!

I would love to use it but I am not sure if I'm doing something wrong here..


The scml file contains no width and height of the exported images and then in Spriter I don't see anything of course.

I ran the script with the PSD sample file without any changes.


Here is the content (parts only):

<spriter_data scml_version="1.0" generator="psd2scml.jsx" generator_version="pre1.0">	<folder id="0" name="objects">		<file id="0" name="objects/arm_upper_r.png" width="NaN" height="NaN"/>		<file id="1" name="objects/hand_r.png" width="NaN" height="NaN"/>		<file id="2" name="objects/item.png" width="NaN" height="NaN"/>...	<timeline id="1" name="object-arm_lower_l">		<key id="0" spin="0">			<object folder="0" file="15" x="0" y="0" pivot_x="NaN" pivot_y="NaN" angle="0.00" scale_x="1.00" scale_y="1.00"/>		</key>		</timeline>	<timeline id="2" name="object-hand_l">		<key id="0" spin="0">			<object folder="0" file="14" x="0" y="0" pivot_x="NaN" pivot_y="NaN" angle="0.00" scale_x="1.00" scale_y="1.00"/>		</key>		</timeline>

Thanks for any tip to solve this!

I am using PC Win7 - Photoshop CS6 64bit with latest updates and I downloaded the newest JSON and script files from GitHub.

Share this post

Link to post
Share on other sites

I thought this may be caused by an empty layer, but no.  An empty layer will report 0 for the file width and height and Infinity for the object pivot_x and pivot_y (a separate bug).


I am able to export both examples from a clean clone from github without issue.  Perhaps try this or send me an archive of your files so I can step through the script in the debugger.

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.

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