isaacburns

I don't recognize this source code from psd2scml.jsx. Does it report which file this is in? If you can share the PSD file, I will take a look.

implementation by @isaacburns spriter.js A JavaScript API for the Spriter SCML/SCON animation data format. https://cdn.rawgit.com/flyover/spriter.js/master/demo/index.html Supported Features Basic animations Bone animations All curve types (Instant, Linear, Quadratic, Cubic, Quartic, Quintic, Bezier) Points Collision Rectangles SubEntities Events Sounds Variables Tags Character maps Animation Blending How to use it In the initialization: var scon = JSON.parse(scon_text); // read and parse SCON file var data = new spriter.Data().load(scon); // create and load Spriter data from SCON file var pose = new spriter.Pose(data); // create Spriter pose and attach data pose.setEntity("player"); // set entity by name pose.setAnim("idle"); // set animation by name In the animation loop: var dt = 1000 / 60; // time step in milliseconds pose.update(dt); // accumulate time pose.strike(); // process time slice Refer to the demo for how to blend animations, draw images, play sounds and respond to events, access tags and variables, etc.

I've fixed the json2.js issue. Is there a way you can share the PSD file so I can take a look at what's happening?

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.

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.

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.

My mistake. I had commented out the PNG export for debugging. Fixed with latest.

I went ahead and added bone length scaling.

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?

I've checked in a change that adds unique names for each object.

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

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.

Thanks for the bug report, hepary. I've checked in a fix to the github project.

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.

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!