相信不少用Cocos Creator 2.0的同学,都遇到过游戏中图片边缘出现黑边的问题,论坛上搜索“黑边”就能搜出一堆讨论帖。
GT也曾经被这个问题折磨过,今天分享一个可以简单处理这个问题的个人工具。
工具已经上架Cocos Store,点击商店页面访问,或者搜索"图片去黑边工具"
为什么会有黑边
用一个词概括,就是插值。
Cocos Creator引擎默认对纹理进行双线性插值采样(Filter Mode = Bilinear)
,在渲染图片边缘附近时,有极大概率需要边缘像素和邻近的透明像素插值计算得到要显示的颜色。
如果美术同学给的图中透明像素是RGBA=(0,0,0,0)的透明黑色,插值后的颜色就会偏黑。
去黑边的方法
勾选透明预乘
论坛里用得比较多的方法是勾选纹理的透明预乘并且修改Blend Factor
。
这种方式我也尝试过,但是在2.4.2上遇到另一个bug,最后不得以寻找其他方法。
https://forum.cocos.org/t/topic/100557
扩边
本文的方法是直接对源图片进行批量处理,纹理状态和Blend Factor保持引擎默认选项。
黑边现象是边缘像素与黑色进行插值
导致,如果边缘像素和自己相近颜色插值
,黑边就会自然消失。
基于这个思路将最靠近图片边缘的透明像素的alpha改为3
,并且将其RGB值设为邻近非透明像素RGB的插值
,简称扩边。
下图中的B点是通过扩边重新计算后的颜色,可以看到插值得到的颜色只是更加透明,并不会有变黑的感觉。
工具使用方法
(本工具会批量修改图片文件,使用前请务必备份图片!!!)
(本工具会批量修改图片文件,使用前请务必备份图片!!!)
(本工具会批量修改图片文件,使用前请务必备份图片!!!)
如何安装
工具使用python3编写,需读者自行安装python3环境
方法1(推荐): 通过pip下载安装
pip install png-dilator
方法2: 本地安装
从商店页面下载的工具包是一个whl文件,如果是zip文件需要先解压
pip install “whl文件路径”
如何调用
目前只提供基础功能,只能通过命令调用,没有集成到IDE里。
已经处理过的图片二次处理不会产生变化。
批量处理目录下的图片,原地修改:
python -m dilator dilate_dir “图片目录绝对路径”
处理单个图片:
python -m dilator dilate “图片绝对路径” “图片输出路径”
扩边方法缺点
- 轻微增加纹理空间占用。原因是图片边缘增加1px的不透明层,合图后占用的高度、宽度各增加2px
- 轻微增加图片尺寸。原因是图片颜色数量增加
- 如果你用工具去黑边后再用pngquant/tinypng压缩图片,图片失真会增加一丢丢丢丢 。原因参见27楼
源码地址
https://gitee.com/caogtaa/png-dilator
如果这个工具有帮助到你,请给GT一个