Jump to content
You must now use your email address to sign in [click for more info] ×

Origin optimization from Affinity Designer to Spine


Recommended Posts

Hello forum members,

I'm facing a challenge while working on my game character, which I design in Affinity Designer and then import into Spine using the Spine JSON export settings. My problem is that I don't know how to set the origin correctly. To explain in more detail: I have numerous artboards in my Affinity Designer project. When I export my character and paste it into Spine, I have to manually move it to coordinates 0.0. Not only is this step time-consuming, but it can also be inaccurate.

In the YouTube video I linked you can see how the origin is set in Photoshop so that the sprites are shown in the correct place when exported

I would be extremely grateful for any suggestions for solutions and tips on how I can optimize this process. Additionally, if you have general recommendations for the Affinity Designer to Spine workflow, please share them with me. Many thanks in advance!

Best regards,
Trilex

Link to comment
Share on other sites

Hi @Trilex and welcome to the forums,

It looks as though the Spine JSON export is using the bottom left corner of the first artboard as its X:0, Y:0 positioning and the centre of the exported slice as its origin and is ignoring the origin for each individual artboard which may explain the issue you're seeing if that is indeed what's happening for you and suggests it would only ever honour the origin for the first artboard...

I don't know whether this is considered a bug or is expected behaviour but considering that each individual artboard does set its own origin at the top left of the artboard this feels like a bug but hopefully, someone from the moderation team can clarify.

Affinity Designer 2.4.2 | Affinity Photo 2.4.2 | Affinity Publisher 2.4.2
Affinity Designer  Beta 2.5.0 (2430) | Affinity Photo Beta 2.5.0 (2430) | Affinity Publisher Beta 2.5.0 (2430)

Affinity Designer 1.7.3 | Affinity Photo 1.7.3 | Affinity Publisher 1.10.8
MacBook Pro 16GB, macOS Monterey 12.7.4, Magic Mouse

Link to comment
Share on other sites

It looks like your reasoning about origin positioning is correct.

I copied the character into a new document that is exactly the same size as the character itself (its a Artboard).

Screenshot2023-10-10133749.thumb.png.f3ebdf5954df2b6b2a4254cd17497251.png

When importing into Spine, I observed exactly what you described before: the origin point is pinned to the bottom left corner point of the artboard, as shown in the image.

Screenshot2023-10-10133952.thumb.png.83cde06147251542e86a61b02b50ca5c.png

Since this behavior may not be as expected, it would be great if you could let me know if there is a way to work around this issue or if there is a solution to it. Your assessment and advice are very helpful.

Link to comment
Share on other sites

@Trilex,

In the meantime, you could perhaps use something like Brackets https://brackets.io/ or Phoenix Code Editor (an online version of Brackets) https://phcode.dev/ to open your exported Spine JSON file and use the Find and Replace RegEx functionality to find the incorrect Origin Values and replace with the correct Origin Values...

Affinity Designer 2.4.2 | Affinity Photo 2.4.2 | Affinity Publisher 2.4.2
Affinity Designer  Beta 2.5.0 (2430) | Affinity Photo Beta 2.5.0 (2430) | Affinity Publisher Beta 2.5.0 (2430)

Affinity Designer 1.7.3 | Affinity Photo 1.7.3 | Affinity Publisher 1.10.8
MacBook Pro 16GB, macOS Monterey 12.7.4, Magic Mouse

Link to comment
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.

Loading...
×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.