Unity 图片拼接中间有空隙问题详解

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接: https://blog.csdn.net/CC_childe/article/details/102745632

有一种美,叫对称美。对称随处可见,从皇城庙宇到民宅轩榭,对称之美,美在庄重。项目中,我们常常会遇到一些对称的图片,但是为了节约资源,往往我们会选择将其分成两半,只取其一,另一半直接在Unity中翻转就是了。

emmmmmm... 好像有点不对,中间的黑线是怎么回事?

好吧,要弄清楚中间的那条线,首先我们要弄清楚这两个参数—— Wrap Mode 和 Filter Mode。


Wrap Mode:Texture.wrapMode 循环模式

Filter Mode:UnityShader开发之纹理 - Unity中的图像插值 Point、Bilinear、Trilinear


接下来再来看下原素材,右侧是有几个透明像素的,当然,不是说一定是有透明像素,只要是左边第一个像素和右边第一个像素颜色不一致都会出现这种情况,只是明显不明显的差别。

现在我们慢慢来分析产生这个结果的原因,大家注意一下我上面那两个参数选择的值:

        Wrap Mode: Repeat 当需要渲染的尺寸大于实际的 UI 尺寸时,多出来的部分会从左上的第一个像素依次渲染一遍,当需要渲染的宽为原来的两倍时,渲染出来的图片应该是两张图片并排;

        Filter Mode: Bilinear 在渲染一个像素点位时,系统是从相邻的4个点位进行插值运算的,而不是等于原来这个点位上对应的颜色值,这样处理会使得图片在一些曲线上面看起来更加自然,但是也相应的会模糊一些。那么问题来了,既然是从相邻的4个点位取值,最左边和最右边都只有一侧有数据,另一侧的两个数据怎么取?把两边的尺寸各加一个像素,问题不就解决了么。既然要加一个像素,那这个像素又是怎么赋值?Look Wrap Mode。所以我们当前这种模式下最右边的那个像素取的值其实是那个像素左上、左下、右上、右下(到最左边那一列取值)这4个点的插值,而当前图片的最左边是空像素,所以最右边那一列像素要比实际的淡很多;

好了,原理已经说完了,怎么处理好这个问题呢?答案有两种:

一、将 WrapMode 设置为 Clamp,这样,最初(后)那一列边上拓展出来的像素也就是当前像素本身了,这样的出来的值也更贴近原来的效果;

二、将 Filter Mode 设置为 Point(Trilinear主要处理的3D场景UI时的优化方案,原理同Bilinear,勾选了 MipMap 后才能生效,不在 2DUI 的讨论范围),但是这个模式,在一些曲线比较明显的地方,块状化很明显。


别以为知道了上面的解决方案就能解决所有问题了,有的是坑让你跳 —— 和 UI 打交道怎么少的了图集,各种大大小小的图片打成一个图集,图片和图片之间总是存在透明像素,就算你将图片之间的透明像素设置为0,但相邻的图片的那一列像素基本不会是你想要的颜色值,这也就是说在图集里面通过设置图集图片的 WrapMode 这一方案基本是无效的,剩下的就只有设置 FilterMode 了,但是设置成 FilterMode 在不放大(缩小)原来的尺寸的情况下,或许能满足你想要的结果,但是你怎么能保证设置成 Point 后会不会对其他图片产生影响,特别是移动端,绝大多数的图片都要进行压缩处理,在被压缩过的图集上,你设置 FilterMode 为 Point,嘿嘿……

那图集里面怎么处理这种情况,反正我目前是没想到很好的解决办法,只能说能避免就避免吧。

猜你喜欢

转载自blog.csdn.net/CC_childe/article/details/102745632
今日推荐