自动图集打包后，导致预乘失效

Creator 2.x
#1

为了解决黑边问题使用了，对图片使用预乘，预览是完全没有问题的
但是在项目上线前，构建自动图集合并DC的时候，发现自动图集使预乘失效了

尝试用代码设置自动图集的预乘，但是无效
node.getComponent(cc.Sprite).spriteFrame.getTexture()update({ premultiplyAlpha: true }); // .setPremultiplyAlpha(true)

另使用texturePacker设置的预乘图集，在微信小游戏平台，安卓真机上出现光圈，所以也无法完美使用

单独的碎图预乘是没有问题的，但是没办法进行合批

请官方大大帮忙看看

pngDemo.zip (1.7 MB)

#2

@jare
@huanxinyin
版本 2.0.9

#3

编辑器中表现：

微信开发者工具表现：

image.png775×439 59.6 KB

#4

@jare
@huanxinyin
每日一@

#5

使用构建自动图集，混合模式按照下面默认设置就可以了。

#6

自动图集的预乘设置会在2.1的下个版本加上，不过引擎的自动图集有扩边功能，就是在不使用预乘，Blend使用SRC_ALPHA的情况下避免黑边的，编辑器里因为自动图集构建之后才会生效所以会显示黑边，但是构建之后应该是正常的吧？

#7

刚特意升到2.1.3,试的，自动图集，不使用预乘+Blend，在编辑器，安卓真机上仍有黑边

#8

还是不行，我现在想找一个方案既能解决黑边问题又可以合批渲染，就可以了。。。
自动图集的texture在代码中设置后，预乘属性是显示true了，但是实际并没有产生作用

#9

安卓真机是跑在什么平台？编辑器里面自动图集没有生效，是会有黑边，预览应该也会

#10

确保你勾选了

#11

在 微信小游戏 中

#12

应该就是这个扩边

image.png1610×929 600 KB

刚截的图，对比预乘方案，确实是有黑边的

#13

有解决方案么0.0

#14

image.png1034×845 176 KB

  1. 测试的结果，自动图集构建之后的效果已基本与预乘的一致了，不过在不规则的半透明边缘还是会有一些像素采样到了透明像素，显示黑色。

  2. 自动图集的扩边只是扩展了边缘的1个像素，采用 SRC_ALPHA 的混合模式，如果无法达到美术预期，可以通过代码对使用自动图集的图片设置预乘，并设置Src Blend 为 ONE。

    this.sprite.spriteFrame.getTexture().setPremultiplyAlpha(true); this.sprite.srcBlendFactor = cc.macro.BlendFactor.ONE;

  3. 自动图集在后面版本会加入预乘的设置选项，另外也会考虑加上 Extrude 数值的可调整，或者你也可以先尝试一下 TexturePacker 导出的时候设置勾选预乘并扩大 Extrude 的数值。

#15

感谢官方的回复，经过测试，还是发现部分问题存在
1.自动图集使用代码设置预乘无效，代码如下

image.png1219×107 5.44 KB

2.texturePacker使用预乘，安卓上会有光圈问题，Extrude也无法解决黑边问题

#16

pngDemo 2.zip (1.6 MB)
我昨天测试过是可以的，测试版本是2.0.9，发修改后的Demo给你，可能是你调用的时机不对，Demo里测试用是对每一个节点组件的图片进行设置，有点麻烦，你可以预先加载一下图集图片，然后直接对图集图片设置一次就可以了。

#17

额。。。我用的也是2.0.9，使用你发的工程未做改动，直接打包微信小游戏，开发者工具内显示如下

image.png813×548 50.2 KB

#18

使用了自动图集之后，是不是不用勾上图片的预乘，然后混合模式照你这样设置就可以了？

#19

微信小游戏平台会清理掉Texture的Image缓存的，需要你预加载的时候就去设置图集的预乘，或者在game.js里面把cc.macro.CLEANUP_IMAGE_CACHE 设置为false，第二种方式会对微信平台的内存有影响。

示例打包WebMobile看自动图集的扩边效果，应该只有第四张图片边缘有部分黑色像素。如果不使用预乘，可以把有问题的图片透明区域用透明的白色（255，255，255，0）填充，不用透明黑色（0，0，0，0）也可以解决问题。

#20

自动图集的预乘选项会在下个版本加上，暂时没有，默认的使用图集就表示不使用预乘的方式了。

1赞