在进行产品演示的时候,发现有一个头像框出现了锯齿,这个头像框控件是: ImageView。
于是就从Cocos引擎上找问题,如下:
由于一些特定的原因,程序并没有使用plist方式打包资源,而现在使用的是零散的小图片。在运行时,发现会出现某些图片显示模糊的情况。找到的原因如下:

纹理在初始化的时候默认调用了setAntiAliasTexParameters接口,而该接口设置GL_TEXTURE_MIN_FILTER和GL_TEXTURE_MAG_FILTER为GL_LINEAR。而使用GL_LINEAR渲染时,如果文理的像素点和显示区域的坐标不能一一对应(例如放大,缩小,或者显示位置为浮点数),就会使用附近的四个像素(2*2, 2D显示)做颜色混合,这样会使图片看上去模糊。
解决办法:
根据上述分析,可以用如下几种办法:
1、调用Texture的setAliasTexParameters接口,副作用在放大或缩小时会导致锯齿严重,而且如果显示位置为浮点数的话,会导致最后一行(一列)像素被截掉。
如果是cc.Sprite调用:

Sprite:getTexture():setAliasTexParameters()
如果是Widget控件使用呢 继承Widget接口的ImageView,调用:
ImageView:getVirtualRenderer():getSprite():getTexture():setAliasTexParameters()

如果是BUTTON需要去源码中找相应接口
2、不要使用图片分辨率为奇数的图片,因为使用奇数的图片,如果设置AnchorPoint为(0.5f, 0.5f), 即使setPosition()传入整数参数,也会导致图片的显示坐标为小数。
3、如果一定要使用分辨率为奇数的图片,锚点设为(0.0f, 0.0f), 这样可以保证只要setPosition()传入的是整数(注意父控件的位置也不能是浮点数)就不会有显示问题。

我是采用了方案1和方案3,但是还是不行。 于是乎,我打开了美术给的原图,发现原图就存在锯齿。 找了美术,美术这边的解释是图片太清晰就会存在锯齿问题,需要进行模糊化。 经过模糊化处理后解决。

参考文章:
https://blog.csdn.net/yuanhong2910/article/details/7506593
https://www.jianshu.com/p/0d1bbb29e63d

标签: none

添加新评论