[SOLVED] Spine sorting issues

Nebulae · April 29, 2016, 11:02am

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!

max · April 29, 2016, 11:05am

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

max · April 29, 2016, 11:25am

UPD:

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.

Nebulae · April 29, 2016, 12:21pm

Funny how she changes race based on camera angle

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

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.!

max · April 29, 2016, 12:59pm

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

Nebulae · April 29, 2016, 1:00pm

oops! you’re right, fixing

Nebulae · April 29, 2016, 1:03pm

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

Thank you so much!

Nebulae · April 30, 2016, 2:16pm

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);
this.entity.spine.state.addAnimationByName(0,“sonreir”,false,1);
this.entity.spine.state.addAnimationByName(0,“bailar”,false,1);

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!

dave · May 3, 2016, 11:00am

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

github.com

playcanvas/playcanvas-spine/blob/master/src/plugin/spine.js#L2


pc.extend(pc, function () {
var TextureLoader = function (textureData) {
    this._textureData = textureData;
};
TextureLoader.prototype = {
    load: function (page, path, atlas) {
        var texture = this._textureData[path];
        if (texture) {
            page.rendererObject = texture;
            page.width = texture.width;
            page.height = texture.height;
            atlas.updateUVs(page);

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?

Nebulae · May 3, 2016, 11:33am

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

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!

dave · May 5, 2016, 9:42am

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?

Nebulae · May 5, 2016, 10:09am

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

Nebulae · May 5, 2016, 11:25am

Ok, to sum up:

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
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.