Spine runtime 3.8 not working

Help & Support
1

3.6 runs fine, but things break when I try the new runtime, any ideas?

Here’s a quick test where you can alternate both runtimes

https://playcanvas.com/project/743534/overview/spine-38-latest

Thanks!
Yohami

2

I believe only 3.6 is supported by https://github.com/playcanvas/playcanvas-spine

Edit: I’m wrong, see below

3

we support both 3.6 and 3.8.
In your project you have both 3.6 and 3.8 included … you should only use one.
Also, I believe the data format between them is different … so you need to export your spine data for the right version.

4 Likes
4

@mvaligursky @yaustar thanks for looking into it.

I removed 3.6 to avoid confusion. The characters folder contains Hero from the github examples, and “70 - 06_CLOUD” my own spine animation made with 3.8.99, here’s the source https://mega.nz/file/MTIDBAoD#V3W2JP-I2v1xQs6x4KNejB5DJNy6SIY8II-YR7Ub6mw

==== RESULTS WITH 3.8:

Hero animation has an error saying it’s missing “default” skin

70 - 06_CLOUD has an error saying it’s missing a texture (can’t get width of undefined texture)

== RESULTS WITH 3.6 (before I removed it)

The Hero animation plays normally with 3.6

70 - 06_CLOUD doesnt work with 3.6 of course

Thanks a lot!

5

The hero asset in examples was exported with 3.6.52 version, and so works with 3.6, but not with 3.8, so I believe that is as expected.

I looked at the error you get and it might be related to spaces in your texture filename … it seems the texture is loaded, but it cannot match the name. Try removing the spaces perhaps.

Screen Shot 2020-12-03 at 10.51.23 AM
Screen Shot 2020-12-03 at 10.51.23 AM1282×202 41.1 KB

1 Like
6

@mvaligursky bingo, I removed the spaces and the “-” character and it works now. Thanks a lot!

(btw would be a good idea to add some examples that work with 3.8 to the git)

7

glad that works now.

this guy is 3.8 there: spineboy

1 Like
8

@mvaligursky @yaustar is it possible to set the layer where the Spine is rendered? its defaulting to world so it gets covered by some UI elements that should be behind the spine - let me know thanks

9

There is a layer’s property that you can use: https://github.com/playcanvas/playcanvas-spine/blob/master/src/spine.js#L644

Edit: It’s not exposed in the component though :thinking: You can access the Spine object via the data object: https://github.com/playcanvas/playcanvas-spine/blob/f605df2b928cd653fb4017d4447a048f13b0c593/src/component/spine-component.js#L20

1 Like
10

both this.entity.spine.spine.layers and this.entity.spine.data.spine.layers exist - Im passing an array with the Id of the layer to experiment but it doesnt seem to affect the actual rendering layer

11

By default the spine runtime will render to the UI layer and uses a manual sorting order based the priority.

In this example, I change to the World layer where the render order is based on back to front: https://playcanvas.com/editor/scene/1046832

12

Thanks Yau, yes figured that out. The spine has a weird setup as it renders in the UI layer, but ignores the coordinates of a UI system even if it’s placed on a Screen Space 2D screen and always acts as if it’s in the World coordinates. This also makes it always render BEHIND the UI elements (so it needs its own render layer if you want it on top). I can work around those quirks though.

Next question! @yaustar @mvaligursky

Is it possible to set Spine to ignore ambient color? Spine looks fine using #333333, but my game is more toony and have the ambient color at #FFFFFF for lighter shadows. It tints Spine white and unusable. Attaching pics and updated the project

1.PNG
1.PNG2268×964 200 KB
2
22402×1164 274 KB

13

So the following line is responsible for adding contribution of scene lights to the spine material. Setting the diffuse color to zero will disable that effect. Curious if there is an easy way to update the spine materials without messing with the runtime:

material.diffuse = new pc.Color(0, 0, 0); // include diffuse component, this allows lights contribution
2 Likes
14

Ah so, no need to mess with the Spine runtime. After initializing the spine component you can do this to disable lighting on the material:

        // disable ligthing on spine material
        var spineData = this.entity.spine.data.spine;
        
        for(var materialName in spineData._materials){
            
            var spineMaterial = spineData._materials[materialName];
            spineMaterial.diffuse.set(0,0,0);
            spineMaterial.update();
        }
3 Likes
15

Boom, thanks @Leonidas

1 Like