Spine Skeleton Color

Help & Support
1

Does anyone know how to change a Spine skelton color at runtime? What is the correct function name? I tried:

this.entity.spine.skeleton.color(this.tint_color);
this.entity.spine.skeleton.setColor(this.tint_color);

But with those I just get an error saying skeleton.color is not a function or skeleton.setColor is not a function.

Thanks

2

The API for the component is mostly defined here: https://github.com/playcanvas/playcanvas-spine/blob/master/src/component/spine-component.js

There’s no function or property to tint the sprite yet. It looks like you would have to get hold of the materials and change the properties directly https://github.com/playcanvas/playcanvas-spine/blob/master/src/spine.js#L320

Or write a custom shader that is applied to those materials and update the parameters in script.

Edit: It looks this should be done in Spine instead and you can call the state/animation for it via script.

3

Here is some helpful code on how to get hold of the sprite materials and adjust their diffuse color:

var Spine = pc.createScript("spine");

Spine.prototype.initialize = function () {
  var spineData = this.entity.spine.data.spine;
  for (var materialName in spineData._materials) {
    var spineMaterial = spineData._materials[materialName];
    spineMaterial.diffuse.set(0, 0.5, 1.0);
    spineMaterial.update();
  }
};
1 Like
4

Thanks. I just tried this but it doesn’t seem to have any effect whatsoever? My Spine character is still completely white (the same as their imported images). Any ideas?

5

Right, it seems for spine we should enable tint on the emissive channel, I am updating the code here:

        var spineData = this.entity.spine.data.spine;
        for (var materialName in spineData._materials) {
            var spineMaterial = spineData._materials[materialName];

            spineMaterial.emissive.set(0, 0.5, 1.0);
            spineMaterial.emissiveTint = true;
            spineMaterial.update();
        }

Seems to be working on the default PlayCanvas spine example:

image
image1217×1093 163 KB

1 Like
6

Hmm, I tried this too but my character is still white. I may try re- exporting from spine…

7

I’m wondering if the colour timeline in Spine may be overriding this?

1 Like
8

I tried animating the color over time (green to red) directly in Spine, exporting and running but the entity in PlayCanvas is still just white all the time?!?

9

I tried your code in the example project and it worked fine. Very strange. The problem is that I cant see any differences between my project and that one apart from I’m using 8th Wall AR to initialize the entity…but it doesn’t seem to do anything with materials as far as I can tell…?!? All the graphics formats are the same.

10

Might be worth checking on the 8th Wall Slack on what could be causing the issue. Maybe there is a custom shader being used that overwrites the materials?

11

I checked with 8th wall and they say they do nothing to the material. What I did discover though is if I export my Spine object with anything OTHER than rgb(0,0,0) or rgb(255,255,255) the colour change works correctly.

So basically all I had to do to get this working was set my spine model’s colour to rgb(1,1,1) (instead of 0,0,0) and then using this code the colour change works perfectly.

5 Likes