Difference in JavaScript player vs Spine Software player

PABretherton

Hello, attached are two videos.

The version with the Egyptian hair is the JavaScript player - you'll notice her head scales up / stretches as she's breathing, it's a lot more noticeable when she takes a big breath.

Meanwhile, in the Spine Software player, this does not happen - which is as intended.

The file has been exported as 4.2-from-4.3.37-beta

JavaScript :

Spine software :

Is this something you're aware of and can it be fixed?

Thank you as always - PB

Spinebot

The issue you're experiencing with the head scaling differently in the JavaScript player compared to the Spine software player could be related to how the JavaScript runtime handles certain animations or constraints. This discrepancy might be due to differences in how the two environments interpret the animation data, especially if there are specific constraints or scaling behaviors applied in the Spine project that are not being replicated accurately in the JavaScript player. It would be beneficial to ensure that the JavaScript player is using the latest version of the Spine runtime and that all relevant settings and constraints are correctly configured. If the problem persists, it might require further investigation into the specific animation setup and how it is being exported and played back in the JavaScript environment.

Nate

When you export to an older JSON version, you should import that into the older Spine editor version and export it from there. This can fix issues with the JSON data that may cause problems if used directly. Instead of 4.2-from-4.3.37-beta you'll see the 4.2.xx version number.

You have some seams on the chest indicating you should use PMA to export your atlas and to render.

Can you post or email the JSON file so we can see the problem firsthand? contact@esotericsoftware.com

PABretherton

You have a good eye to see those seams!

Ultimately I'll be using the Flutter Runtime which doesn't use PMA's.

Will shoot you the JSON now.

Thank you 🙂

Davide

PABretherton

I've analyzed your JSON.
The problem is related to the Base/Neck transform constraint that is enabled when Strap_01A, Strap_01B, or Strap_01C are enabled.

The Head bone is a child of the Neck bone, which is a child of Body_T1. Also note that Body_T2 is a child of Body_T1.
The Base/Neck transform constraint connects the source bone Body_T2 to the target bone Neck.

This means that when this transform constraint is enabled, the Base/Neck follows the transform of Body_T2, since in the JSON you sent us, all transform mixes are 100%.

The 2_Idle2 animation animates the scale of Body_T2, and consequently the scale of Neck and Head is changed too.

I bet that in the 4.3 editor you didn't connect the scale of the source to the scale of the target, but the JSON export from the 4.3 editor into a 4.2 JSON creates the transform constraint enabling all connections.

You can fix the issue by setting the mix of the scale X and Y to 0 in the 4.2 editor, then exporting the JSON again.

Nate

Cool, Davide will check out your project soon.

Bummer Flutter doesn't support PMA, it's the correct way to do blending. Still if you export without PMA and with Bleed, you shouldn't get seams.

Mario

@Nate Flutter does PMA transparently on image load.