[SOLVED] Spine sorting issues

Hello again everyone:

So, as you suggested, we are using Spine for our 2D models and having great results.

We have an issue with our current project. I used the scripts in the Spine Plugin demo project. I forked it and imported our model and it works nice and beautiful: https://playcanvas.com/editor/scene/421408

we use the same scripts in our project, with the same model, executing the same animation, but recieve a weird behaviour: https://playcanvas.com/editor/scene/419937

as you can see, the arms overlap, the walkman too and the face dissapears… what are we doing wrong?

We thought It might be the camera, but tested it in the Spine project and it worked fine there.

Any thoughts? Thank you!

Looks like alpha blending sorting issues, as parts are very very close to each other.
I assume you do need to use alpha blending? What if you use only Alpha Test and No blending?

Funny how she changes race based on camera angle :smiley:

1 Like


So Dave has “patch.js” script: https://playcanvas.com/editor/code/371225/patch.js which adds some extra code to override some sorting behaviour.
It does some difference, but still, it is visible “swapping” right at the beginning, but then it does not appears. Perhaps @dave can help here.

Funny how she changes race based on camera angle :smiley:

It looks more like she’s wearing a paper bag in her head, :joy:

TBH I forgot to mention that I changed a line in playcanvas-spine.min, to set the texture as emissivemap (we’re avoiding using lights), I saw in github you changed that line in a previous version and thought it could help. Maybe I should change the blendmode in the same script.

BTW I already use the patch.js in the project.!

https://playcanvas.com/editor/code/388172/patch.js - doesn’t look like the right content there.

1 Like

oops! you’re right, fixing

@max that did all the magic. Lol, silly mistake.

Thank you so much!

1 Like

Sorry to refloat this thread @max and @dave but I found another problem related to this one:

I’m switching animations this way, (as seen on esoteric software runtime examples: )

this.entity.spine.state.setAnimationByName(0, “idle”, true);

everything should work ok; so when we launch it, faces dissapear, and even the bird, which isn’t switching animations (just an idle animation looping), suddenly “flickers”

It seems the bird dissapearing has something to do with the camera rotation… or at least it seems so. In the beggining I thought it was a problem with the animation, but messing a bit with the code, I found this line:

this.entity.spine.spine.priority = 1;

when I take that off, I can see all layers, but we return to the sorting problem. As yoy can see, now the eyes and the eyes animate correctly, but then we have,again, the same problem with layers.

Thank you, and sorry to be so annoying! :sweat_smile:

Sorting of the components when using Spine is done based on this compare function in the plugin:

This uses the draw order (index) and the priority (user-defined) to sort all the mesh instances. If priority is 0 (the default) then it uses the regular distance squared algorithm as well which we use normally.

The draw order is setup in the spine tool, but only applies with in the same model. So you can use the priority to order separate characters in the scene.

I’m not very happy with the system, but it should work for you case. I’d suggest:

  • check the draw order for the face if that is part of the same model as the girl, looks like the draw order might be wrong.
  • check the priority value for the bird. Looks like it might be sorting behind the background?

This is assuming that these are actually sorting problems and not just missing assets/images that are becoming apparent when you set a new animation?

Ok, so we’ve checked the draw order inside Spine, but it seems its ok.

About the bird, there is no background behind it, just the playcanvas world :smile:

Images are there, when I change the priority, I can see the eyes animating perfectly, but the, the meshes overlap…

So… no idea what can it be!

Hi there,

I’m going to have a look at this today or tomorrow. But I’ve just checked it now and bird and face seem to work? Did you manage to fix it or do I need to make changes to introduce the bug?

I’m sorry @dave, I forgot to reply. We managed to fix it, I’ll explain in a bit (preparing a nice post here :slight_smile: )

Ok, to sum up:

  1. The bird issue had easy solution, basically, we had an object in the scene, (a plane with a material) that was ‘colliding’ with the object so it seems sometimes it affected the spine object. That had an easy solution
  2. The faces and animations overlaping was a bit more messy, I’ll post some screenshots in a while (when the artist sends me), looks like a bug related with Spine. Until we didn’t hide every ‘mouth’ and ‘eyes’ in the setup mode, and animate it again, it didn’t work out.

By the way, @dave , is there a way of adjusting opacity to the Spine model? I’ve tried to access opacity from script but couldn’t achieve a thing.