Hello,
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.
How can I swap element image with spine?
Thank you.
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 tried this way before but it didn’t work 
Do you have a project that you can share that shows this issue please?
Hi @yaustar, I’m working in same organization with @Celal_Bozkurt.
We created example project for you. --> https://playcanvas.com/project/665587/overview/slot_example
I also added screenshot for explain our problem.
First element in 2D Screen component. Another one in root.
Thanks.
Ah, you want to show Spine in the 2D UI canvas (sorry, I missed that in the title).
Sorry, AFAIK, you can’t do that yet. Your best bet here is have it all in world space.
Thanks for replying @yaustar.
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.
Any idea about that?
I found solution about to fix this issue.
Firstly, I created plane objects to top and bottom of reels. Then, moved spine objects to behind of planes on z-axis. It fixed.
I think, it’s not correct way to mask elements in world space.
Any other suggestion?
When it comes to masking, I be thinking that a custom shader would be needed for world space that I don’t think PlayCanvas provides out of the box.
Closest example I can think of would be a portal like effect. @Leonidas, you are pretty good at the graphical pipeline, anything in your toolbox? 
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:
https://developer.playcanvas.com/en/tutorials/warp-a-sprite-with-glsl/
Here is how the Spine runtime initializes the default material:
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. 
Oh yeah, game development is all about those little workarounds that can help get the project move forward.
Keep up the good work @tomkubur!
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.