BUG:预乘模式blend(ONE,ONE)时,透明度无效

  • Creator 版本:2.1.2, 2.1.3

  • 目标平台:

  • 详细报错信息,包含调用堆栈:

  • 重现方式:必现

  • 之前哪个版本是正常的 :不确定,没看过旧版本

  • 手机型号 :

  • 手机浏览器 :

  • 编辑器操作系统 :MAC,WINDOWS也有问题。

  • 编辑器之前是否有其它报错 :无

  • 出现概率:100%

  • 额外线索:

预乘的那组,特效图片是设置为预乘模式的:

问题说明:当图片为预乘,blend混合为ONE,ONE时,透明度怎么设置都是无效的。

大佬们,有什么方法可以解决吗?

testBlend.zip (760.1 KB)

这个是附加工程。

@jare

现在所有Sprite使用的都是同一个默认的材质,没有依据是否预乘进行处理,如果你需要预乘的情况下继续调整透明度,可以先复制一个内置的Sprite材质跟对应的Effect文件,重新命个名字,给材质的Effect文件加一行代码,然后设置给Sprite组件,如图:

1赞

好的,感谢大佬。:14:


我们自己也有尝试修改引擎,这样改也是一种方法。

1.默认的情况下导入图片就有黑边(或者边缘不清晰)
2.勾选预乘 && 混合模式改成srcBlendFactor = cc.macro.BlendFactor.ONE,dstBlendFactor = ONE_MINUS_SRC_ALPHA。黑边消失,opacity属性无效
3. 在 2的基础上 Effect 文件加入o.rgb *= o.a 后 图片 又有黑边了。
请问 要怎么解决

  • 开启预乘之后 opacity 失效的问题处理,已经修改,会在 2.4 版本更新。

  • 关于图片导入之后的黑边问题说明,已经补充到文档中,暂时还未更新,详细说明以及对应方案如下:

当图片资源导入到编辑器中时,默认使用的过滤方式(Filter Mode)为线性插值(Bilinear),而对于 Sprite 组件,默认的 SrcBlendFactor 为 SRC_ALPHA。在这种条件下,对于有半透明像素的 PNG 图片,在编辑器及预览时半透明边缘通常会有黑边问题。原因是因为低分辨率的图片在显示到更高分辨率的显示设备上时,会进行上采样(upsampling),也就是图像插值(interpolating),在做像素插值时,半透明边缘与透明像素(0,0,0,0)插值之后会产生低透明度的黑色像素。避免图片的黑边问题通常有如下几种方式:

  1. 过滤方式(Filter Mode)使用 Point 模式,需要能够接受 Point 模式下的锯齿。(推荐)
  2. 在图片在 PS 等工具中制作时,增加背景图层,颜色设置为半透明边缘的颜色,然后设置背景图层的透明度为如 1/100 的低透明度。(推荐)
  3. 在图片导出时,设置为较高的分辨率,避免显示到设备时进行图像插值放大。(不推荐)
  4. 引擎的自动图集提供了扩边选项,勾选该选项时,编辑器会自动为半透明图片边缘进行扩边处理,可以避免黑边问题,需要注意的是,自动图集只有构建之后才会生效,在编辑器及预览时不会生效。其他图集打包工具一般也会有类似的处理选项(推荐)
  5. 设置 Sprite 的 SrcBlendFactor 为 ONE,对图片进行预乘处理,但是可能会影响到图片的批次合并,需要开发者视使用场景决定。
5赞

大牛 sprite直接改node的color的alpha值没反应啊? 得设置opacity才管用为啥啊,如果clolor不支持alpha那为啥要公开alpha出来呢,,,

1赞

使用 2.4.2,为了避免黑边设置了 SrcBlendFactor 为 ONE 和预乘。修改透明度在 web 和微信小游戏表现正常,打包到 Android 后会变成黑块,请问有解决方法吗?使用最新的 2.4.3 rc8 同样有黑块

什么样的表现?所有半透明图片修改都会有黑块吗?

1赞

应该和我遇到的是同一个问题。

翻翻老问题

请问这个问题怎么解决的,原生端勾选预乘设置透明度直接成了黑块

原生端勾选预乘设置透明度直接成了黑块,怎么结解决的?

图片做扩边。 不要预乘。