JSYSnowy

I'm running into a weird issue when using extreme values in the graph editor in my spine animations. The easing sometimes seems to not be being used, and instead it's just defaulting to use a linear easing instead. Seems if i reduce the strength of the easing, the issue resolves - and also it only seems to be on certain animations which is causing it, but when the issue does happen it's reproducible 100% of the time.

Below I'm showing a few images of the easing being used, the expected result and actual result in a test scenario.

Ease applied in spine:


Expected output as seen through spine app:

Link: https://gyazo.com/010754e8cdf2dd2c0d2d4968b793a55b

Actual output as seen through outputted file:

Link: https://gyazo.com/f208ce5899f1c27cda1f2722e2c2f512

After doing some digging, I've noticed that on these situations, the curve property exported in the .json is set to 0, instead of a proper curve value - which i think is meaning it's using a linear ease instead. Below you can see two files, one with an extreme curve in the graph editor, and one with a more subtle curve:

Extreme:


Subtle:


My idea is that one of the curve values is so steep it's becoming 1, or 0, which is causing something to think it's a linear curve instead. For reference, we're using spine on webgl applications, specifically in PIXI using the pixi-spine library to render the output, but i think this issue will be seen everywhere if the condition is met.
JSYSnowy
  • Posts: 3

Nate

The first of the 4 curve values is the percentage on the X axis of the first handle. When the first curve handle is all the way left, it will be zero.

I nuked spineboy's animation and created a new one called aaaa:

"aaaa": {
"bones": {
"head": {
"rotate": [
{ "angle": -95.69, "curve": 0, "c2": 1, "c3": 0 },
{ "time": 1, "angle": 72.55 }
]
}
}
}
I tried it in Skeleton Viewer (which uses spine-libgdx) and it was OK. I also tried it with spine-ts (which is what PIXI's Spine support is based on) and it works:
http://n4te.com/x/7433-t0TA.txt.html
That's rotation, here's a similar animate with scale:
"scale": [
{ "curve": 0, "c2": 1, "c3": 0 },
{ "time": 1, "x": 2.767, "y": 2.767 }
]
http://n4te.com/x/7436-4JjH.txt.html
Everything seems OK. Maybe you can create an animation which shows the problem? It would be helpful if the skeleton and animation are very simple.
User avatar
Nate

Nate
  • Posts: 9333

JSYSnowy

Hey - thanks for looking into that. Weird, but yeah we don't see the issue in Skeleton Viewer with a spine file which breaks in PIXI as well, so yeah i guess that rules out the JSON having issues..

I'll show an easier example of the issue and include the spine file we're using for it:

In skeleton viewer:


In PIXI:


Maybe this means that the issue is actually with pixi-spine itself .. which i was looking into and initially raised an issue on their github, but was mentioned to bring it here too:
https://github.com/pixijs/pixi-spine/issues/327

I'm really not 100% sure how to go about dealing with this issue now .. it's not urgent but has meant we've had to do some weird workarounds for some animations.. If possible could we try the spine you exported on that demo link, so and see if it behaves similar to the bug we're seeing in PIXI..? Might help to narrow it down even more if that demo which you said is working doesn't work in.
You do not have the required permissions to view the files attached to this post.
JSYSnowy
  • Posts: 3

Nate

If you don't see the behavior in Skeleton Viewer, that means the spine-libgdx reference implementation doesn't have the problem, which is Java. There could still be a problem in the other languages that are ported from spine-libgdx. If you test it with spine-ts, like the HTML I posted above, then it means spine-ts doesn't have the problem. I suppose it's possible that PIXI has the problem, but applying curves should happen in spine-ts and so it seems unlikely PIXI could cause such a problem. Are you sure PIXI is using the latest spine-ts?

The HTML I posted just uses the latest spineboy project exported with Spine 3.8. If you view source on the demo link you'll see the tiny bit of JavaScript and links to the JSON and atlas:
<script src="https://esotericsoftware.com/files/spine-player/3.8/spine-player.js"></script>
<link rel="stylesheet" href="https://esotericsoftware.com/files/spine-player/3.8/spine-player.css">

<div id="player-container" style="width: 100%; height: 100vh;"></div>

<script>
new spine.SpinePlayer("player-container", {
jsonUrl: "http://n4te.com/x/7435-spineboy-pro.json",
atlasUrl: "http://n4te.com/x/7431-spineboy-pro.atlas"
});
</script>
The files are:
http://n4te.com/x/7435-spineboy-pro.json
http://n4te.com/x/7431-spineboy-pro.atlas
http://n4te.com/x/7430-spineboy-pro.png

Here's your files with spine-ts:
http://n4te.com/x/7458-rmvs.txt.html
I would say this indicates it's either a problem with PIXI or PIXI isn't using the latest spine-ts.
User avatar
Nate

Nate
  • Posts: 9333

JSYSnowy

I'll have to do some digging with the pixi-spine dudes to get an answer to that i think, can't see anything from a glance. I'll maybe just put a message to them directly to see if they can take a look at this thread or something. Since you got our provided spine file working using spine-ts then yeah it seems the issue is with PIXI somewhere. I sent the file to another developer who works with spine and PIXI and he said he is seeing the same problem so it's definitely not just an issue with our environment. Thanks for investigating that; I'll try get back to you with some more info or let you know if we manage to find something on PIXI's side.

---

Hey - think we managed to clear it up over with the pixi-spine guys.

Thanks again for the help, can check out the conversation over at github if you're interested.
(https://github.com/pixijs/pixi-spine/issues/327)

Can consider this issue closed :)
JSYSnowy
  • Posts: 3


Return to Bugs