有一種美，叫對稱美。對稱隨處可見，從皇城廟宇到民宅軒榭，對稱之美，美在莊重。項目中，我們常常會遇到一些對稱的圖片，但是為了節約資源，往往我們會選擇將其分成兩半，只取其一，另一半直接在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，嘿嘿……

那圖集里面怎么處理這種情況，反正我目前是沒想到很好的解決辦法，只能說能避免就避免吧。

總結

以上是生活随笔為你收集整理的Unity 图片拼接中间有空隙问题详解的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。