This is a pretty common question and unfortunately the solution isn't simple. When you set the alpha/opacity in Spine, it is applied to each of the 'attachment images' that are rendered. So if you set the alpha/opacity to 50% for the entire skeleton, then the places where pieces overlap will not be overall 50% opacity, since it will have rendered multiple images (with each individual one having 50% opacity) on top of each other.

Here is a ticket with more info - the usual solution is to render the spine character to a RenderTexture at full alpha/opacity, and to then render that RenderTexture 'to the screen' at whatever alpha/opacity you desire.

https://github.com/EsotericSoftware/spine-runtimes/issues/1337

At the bottom of that ticket there is some code for doing the RenderTexture technique. I haven't tried it myself but maybe you could give it a look. Note that if you aren't a programmer and/or don't have experience with this sort of stuff, it may be difficult to implement. I'm not sure how 'out of the box' that code snippet is.

gunspike написал

https://tsubakit1.hateblo.jp/entry/2017/11/25/200555
There is also a method like this. Could this method be useful for spine as well?

They are rendering the character from the closest attachment-image to the furthest, and setting the stencil (mask) as they go, so pixels for any attachment-images that are 'underneath' an already-drawn pixel won't be drawn. Pretty interesting, but like they mentioned in their post, there are a lot of possible issues when using that technique. One major limitation would be that it wouldn't support transparency in the individual attachment-images themselves. The way the Sprite Mask works is that it sets the stencil (mask) for that pixel IF the alpha value of that pixel is above a certain threshold. So it would work fine for characters where all of their pixels are fully-opaque (like pixel art), but if you have images that have varying levels of alpha/opacity, it isn't going to work well with the Sprite Mask. Imagine a glowing orb image that is fully opaque at its center and pixels get less and less opaque as you move from the center. There will be a hard cutoff point based on the Sprite Mask's alpha threshold value where the mask will no longer be set for the pixel.

So to wrap things up, that technique COULD work, but it depends on your art style (pixel art? or art with soft edges and transparency?), and your project's perspective/view (look at the other issues that are mentioned in the post, like overlapping multiple characters, and the sorting issues, etc). I wouldn't use it personally.

gunspike написал

I would be grateful if you could explain in as much detail as possible an example where there is a solution for this in Esoteric Software and how to do it!

I don't know of a specific example/tutorial of using a Render Texture with Spine. If you want to try to figure it out, you can research how Render Textures work and look for any generic tutorial, and then apply it to your Spine characters. But like I mentioned earlier, using Render Textures isn't a particularly easy thing, so if you don't have any knowledge about the rendering process / cameras / etc, it will probably take some time and research.

A new example component SkeletonRenderTexture has been added to the repository on the 4.0 branch, alongside with a fadeout example scene named 'RenderTexture FadeOut Transparency'. This commit will be merged to 4.1-beta soon.

A new 4.0 spine-unity unitypackage is available for download here as usual:
Spine Unity Download

Glad to hear it helped! Thanks also go to github user Elringus, who shared his existing code at the github ticket mentioned above that really helped the above implementation come to life - it saved a lot of time of searching the Unity API reference pages .

What does "not work"? Please always describe in detail what error messages you receive, what you expect to see and what you see instead. Otherwise it's like telling a doctor on a phone "it hurts", which will also not be enough to diagnose the situation.

This looks as if you didn't copy the SkeletonRenderTexture.cs file (the important one), but only the RenderTextureFadeoutExample.cs file (the minimalistic script that just shows how to use the SkeletonRenderTexture.cs file in the example scene).

Admittedly the example scene and component was rather minimal and perhaps a bit hard to read. I have now added a SkeletonRenderTextureFadeout example component, and improved the documentation at all related components. The example scene has also been updated to use the new component. It's now quite simple to use and should be easy to understand: attach both components, disable both. To start the fadeout, enable the SkeletonRenderTextureFadeout component.

New 4.0 and 4.1-beta unitypackages are available for download here as usual:
Spine Unity Download
Make sure to copy all 3 fadeout-related components and the example scene to your 3.8 project.

I hope it helps you and other users, it should be quite easy to use now.

I just wonder, how does the Unity's CanvasGroup work so well with other Image objects stacking on each others. Is it also using RenderToTexture to fade them all together?

Likely, yes. A frame debugger might show what it does. If anyone however finds a new magic alternative, please let us know :nerd:.