Exporting from Affinity Designer to Spine

Trilex · 8 окт 2023

Hi all,

I am trying to import a character that consists of multiple parts created in Affinity Designer into Spine using the Spine Jason Batch Builder. So far I have successfully exported simple shapes from a blank Affinity Designer project, but I am having trouble importing the figure.

Spine recognizes both the PNG files and the JSON file, but the figure does not render correctly. I have to manually drag the images into the scene and position them myself to arrange them correctly. Despite my numerous attempts, I have yet to find a solution to this problem.

I'm sure some of you already have experience with this kind of workflow, and I would be very grateful if you could share your knowledge and tips with me. Are there certain settings in Affinity Designer or Spine that I am overlooking? Or maybe there are certain steps I should follow to successfully import the figure?

Any tips or advice would be greatly appreciated, as I want to make sure my figure imports smoothly into Spine. Thank you in advance for your help!

With kind regards,
Trilex

Groups in Affinity Designer:

These are the slices that i would export:

T.Fly() · 8 окт 2023

I've never found Affinity Designer built-in exporter to be feature rich or working well enough compared to the Photoshop script. Various layer order issues, no ability to export the origin of the document, no support for skins, merging layers, placing images under the same slot, etc. So I just do Affinity to PSD and then Photoshop to Spine.

Nate · 8 окт 2023

Spine recognizes both the PNG files and the JSON file, but the figure does not render correctly.

Can you describe this more? Does data import succeed?

We have been working on having the editor support PSD directly. Then you can save a PSD from Photoshop, Affinity Designer, or other tools and give it to the editor for import, just like the PhotoshopToSpine script, except MUCH faster. We hope to have that released in December or early January.

Trilex · 9 окт 2023

Hello Nate,

I'll now show you my workflow

Step 1: Export from Affinity Designer
First I create my design or character in Affinity Designer. When exporting persona, I select the JSON format and save the file to a location of my choice.

Step 2: Import into Spine
Next I switch to Spine and open my project. I select the logo and click "Import Data". I locate the previously exported JSON file and select it.

Step 3: My problem
Normally I should be able to see my character in the scene by now, but here lies my problem. For me the character is not portrayed correctly. If I go to Images and drag all the images it contains into the scene, I have to manually compose the character.

I hope you can help me solve this problem. It's frustrating because I've noticed that when I create a blank project in Affinity Designer and only export simple shapes, it works. It seems like it might be because of the complexity of my character.

Finally, I would like to mention that I find the PSD import feature in Spine very exciting. This might be of interest to many image editing software users, as few programs offer a direct Spine JSON export function. Please keep me updated if this feature becomes available in the future. Thank you!

Misaki · 9 окт 2023

Trilex Do you mean that the second screenshot is what it looks like after importing the JSON file exported from Affinity Designer? I have Affinity Photo and have exported characters as complex or more complex than yours to the Spine JSON format and have never encountered this problem. Could you please send us the exported data via email?: contact@esotericsoftware.com

Trilex · 9 окт 2023

Misaki Hello Misaki,

It's about Step 2: Importing into Spine. I imported the JSON file into Spine. Normally the character should then automatically be displayed as it was created in Affinity Designer. However, it doesn't show anything at all for me and I'm left with a puzzle.

I emailed the zip file. This zip file contains not only the JSON file but also all associated images. I hope this will help you identify the problem and help me solve it.

Thank you in advance for your support! I really appreciate your help.

Best regards,
Trilex

Misaki · 9 окт 2023

Trilex Thank you for sending the exported data, I found out what the problem is! The problem is that your character is placed too far from the origin (X:0, Y:0) and outside the range that can be displayed in the viewport. The import itself completes successfully, but for example, the image named character_goldbeard _arm_l_armor_01 is placed at X:35955.5 / Y:10818.0. If I set the position of the root bone to X:-35000 and Y:-10000, I can see your character in the viewport:

When you export character images using PhotoshopToSpine, you can specify where on the canvas the origin should be on the Spine, but unfortunately this is not possible in Affinity Designer. Therefore, if you create a character on a large canvas, the character will be placed far from the origin (X:0, Y:0) when imported into Spine. To fix this, reduce the size of the canvas or enter a negative value in the coordinates of the root bone so that the character is inside the viewport, as I did, and then use the compensation buttons to adjust the position of the root bone as shown in the following video:

Trilex · 9 окт 2023

Thank you very much Misaki, with your help I was able to solve the problem!

Trilex · 12 окт 2023

Hello everyone,

I asked the Affinity Designer Forum how to improve the workflow to optimize my export due to my problem with the export. Well, it turns out that the origin point in a document is always at the bottom left edge. This cannot be changed manually. It's important to note that if you have a file with multiple artboards like I do, the origin point of the first artboard created is in the bottom left corner, and this applies to all graphics throughout the document.

My workflow now looks like this: I design all the graphics in my master document. If I want to animate a graphic in Spine, I select it, copy it, create a new document with "Ctrl+N" and paste the graphic. I then select the artboard tool and create an artboard by selecting it in the bar at the top. This will give you exactly the size of the selected graphic. In Spine you then have to place the graphic in the middle, as already shown in this discussion.

Unfortunately, as far as I know, this is the best workflow. However, if I find out anything new, I will let you know.

Link to Affinity Designer Forum