解決NGUI中sprite的邊緣會出現黑線的問題

2021-09-23 23:25:30 字數 1775 閱讀 3714

新的專案中大量使用了將sprite映象拼接的方式來做底板,結果同事發現有的時候拼的時候中間會出現乙個莫名的黑縫,如圖:

看了下貼圖沒啥問題,也不是因為貼圖壓縮的問題,但是這條黑縫總是存在,然後想到這條黑縫很可能是採用uv的時候將uv採到了sprite和其他圖的接縫處,然後在跟著看了下ngui計算uisprite的uv的**,發現ngui的計算確實存在著嚴重的問題,ngui是這樣計算乙個sprite四個頂點的uv的

static public rect converttotexcoords (rect rect, int width, int height)

return final;

}這段**的計算方式完全是錯誤的,其中width和height是atals大圖的尺寸,rect是sprite在atals大圖上的區域,可能作者對uv取樣的計算尤其是uv座標的區間並不是十分詳細的了解,當然這個很多人可能都不全然了熟於心。 

這裡是因為有幾個概念沒有明確:uv的座標範圍,texture的座標範圍,取樣的概念。

首先uv的座標範圍是這樣的

texel的uv以左上角為0 ,右下角為1,也就是說第乙個畫素**位置的uv是0.17 0.17

再看一張texute的座標範圍

可以看出他們的座標範圍是不一樣的,這樣在取樣貼圖顏色的時候,會出現下面的情況

某些畫素可能恰好採到邊緣處,這樣就會根據取樣策略進行插值,點取樣就直接去最近的畫素,線性取樣就取上下左右四個整數值加權平均。

回頭看下ngui的演算法,假設乙個atlas的大圖如下,左上角兩個畫素是乙個sprite

當我們使用左上角的這個sprite的時候,按照ngui的演算法,這個矩形的uv應該是

這樣的話,對於我們的左上角和右下角的那兩個頂點,當他們取樣的時候,變落入了邊界上,由於線性取樣,就會在右邊看到乙個橘色和白色的混合平均色,即一條雜邊。

如何解決?我們需要線性取樣來保證中間畫素的質量,但是對於邊緣我們需要保證他們的uv嚴格落入sprite的區域而不能落入邊界。

所以我修改了ngui這段計算uv的錯誤**,修改後,這個sprite四角的uv成為下圖,原理是把原先uv落入的區間(藍色)縮短為新的區間(紅色)。具體修改的**因為專案**的保密我就不貼了,但是具體的原理都在這裡了。

看一下修改後的拼接效果,天衣無縫~~

其實這個問題早在上乙個專案《暗黑血統》裡面就遇到過多次,只是那時比較忙沒細追究沒去眼睛ngui**,這次決定看了一下,其實就是個貼圖取樣的小問題,看來遇到問題還是要刨根問底才行

ngui中scrollview的使用

uiscrollview製作滑動列表,可橫向,豎直展示一些列表在固定可視範圍內 uiscrollview只是乙個可滑動的ui元件 如果需要製作複雜的可視區域ui需要配合使用uipanel與uigrid 這樣更方便ui的展示 a.建立乙個2d ui root,在ngui選單上建立乙個scroll vi...

遊戲開發中 Sprite 和 Image 的區別

在開發中,有的時候會遇到一些奇奇怪怪的問題,比如說在3d遊戲開發中需要製作乙個 主角血條或者 敵人血條的時候,一般來說有兩種方式,乙個是 使用 canvas 製作一張 image 進行渲染,乙個是使用 spriterenderer 進行渲染,如果使用 image進行渲染的話每乙個敵人都得引用乙個 i...

關於NGUI中Label物件的獲取

當父控制項下由許多小空間組合而成的時候,這時我們要去獲取其中例如uilabel物件或是uibutton物件,當你要獲取的子控制項的數量只有1個的時候,可以使用lable getcomponentinchildren 這個函式是獲取所有uilabel型別子控制項中deepth最小的子控制項。這時候就遇...