I’m working on slot game project. I have to use spine library for 2D slot item animations.
If I use spine like “Spine Plugin” example project, working perfectly. But, I need to use spine in element component. Because, slot item positions (X,Y) changing during game. I tried many different ways and when I add spine script to an entity with element, it disappears.
You will need to override the default material the Spine library puts in place, which uses the opacity channel to mask the transparent areas of the 2D graphic.
To grab a reference from your code to the Spine material you can do so like this:
// should not be used in initialize time, but later, since the Spine runtime seems to be initializing last
var spineData = this.entity.spine.data.spine;
var spineMaterial = spineData._meshInstances.material;
A way to add masking would be to insert a custom uniform for your masking texture and override the default opacity Playcanvas shader chunk. Here is the default definition for blending that:
I don’t have shader code handy for this, you can start learning how to use shader chunks to edit/expand the default Playcanvas shader programs. Here is an example:
Keep your spine animation and element (which is probably a sprite or image) in separate child entities of a parent entity. This allows each to function without interfering with the other, or just don’t give up.