Outlines in Unity are slightly off

GGabriel_Wink · 19 फ़र.

Hi!
I recently tried to add outline in Unity for my Spine animations.
It's working great but I have a little issue: the outline starts 1 pixel after the end of the sprite, so their is a very little transparent gap between them. Here is an example where I zoomed and put a red background to make it clear (you can see a fine red line between the sprite and outline):

It's hard to see if you zoom out or if the colors of outline and background are similar, but in my game it creates visible artefacts.
I first thought I had some half-transparent pixels in my texture, but it's not the case, the result is the same with every png, including the example Outline URP scene, as you can see in this screenshot:

(Precision: I'm using URP).

Is there a way to fix this?
As the outline is rendered behind the skeleton, one solution would also be to fill it completely with its color (we don't need its inside to be blank most of the time). Anyone knows how to do that? Having an option for that in the outline material would be marvellous.

Thanks a lot in advance!

Spinebot · 19 फ़र.

To address the issue of a gap between the outline and the sprite in Unity using Spine, you can try a few approaches. First, ensure that your mesh vertices are not too tightly wrapped around the sprite, as this can cause the outline to be cut off. You can adjust the mesh vertices to provide more space for the outline. Additionally, consider adding more padding around your atlas textures to prevent the outline from being cut off. If you are using the URP (Universal Render Pipeline), make sure you are using the correct URP outline shaders, as they are different from the Built-In Render Pipeline shaders. You can also try adjusting the Z offset of the outline GameObject to ensure it is rendered correctly behind the skeleton. If you want the outline to be filled completely, you might need to modify the shader to achieve this effect, or use a screen-space outline effect that can handle transparency.

For more detailed guidance, you can refer to the following resources:

GGabriel_Wink · 19 फ़र.

Ok, if anyone has the same issue, I found a solution.
I'm not use to shader writing, but as the Spinebot suggested, I tried to modify the outline shader, and I finally managed to fix my issue.
In the file "Shaders\CGIncludes\Spine-Outline-Common.cginc", you have to remove " - pixelCenter" at the end of line 49, to fill the outline with the color. Like this:
float outlineAlpha = saturate(saturate((average - thresholdStart) / (ThresholdEnd - thresholdStart)));
instead of
float outlineAlpha = saturate(saturate((average - thresholdStart) / (ThresholdEnd - thresholdStart)) - pixelCenter);

I hope other people will be helped by that.

Harald · 20 फ़र.

@Gabriel_Wink Thanks for reporting and sorry for the troubles. While this was intentional to make the outline-only case smooth on the inside, it indeed causes a slighly transparent gap as you've described. We've fixed the issue by providing a new property Fill at all outline shaders. It can be enabled to fill the transparent gap and defaults to disabled to keep the existing behaviour.

This issue has been tracked under this ticket:
EsotericSoftware/spine-runtimes2758

From the changelog:

All Spine Outline shaders, including the URP outline shaders, now provide an additional parameter Fill. Enable it to also fill the opaque area inside the outline with the outline color. Prevents a semi-transparent gap between outline and skeleton. Defaults to disabled to maintain existing behaviour.

New spine-unity and Spine UPM Shaders URP 4.2 packages are available for download:
https://jp.esotericsoftware.com/spine-unity-download

Please let us know whether this resolves you issue as well.

GGabriel_Wink · 21 फ़र.

Hi Harald
Thanks for your reply. I tested the update, the solution is perfect. Thanks a lot for your reactivity!

Harald · 21 फ़र.

Glad it helped, thanks for reporting!