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.
Could you use a parent entity with a child entity with an element and another child entity with the spine element? That way, you de-activate one and enable the other when you need to?
I moved spine objects to world space and working perfectly now. But, I used element mask in 2D screen and how can i use mask in world space without element mask, i did not found in documentation.
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[0].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:
My solution seems easy than yours for simple mask issue. Even though I know this is not correct way.
I had many problems working with Unity then we changed the engine. I still want to belive PlayCanvas will solve our problems and we’ll never go to PixiJs.