NGUI研究院之与图片拼接的1像素接缝

如下图所示美术给我两张255X255的图片让我来拼接。第二张图的X坐标明明是X偏移255的为什么中间有一像素呢？

此时如果你不加思索的就把X偏移改成254。仔细看看下面这个位置明显图片没有被拼接上？如果两张图片都是纯色的话可能这样可以被拼上，但是这是不解决核心问题的。。

 

如果你看NGUI的源码你会发现NGUI会自动把奇数宽高的图片补起成偶数的宽高图片。如下图所示，当你制作完一个NGUI的图集后你会发现NGUI自动打开了MipMaps 并且利用三线性来过滤图片。

如下图所示，如果你把混合模式改成点线性过滤，你会发现你的图片拼接的非常OK了。

 

从效率上来说 点线性过滤 > 二线性过滤 > 三线性过滤。如果点线性过滤好用的话为什么NGUI要用三线性过滤呢？

1.UISprite是可以随便缩放的，如果不缩放的话点线性没问题，可是一旦缩放因为用点像素来填充那么图片必然糙了。。

2.我觉得NGUI是为了支持3D界面所以不得不在生成Atlas后时候勾上了Generate Mip Maps选择三线性来过滤图片。生成MipMaps以后那么在内存中的图片会大很多（MipMaps就是典型的用空间来换时间）所以如果你没有3D界面的话一定要把mipMaps关闭，采取二线性过滤即可。

最后在回到文章的题目，如何解决NGUI图片的拼接问题。

1.不要用奇数图片，保持美术给的图宽高都是偶数。

2.拼接的时候都按偶数像素来拼接。

3.取消Generate Mip Maps ，不生成MipMaps。

4.图片采用点线性过滤模式。

5.采取点线性过滤的话图集上的图片就不能使用NGU的缩放功能了，不然图片会糙的。我觉得可以把需要拼接的图片放在一个图集上，如果拼接的图片不多的话也可以考虑用UITexture 。

这样问题就可以完美的解决。如下图所示，图片完美的拼接了。。

其实产生黑线的原因就是因为非点线性过滤模式。
图片的边缘像素会与周围像素做一定程度的均匀采样，而NGUI做成的图集的空隙处，是用颜色（0,0,0,0）来填充的，被均匀采样的像素会因为空隙的黑色透明而比原来的颜色更暗更透明，所以出现了黑线。
所以不只是拼接而成的图片，单张图片也会产生黑边。
我的做法是利用为了九宫格图片而设置的border，修改UIBasicSprite的填充函数，增加一个是否渲染边缘（周围8块）的选项，如果不渲染，则不生成边缘的8块mesh的顶点数据。
当然，如果需要用到slice模式，只能让美术给图片边缘扩充1-2个像素，颜色与原边缘像素相同。（因为美术太懒，我都是自己PS的……）
我还给UIBasicSprite增加了镜像复制的功能，这样我只需要一个角，就能得到一个矩形，当然，用于镜像方向的边界，也是去掉border那么多的像素的。

我对OpenGL 底层了解的也不多， 希望大家大家在留言处留下宝贵的意见。也算给我指点指点，谢谢。