SkeletonGraphic animation "flash" when i change transparency (CanvasGroup)

EIvanov

I use Unity 2021.
There is a canvas on the screen. There is a “window” on the canvas - an object containing the components Image (window picture), Canvas Group, Canvas Renderer.
Showing and hiding a window is done by changing the transparency CanvasGroup. This ensures a smooth display of the window.

Here is the code to hide the window

// We hide the window. Once hidden, we disable the object.

gameWindow.GetComponent<CanvasGroup>().DOFade(0, animationDuration)
.OnComplete(() =>
       {
           gameWindow.SetActive(false);
       });

The window has buttons, pictures and various elements.
There is an element on the window SkeletonGraphic (Unity UI Canvas). This is a hero animation.

When hiding a window, the hero's animation flashes. It is something like a highlight of the contour, coloring the animation white and a flash.
No window element behaves this way - only SkeletonGraphic (Unity UI Canvas).
How can this be fixed?

Misaki

EIvanov This is due to Unity modifying the vertex color alpha value behind the scenes, which unfortunately does not play well with the premultiplied-alpha vertex color shaders of the spine-unity runtime.
Please read the "CanvasGroup alpha" section of the spine-unity runtime documentation for more information:
http://esotericsoftware.com/spine-unity#CanvasGroup-alpha

Spinebot

To address the issue of the SkeletonGraphic animation flashing or appearing highlighted when changing the transparency of a CanvasGroup, ensure that the CanvasGroup Compatible parameter is enabled on the material used by the SkeletonGraphic component. This parameter is designed to make the material compatible with CanvasGroup's alpha changes, preventing the described flashing or highlighting effect. This setting is particularly important when the SkeletonGraphic is part of a UI that utilizes CanvasGroup for transparency effects. Additionally, ensure that PMA Vertex Colors is disabled if you're using a CanvasGroup compatible material to avoid a double-darkening effect of semi-transparent parts, as mentioned in the Spine-Unity documentation.

If you're using a version of Spine-Unity prior to 4.0, you might need to manually enable the Canvas Group Compatible parameter on your material, as it was not enabled by default in earlier versions due to potential changes in behavior for existing projects. For Spine-Unity 4.0 and later, this parameter should be enabled by default on new materials.

EIvanov

Misaki I have read the instructions. I didn't fully understand what could get rid of the problem since the instructions don't have a clear beginning and end.

First the problem is considered, and then there are points
The spine-unity 4.2 and new.....
SkeletonGraphic without Tint Black.....
With version 4.2....
SkeletonGraphic TintBlack...
And then there is a lot of information and settings.

However, I replaced the material with SkeletonGraphicDefault-CanvasGroup.

The highlight has disappeared, but now when I hide the window (change the transparency), parts of my character are visible. Somewhere in the middle, when the alpha channel of the window is 120, the character becomes as if made of parts (from those parts from which he is assembled).

Misaki

EIvanov We are sorry to hear that the documentation is not clear to you. In fact, some changes were made in 4.2 to make it easier to set up, so we are aware that the CanvasGroup alpha section of the current documentation is a bit complex. To help us determine which explanation is right for you, please tell us the following:

Does your skeleton use Tint Black?
What version of the spine-unity runtime are you using?

Harald

EIvanov I have read the instructions. I didn't fully understand what could get rid of the problem since the instructions don't have a clear beginning and end.

Sorry that this documentation section is not easy to undestand. Please note that if you're using spine-unity 4.2, just use the Detect buttons as pointed out at the beginning of the documentation section to automatically assign the correct settings and materials. You can then just skip reading the documentation section entirely as the Detect buttons do all the work for you and replace manually checking the list in the documentation.

EIvanov The highlight has disappeared, but now when I hide the window (change the transparency), parts of my character are visible. Somewhere in the middle, when the alpha channel of the window is 120, the character becomes as if made of parts (from those parts from which he is assembled).

Did you use the Detect buttons to assign the proper settings? If so, could you please show an image of the incorrect result that you get?