如下图所示美术给我两张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 。
这样问题就可以完美的解决。如下图所示,图片完美的拼接了。。
我对OpenGL 底层了解的也不多, 希望大家大家在留言处留下宝贵的意见。也算给我指点指点,谢谢。
- 本文固定链接: https://www.xuanyusong.com/archives/3136
- 转载请注明: 雨松MOMO 于 雨松MOMO程序研究院 发表
文章里面有一处说得不正确,mipmap不是使用空间换时间的,而是为了解决采样不稳定的问题,例子就是斜着观察棋盘,远处会出现采错误。
MOMO,NGUI中UISprite、UITexure、UI2DSprite等类里的drawingDimensions属性里有if ((w & 1) != 0) padRight;if ((h & 1) != 0) padTop;这么两句,请问为什么要这么做?还有MakePixelPerfect函数,为什么结果也非要强制偶数?
宽高大于等于1
MOMO,NGUI中UISprite、UITexure、UI2DSprite等类里的drawingDimensions属性里有if ((w & 1) != 0) ++padRight;if ((h & 1) != 0) ++padTop;这么两句,请问为什么要这么做?还有MakePixelPerfect函数,为什么结果也非要强制偶数?
松哥,我用UGUI做2D像素游戏,地图图片设置为point(点线性过滤),但是图片移动的时候回有花纹装效果(帧率稳定,摄像机不动)请问有什么解决办法吗?
刚发现这问题确实是两种情况,我以前是用UITexture的时候碰到这条线,这种情况就是Wrap Mode改为Clamp就能解决;另一种情况是用图集的UISprite,这时改Wrap Mode就没用了,只能Filter Mode改为Point解决,但是图片会变得颗粒感很强,还是得尽量避免= =