图片在IOS浏览器与ANDROID分别有黑边和白边显示

  • Creator 版本: 2.4.0

  • 目标平台: iOS

  • 手机浏览器 safari / ios微信 / android chrome:

border240.zip (820.8 KB)

src blend factor: 设置为SRC_ALPHA
ios 下显示 图是这样的 有黑边


ANDROID 正常显示

src blend factor: 设置为:ONE
IOS 正常显示

android 显示图是这样的:没了透明部分

正常显示 的图应该是这样的:

请问这个问题怎么解决啊?已附demo

引述cary 针对此问题的说明:

参考:https://forum.cocos.org/t/bug-blend-one-one/83923/7

cary引擎开发团队5月7日
开启预乘之后 opacity 失效的问题处理,已经修改,会在 2.4 版本更新。

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

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

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

效果上 只有设置 Sprite 的 SrcBlendFactor 为 ONE,对图片进行预乘处理,这个方式才是最好的,但DRAWCALL就暴涨了!

首先可以明确的是,原图本身是否有黑边,通过图片放大查看边缘能够看出是否有黑边,虽然原图的黑边不明显,但是一点点黑边在手机上也会很明显,我们做项目的时候也会遇到这样的问题,特别是在纯色背景的场景中,通常的做法是素材用的是32位的图,确认原图没有黑边

确认原图没有黑边的,图片是24位PNG图。改为32位PNG?

要不你把你的图发上来我帮你看看,确认有没有黑边?

我已上传DEMO,DEMO有图

问题完美解决,SrcBlendFactor 使用 SRC_ALPHA, DRAWCALL不涨。

图片在 PS 等工具中制作时,增加背景图层,颜色设置为半透明边缘的颜色,然后设置背景图层的不透明度为1% 。

你好,这个能不能提供个解决版本的DEMO呢,我这边也遇到问题了,想看看你图片怎么处理的

你就看我这里的DEMO,把有黑边的图在PS里打开,做一个图层作背景 用 RGB(255,255,255)填充,然后把这个背景层不透明设置1%,然后再把这个PSD导出PNG。