游戏开发中图片模糊、锯齿相关问题的处理

目录

 

引言：

常见的图片显示失真情况：

处理办法：

总结：

---

引言：

在游戏开发中经常会碰到一个比较头疼的问题。“明明美术出的图很好看很清晰，放到游戏里就糊了、或者有锯齿看着很难受”。

尤其是做手机游戏，因为要适配各种性能配置的手机。往往对资源要进行压缩处理来减小包体和内存的占用。

针对这些糊了、锯齿等现象一般的处理就是根据经验去切换压缩类型、换高清图、打开引擎提供的抗锯齿等等。

这些方法往往还是比较有效的，所以重点是在各种情况下找到最合适的解决办法。

常见的图片显示失真情况：

1.低频采样

情景：在游戏中设置图片的尺寸小于实际图片的尺寸。

原因：纹理采样的时候因为实际像素点比原图少所以会丢失一些图像的信息，导致失真。

2.高频采样

情景：在游戏中设置图片的尺寸大于实际图片的尺寸。

结果：纹理采样的时候因为实际像素点比原图多导致相邻的像素点会取到图片同一个颜色，导致出现模糊、失真。

3.旋转引起的锯齿

情景：将图片进行了旋转。由于图形底层划线算法的原因导致锯齿的出现。

这里简单的说明一下：图形底层最终划处一根直线的时候是通过打连续的像素点来实现的。

当划一根横平竖直的线段的时候连续打点就可以得到一条水平的线段，但是当我们旋转这条直线之后情况就成下面这样了。

显而易见右边的斜线产生了锯齿。

结果：边缘产生锯齿。

处理办法：

1.低频高频采样：使用纹理过滤技术。

纹理过滤一般有两种：Bilinear(双线性过滤)和Trilinear(三线性)。

双线性过滤的原理就是取得采样点周围的四个像素点的颜色相加取均值后作为最终的采样颜色，这样处理之后整体图片像素之间的颜色变化变得平滑，大大消除高低频采样带来的颜色跳跃变化。当然图像会产生一些肉眼难辨的模糊感(可能很仔细的看还是看的出来，但是比起失真来说肯定利远大于弊)。

三线性过滤的原理和双线性比较类似，有兴趣可以查一下这里就不浪费时间了。

一般地，在引擎中都会提供图片的设置选项，可以直接选择纹理过滤的方式。以unity为例，图片的inspector中有一个Filter Mode选项可以选择Point（无过滤），Bilinear和 Trilinear。一般选择Bilinear就可以了，因为两者效果区别不大而Trilinear从算法上来看更加费时。

当然，如果我们使用图片的时候没有发生高低频采样则选择不过滤是最合适的(效果最好，且没有额外的消耗)。

2.旋转引起的锯齿问题：

办法1：将旋转角度控制为45,135,225,315这四个特殊的角度。

从划线算法来看，如果一条线的角度是45度这样的角度，则打出的点刚好也可以是连续的自然不会产生锯齿。

当然实际情况中可能并没有那么幸运。

办法2：开启引擎提供的抗锯齿选项。

引擎提供的抗锯齿是对划算算法的一种优化处理，这种算法的优化能够一定程度的减少锯齿的出现。但是算法本身的开销是蛮大的，具体的原因这里篇幅有限，有兴趣可以查阅下图形学里关于抗锯齿算法的那一章节。

实际使用抗锯齿往往并不尽人意，因为锯齿还是会存在只是会少很多。但是因此带来的性能开销是很大的。在手游项目中更是捉襟见肘。

办法3：让美术直接出各个角度的图片。

这当然是一种完全解决锯齿问题的办法，但是必定增加空间的占用。如果资源充裕的情况下也是个可以考虑的选择。

但如果图片需要摆出各种随机的角度，就基本可以不考虑这个办法了。

办法4：将原来的图四边留几层像素点，在原来边缘颜色相邻的地方一层层的画上一些渐变的颜色并且逐渐降低透明度。再打开bilinear过滤。

这个办法的原理是将原本比较锐利的边缘模糊掉从而消灭锯齿。

这种办法能够很大程度的消灭锯齿，但是带来的问题也不言而喻，边缘会出现模糊感。

总结：

具体情况具体分析，综合包体大小，内存占用，算法开销，最终图像质量等各个方面选择最能够接受的办法就可以了。