【工具】一条命令去除图片黑边

1

相信不少用Cocos Creator 2.0的同学,都遇到过游戏中图片边缘出现黑边的问题,论坛上搜索“黑边”就能搜出一堆讨论帖。
GT也曾经被这个问题折磨过,今天分享一个可以简单处理这个问题的个人工具。
工具已经上架Cocos Store,点击商店页面访问,或者搜索"图片去黑边工具"

为什么会有黑边

用一个词概括,就是插值
Cocos Creator引擎默认对纹理进行双线性插值采样(Filter Mode = Bilinear),在渲染图片边缘附近时,有极大概率需要边缘像素和邻近的透明像素插值计算得到要显示的颜色。
如果美术同学给的图中透明像素是RGBA=(0,0,0,0)的透明黑色,插值后的颜色就会偏黑。
2

去黑边的方法

勾选透明预乘

论坛里用得比较多的方法是勾选纹理的透明预乘并且修改Blend Factor


这种方式我也尝试过,但是在2.4.2上遇到另一个bug,最后不得以寻找其他方法。
https://forum.cocos.org/t/topic/100557

扩边

本文的方法是直接对源图片进行批量处理,纹理状态和Blend Factor保持引擎默认选项。
黑边现象是边缘像素与黑色进行插值导致,如果边缘像素和自己相近颜色插值,黑边就会自然消失。
基于这个思路将最靠近图片边缘的透明像素的alpha改为3,并且将其RGB值设为邻近非透明像素RGB的插值,简称扩边
下图中的B点是通过扩边重新计算后的颜色,可以看到插值得到的颜色只是更加透明,并不会有变黑的感觉。
5
image

工具使用方法

(本工具会批量修改图片文件,使用前请务必备份图片!!!)
(本工具会批量修改图片文件,使用前请务必备份图片!!!)
(本工具会批量修改图片文件,使用前请务必备份图片!!!)

如何安装

工具使用python3编写,需读者自行安装python3环境
方法1(推荐): 通过pip下载安装

pip install png-dilator

方法2: 本地安装
商店页面下载的工具包是一个whl文件,如果是zip文件需要先解压

pip install “whl文件路径”

如何调用

目前只提供基础功能,只能通过命令调用,没有集成到IDE里。
已经处理过的图片二次处理不会产生变化。
批量处理目录下的图片,原地修改

python -m dilator dilate_dir “图片目录绝对路径”

处理单个图片:

python -m dilator dilate “图片绝对路径” “图片输出路径”

扩边方法缺点

  1. 轻微增加纹理空间占用。原因是图片边缘增加1px的不透明层,合图后占用的高度、宽度各增加2px
  2. 轻微增加图片尺寸。原因是图片颜色数量增加
  3. 如果你用工具去黑边后再用pngquant/tinypng压缩图片,图片失真会增加一丢丢丢丢 :ok_hand:。原因参见27楼

源码地址

https://gitee.com/caogtaa/png-dilator
如果这个工具有帮助到你,请给GT一个 star

34赞

战略mark,以观后效

嗯嗯 :slightly_smiling_face:

mark mark

源码地址打不开

忘了设置公开了:sweat_smile:,已经修改

插眼插眼插眼

马克~~~~~~

优秀zsbd

我也是苦恼这个黑边的问题,哈哈哈哈哈哈,一直用one模式

感谢大佬,这个困扰已久

mark,这个问题困扰已久,一直是通过勾选预乘解决。

战略mark,以观后效

mark!

后面了试试

战略mark . 3.0版待观察

既然原理都知道了,引擎有没有可能不让透明像素参与双线性插值,这样是不是就不会有黑边或白边了?

参考Unity的纹理设置

https://answers.unity.com/questions/819633/what-does-the-alpha-is-transparency-setting-actual.html

不过这个选项不是让透明像素不参与插值,看样子也是对图片做预处理。

2赞

mark1!!

战略mark,以观后效