• 中文
  • 关于对半透明图片的描边问题

Related Discussions
...

版本号为4.0,管线使用的是URP
我按照demo中的方式使用Skeleton-OutlineOnly shader来达到描边效果。
一般情况下,可以正常工作。

但因为美术效果需要,角色的某一部分可能是半透明的。这个时候整个半透明区域都会被描边颜色填充。

请问一下是否有关于半透明描边的方案可供参考

感谢您的输入,您是对的,缺少这样的参数。 我们刚刚为 4.1 分支上的所有轮廓着色器添加了一个新的 Advanced - Opaque Alpha 参数。 如果像素的 alpha 值高于此阈值,它将不会收到任何轮廓颜色叠加。

此提交中添加了此功能:
https://github.com/EsotericSoftware/spine-runtimes/commit/a3e0ab37edfc6fbe016e760bbb34d3ea8d8a8e6d
不幸的是,此提交不会被反向移植到 4.0 分支,因此我们建议您尽可能更新到 spin-unity 4.1,或者手动将提交的更改应用到您的 4.0 运行时。

一个新的 4.1 spin-unity unitypackage 和 Spine URP Shaders 包可以像往常一样在这里下载:
spine-unity Download
请注意,当使用 URP 着色器时,您需要升级 Spine URP 着色器包和 spin-unity 运行时,因为通用轮廓 GUI 是 spin-unity 包的一部分。


Thanks for your input, you are right that such a parameter is missing. We have just added a new Advanced - Opaque Alpha parameter to all outline shaders on the 4.1 branch. If a pixel's alpha value is above this threshold, it will not receive any outline color overlay.

This feature has been added in this commit:
https://github.com/EsotericSoftware/spine-runtimes/commit/a3e0ab37edfc6fbe016e760bbb34d3ea8d8a8e6d
Unfortunately this commit will not be back-ported to the 4.0 branch, so we would either recommend you to update to spine-unity 4.1 if possible, or apply the commit's changes on your 4.0 runtime manually.

A new 4.1 spine-unity unitypackage and Spine URP Shaders package is available for download here as usual:
spine-unity Download
Please note that when using URP shaders you need to upgrade both the Spine URP shaders package and the spine-unity runtime, since the common outline GUI is part of the spine-unity package.

感谢你的回复,我在4.1版本中使用了这个新的参数。通过控制Opaque Alpha的值,确实可以解决我当下的困扰。

但与此同时,我注意到一个新的问题。我们使用PhotoShop绘制时,画笔会自动做抗锯齿处理。最终导出的图片边缘会有一些半透明的像素点,由内向外Alpha值逐渐降低。(据我了解,这个抗锯齿处理无法关闭)
当我改变Opaque Alpha的值时,同样会影响到这些边缘像素。Opaque Alpha的值越小,描边会越向外偏移。这会导致Spine形象和描边之间产生空白间隙。
在我的测试中,只要Opaque Alpha的值低于0.5,影响就会比较明显。

有什么解决建议吗?

一般来说,请始终提供显示您实际问题的屏幕截图,用文字描述此类问题几乎总是模棱两可,如果我们从中文翻译成英文更是如此。

虽然机器翻译使用“抗锯齿”一词,但我认为您的问题不在于抗锯齿创建半透明像素。抗锯齿会创建一个宽度仅为单个像素的半透明像素区域,这应该不是问题。如果这是一个问题,那么理论上你可以通过增加图集纹理分辨率来解决这个问题,减少屏幕上 1px 半透明边框的显示尺寸。

如果您的意思是在使用 Photoshop 绘图时,您会收到更大的多个透明像素的半透明羽化区域(使用大多数画笔时,与铅笔工具相比),那么解决方案是在 Photoshop 中相应地调整您的画笔以产生小衰减区域,或使用较小的刷子清理边界。

在技​​术方面,您只能设置一个阈值,因此您需要相应地调整您的艺术。如果轮廓和无轮廓部分具有相同的 alpha 值,它将平等对待它们。


In general please always provide screenshots that show your actual problem, describing such issues with words will almost always be ambiguous, even more so if we translate from Chinese to English.

While the machine translation is using the wording "anti-aliasing", I do not think that your problem is with antialiasing creating the semi-transparent pixels. Anti-aliasing would create a semi-transparent pixel area with the width of only a single pixel, which should not be a problem. If it's a problem, then your could theoretically solve this by increasing the atlas texture resolution, reducing the displayed size of the 1px semi-transparent border on-screen.

If you mean that when drawing with photoshop you receive a larger semi-transparent feathering area of multiple transparent pixels (when using most brushes, compared to the pencil tool), then a solution is to adjust your brush in photoshop accordingly to have a small falloff area, or use a smaller brush and clean up your borders.

On the technical side of things you can only set one threshold, as a consequence you need to adjust your art accordingly. If both outline- and no-outline parts have the same alpha value, it will treat them equally.

Harald a écrit

If you mean that when drawing with photoshop you receive a larger semi-transparent feathering area of multiple transparent pixels (when using most brushes, compared to the pencil tool).

这是我想表达的。

再次感谢你的回复。
我会尝试在Photoshop中解决这个问题。

很高兴它有帮助,感谢您回复我们!
Glad it helped, thanks for getting back to us!

测试