Hello Nate,

I have a question. We have our character in Illustrator CC. Nicely layered and grouped. In illustrator the character is visually as it should be. We then export this character to individual pieces (pngs) together with xml file that says where each individual png was located. I think about how to use this exported xml and recreate the same visual look in spine so that animators dont have to put all images together. (it takes quite a long time) We have this solution already for Illustrator -> Unity. So whatever we create in illustator we are then able to recreate in Unity by just one click. No need to positioning all pngs. All sits and fits pixel perfect.

So my question how can I procedurally or via script add images into spine scene and set their position and likely correct names according the xml (illustrator) file. Is this process possible?

Thank you very much.

We have pretty massive illustrator export script and I would like to make the same you have in Photoshop in Illustrator. So that we can export from our illusrator files json and pngs for you Spine and recreate our charachters. I will let you know how it goes. Can you please post here an example of that export import photoshop json file?

Yes it is the worth the effort. Since we have lots of spine projects and to do it manually through photoshop would be an extra work. Anyway I do export xml from my illustrator export so make this spine json is easy. How do I then tell spine to use this json file to recreate the character? Via import data?

Ok... thank you... this will speed up our character creation a lot. :-) We work in Illustrator since we export all kind of resolutions for all kind of devices. And we have also workflow how to scale spine animations and reatlas them. Actually only 3 clicks and we are able to produce whole game in different resolution. (especially we aim to have this solution for 4k upcoming market so that we just do these 3 clicks and are ready to publish)

Yes but that means scaling of the graphics down for smaller resolution devices and also it means 3 textures in one build. Our solution is one texture and almost pixel perfect. That's why we use for all our graphics illustrator. Check in attachment what we are able to produce in illustrator. No photoshop at all.

And anyway, Shiu, your proposed solution won't work for 4k displays. Try to imagine 4k textures on android devices. The app would have over hundred mega.

Helo Nate and Shiu,

So far I was able to import our illustrator export. I have several questions.

We generate from illustrator sometimes quite deep image directory structures. It depends how complex our character or scene are. We put these image directory structure into images directory on the same level where the spine file resides. So far I was able to import our dennis character without problem. As you can see in slots there is that "simple" directory path to image like dennis/nose etc. (images/dennis/nose.png)

So far all is imported correctly. So my questions:

1) is this directory path to an image also valid in skin definition?

"dennis/nose":{"dennis/nose":{"x":2484.75176617693,"y":-1459.81322950865, "width":50,"height":50}},

2) When we import this json into spine. All the images under each generated slots are as default turned off. I need to go over them in your hierarchy tree and turn them on. How can I define as default to have them on?

3) I don't have information from illustrator how big is the exported image so I put into skin definition just default 50px. Is it ok? Seems like this width and height does not have effect on whatever wen importing the file.

"dennis/nose":{"dennis/nose":{"x":2484.75176617693,"y":-1459.81322950865, "width":50,"height":50}},

