Spine draw order issues

Help & Support
1

Hi guys,

We’re having some issues with drawing order with the Spine Plugin, where moving/rotating the camera causes various elements to reorder themselves incorrectly.

After a lot of investigating I tried out the Spine Plugin example project and noticed that there are no issues at all in the published version - Spine Plugin - PLAYCANVAS

But running the scene through the editor in this project has the same draw order issues we’re encountering (once you move the camera) - PlayCanvas | HTML5 Game Engine

Capture
Capture882×715 182 KB

I’ve also read through the following thread

and tried applying the path.js files but with no luck…

If anybody has any ideas about this I’d be super grateful

2

Hi, we have recently deployed our new Layer system which changes the way things are ordered. We did not update the spine example I’ll do that right now and share it with you shortly.

3

Thanks for the quick reply @vaios.

I tried updating my forked version of the example to use the Layer system and it didn’t fix the problem unfortunately.

Wondering if there was a different change in an older version of Playcanvas which could’ve caused this?

4

Hang tight I’ll show you what you need to change in a few minutes.

1 Like
5

So I updated the project and also made it use Scripts 2.0 here: https://playcanvas.com/editor/scene/605386 . We now have a new Layer system described here: https://developer.playcanvas.com/en/user-manual/graphics/layers/. We also updated the spine plugin here: https://github.com/playcanvas/playcanvas-spine.

The spine.js script now has a script attribute called Layer which is the name of the layer that you want to add your Spine characters to. I created a new Spine Layer and made both its opaque and transparent sort modes Manual. This means that their draw order will now be controlled by their priority instead of their depth. I assigned the Spine layer to the spine script of the characters.

It all seems to work now. So:

  • Get the latest spine plugin from https://github.com/playcanvas/playcanvas-spine
  • Add a new Layer and set sort modes to Manual
  • Add your new Layer to the sublayer list below - you can put the opaque sublayer after World Opaque and and the transparent sublayer after World Transparent
  • Use the new spine.js script and pass the name of your new layer to the Layer script attribute.
1 Like
6

Oh also make sure you add the new layer to your Camera and Lights!

7

Thanks for the detailed description on how to use the layers, vaios!

One thing that made me struggle a bit though: you haven’t updated the actual script “spine.js” (the one in the ‘src/script’ folder on Github) to include the Layers attribute on a Spine object in Playcanvas, so I had to take the one from your demo to make it work.

2 Likes
8

This is a very helpful discussion - I had some weirdness with Spine layering over a 2D element. I can confirm that the ‘layer’ attribute discussed in this thread is not present in the playcanvas-spine repo; I had to pull spine.js from the demo also (https://playcanvas.com/editor/scene/605386) - this thread could use an official update to clear things up.

  • I should add, simply swapping out my spine.js to the demo one fixed my issue