{"skeleton":{"images":"images/"},
"bones":[{"name":"root"}],
"slots":[
      {"name":"dennis/nose","bone":"root","atachment":"dennis/nose"},
      {"name":"dennis/face","bone":"root","atachment":"dennis/face"},
      {"name":"dennis/shin_left","bone":"root","atachment":"dennis/shin_left"},
      {"name":"dennis/tigh_left","bone":"root","atachment":"dennis/tigh_left"},
      {"name":"dennis/tigh_right","bone":"root","atachment":"dennis/tigh_right"},
      {"name":"dennis/shin_right","bone":"root","atachment":"dennis/shin_right"},
      {"name":"dennis/upper_arm_right","bone":"root","atachment":"dennis/upper_arm_right"},
      {"name":"dennis/fore_arm_right","bone":"root","atachment":"dennis/fore_arm_right"},
      {"name":"dennis/hand_right","bone":"root","atachment":"dennis/hand_right"},
      {"name":"dennis/belt","bone":"root","atachment":"dennis/belt"},
      {"name":"dennis/body","bone":"root","atachment":"dennis/body"},
      {"name":"dennis/pelvis","bone":"root","atachment":"dennis/pelvis"},
      {"name":"dennis/hair_2","bone":"root","atachment":"dennis/hair_2"},
      {"name":"dennis/hair_1","bone":"root","atachment":"dennis/hair_1"},
      {"name":"dennis/hair","bone":"root","atachment":"dennis/hair"},
      {"name":"dennis/stick","bone":"root","atachment":"dennis/stick"},
      {"name":"dennis/hand_left_1","bone":"root","atachment":"dennis/hand_left_1"},
      {"name":"dennis/hand_left_2","bone":"root","atachment":"dennis/hand_left_2"},
      {"name":"dennis/head","bone":"root","atachment":"dennis/head"},
      {"name":"dennis/neck","bone":"root","atachment":"dennis/neck"},
      {"name":"dennis/shoe_right","bone":"root","atachment":"dennis/shoe_right"},
      {"name":"dennis/shoe_left","bone":"root","atachment":"dennis/shoe_left"},
      {"name":"dennis/lower_arm_left","bone":"root","atachment":"dennis/lower_arm_left"},
      {"name":"dennis/upper_arm_left","bone":"root","atachment":"dennis/upper_arm_left"},
      {"name":"dennis/flap","bone":"root","atachment":"dennis/flap"}
],
"skins":{
   "default":{
      "dennis/nose":{"dennis/nose":{"x":2484.75176617693,"y":-1459.81322950865, "width":50,"height":50}},
      "dennis/face":{"dennis/face":{"x":2234.99816714726,"y":-1442.83041325158, "width":50,"height":50}},
      "dennis/shin_left":{"dennis/shin_left":{"x":2562.52614362161,"y":-2295.70602553291, "width":50,"height":50}},
      "dennis/tigh_left":{"dennis/tigh_left":{"x":2482.57085347238,"y":-2082.08207714063, "width":50,"height":50}},
      "dennis/tigh_right":{"dennis/tigh_right":{"x":2284.63690621134,"y":-2106.47621449853, "width":50,"height":50}},
      "dennis/shin_right":{"dennis/shin_right":{"x":2302.95396094285,"y":-2333.10306602281, "width":50,"height":50}},
      "dennis/upper_arm_right":{"dennis/upper_arm_right":{"x":2176.65893610508,"y":-1679.3119892868, "width":50,"height":50}},
      "dennis/fore_arm_right":{"dennis/fore_arm_right":{"x":2110.47143974742,"y":-1809.22510628168, "width":50,"height":50}},
      "dennis/hand_right":{"dennis/hand_right":{"x":2224.25545434279,"y":-1865.53158501358, "width":50,"height":50}},
      "dennis/belt":{"dennis/belt":{"x":2350.06316799073,"y":-1878.2915137287, "width":50,"height":50}},
      "dennis/body":{"dennis/body":{"x":2366.07383257801,"y":-1733.70186388577, "width":50,"height":50}},
      "dennis/pelvis":{"dennis/pelvis":{"x":2371.36092948914,"y":-1978.74259062685, "width":50,"height":50}},
      "dennis/hair_2":{"dennis/hair_2":{"x":2347.44042074815,"y":-1113.44832201495, "width":50,"height":50}},
      "dennis/hair_1":{"dennis/hair_1":{"x":2498.01985267431,"y":-1126.81025515863, "width":50,"height":50}},
      "dennis/hair":{"dennis/hair":{"x":2408.57408580624,"y":-1276.74257496786, "width":50,"height":50}},
      "dennis/stick":{"dennis/stick":{"x":2907.36185470331,"y":-1445.66408853348, "width":50,"height":50}},
      "dennis/hand_left_1":{"dennis/hand_left_1":{"x":2814.05676100199,"y":-1375.24728855201, "width":50,"height":50}},
      "dennis/hand_left_2":{"dennis/hand_left_2":{"x":2730.6449429806,"y":-1449.18609611832, "width":50,"height":50}},
      "dennis/head":{"dennis/head":{"x":2428.97612773529,"y":-1453.03645827561, "width":50,"height":50}},
      "dennis/neck":{"dennis/neck":{"x":2369.41959364516,"y":-1572.81466112767, "width":50,"height":50}},
      "dennis/shoe_right":{"dennis/shoe_right":{"x":2290.38306029282,"y":-2464.3094207495, "width":50,"height":50}},
      "dennis/shoe_left":{"dennis/shoe_left":{"x":2645.82913325314,"y":-2451.42153782552, "width":50,"height":50}},
      "dennis/lower_arm_left":{"dennis/lower_arm_left":{"x":2653.78801279418,"y":-1585.99189028719, "width":50,"height":50}},
      "dennis/upper_arm_left":{"dennis/upper_arm_left":{"x":2498.01984768004,"y":-1657.05784949197, "width":50,"height":50}},
      "dennis/flap":{"dennis/flap":{"x":2202.72526960891,"y":-1958.12555362514, "width":50,"height":50}}
   }
},
"animations":{"animation":{}}
}

Mission completed. All is working seamlessly. :-) Our illustrator export and import to spine can be in whatever resolution for initial spine character setup and animations. Then when we need it in lower resolution or higher resolution we just regenerate our graphics and reatlas spine atlases. All the sizes and animation proportions thanks to Spine Unity Runtime stay the same. I'M VERY HAPPY. :-) Thank you guys.

Shiu :

We regenerate the whole graphics for individual devices so we end with exactly what we need for specific target devices. No need to clicking and choosing what texture we need to use or whatever. To generate our games in 4k is matter of 3 clicks. And if we decide to have it in 1k it is again matter of 3 click for regenerating all the graphics from our illustrator files. (not only spine graphics but also all other backgrounds)

I know about your technique. And i fully understand. But in our solution we don't have 5 atlases. We have only one. The actual one we need. I regenerate the graphics with same names and paths directly into unity. Set their pixelsPerUnity accordingly so that they stay the same size and reatlasing those needed into your atlas by TexturePacker. Sure there is small overhead for CPU to generate these every time we decide to release a game for new platform or device target but we are completely free for future 4k and higher resolutions. We can generate from illustrator whatever resolution we need in top notch quality.

Hello Nate, this command line does not work on windows 8.1. Spine only opens and that's all. Nothing happens.

C:\Program Files (x86)\Spine\Spine.com

input "C:\Users\Marek\Desktop\SPINE\cat_1_spine_cat\cat_1_spine_cat.spine"

output "C:\Users\Marek\Desktop\Illustrator\Assets\SPINE\cat_1_spine_cat\"

export "C:\Users\Marek\Desktop\SPINE\cat_1_spine_cat\export.json"

Hello Nate, I tried to install new launcher and the result is the same. See attachment for console output. Where is spine log located? (running Spine in Windows 8.1 parallels, java 8 installed)

One more question. How do you now which packing settings you should use if there is no json export file in this line? We need to reatlas our projects with specific resolutions but how do your spine knows what settings to use for packing these sprites?

Spine -i /path/to/images/ -o C:/path/to/output/

pack atlasName

Hello Nate, thank you for the last release. One question : How do I tell spine what is the atlas name? Should I add it into pack.json? (atlasName = name)

-i /path/to/images/ -o C:/path/to/output/ -p /path/to/pack.json