Unity NGUI UI 在iOS端的鋸齒、模糊、顆粒感問題

一般我們在Unity項目中,都是美術給到圖片,然后程序直接導入Unity,Android端給圖片設置為 RBGA Compressed ETC2 8bit,iOS端給圖片設置為 RBGA Compressed PVRTC 4bits,就可以解決大部分的圖片問題。但是,在相同的項目下,在iOS端的真機上就會發(fā)現(xiàn)UI出現(xiàn)明顯的鋸齒、模糊和顆粒感等問題,但Android的真機上一點都看不出來,即使是在Android真機和iOS真機的邏輯像素尺寸(關于像素密度、邏輯像素和我們常說的屏幕分辨率之間的關系,請看手機APP UI設計尺寸基礎知識相同的情況下。

首先,iOS端的上述情況主要是兩個問題:
1. UI 的邊緣鋸齒和模糊(其實UI如果邊緣出現(xiàn)鋸齒,UI的內(nèi)部也會有鋸齒,只是在邊緣的會比較明顯)
2. UI的顆粒感(如果UI中有較大面積的漸變,就會在iOS端的真機上看到UI中的顆粒)

然而解決上面的問題也主要是兩個方式:
1. 在Unity中,更改對圖片的導入設置(Import Setting)
2. 在UI的制作過程中,按照一定的規(guī)范,保證圖片的細節(jié)足夠清晰

UI 的邊緣鋸齒和模糊

一張測試截圖

上圖是一張測試UI鋸齒和模糊時的截圖。如果說大家沒有發(fā)現(xiàn)鋸齒和模糊的問題,那么請看下面的圖。

鋸齒問題
模糊問題

模糊問題的截圖可能體現(xiàn)的不是很明顯,不過這不是重點。

這個時候程序的第一反應就是,是不是我Unity中iOS端圖片的導入設置有問題。所以去改了Edit->Project settings->Quality,改 Anti Aliasing,改Texture Quality,當然不能說一點效果都沒有。只能說,沒找到核心問題。

而出現(xiàn)模糊、UI鋸齒感問題,第一應該找的是設計人員。出現(xiàn)這個情況是因為,設計人員給的圖片,本身細節(jié)的精細度不夠,所以出現(xiàn)模糊、UI鋸齒感的問題。要解決這個問題,就需要設計人員的規(guī)范化作圖了。下面我們來說具體的一般做法。有幾個關鍵點:

  1. UI必須在規(guī)定的尺寸下進行作圖。就拿iPhone6的UI來說,我們設計在制作UI的時候,就必須先在Photoshop里面建一個1334*750 72dpi的畫布,然后所有的UI都要在這個畫布下完成制作和導出。
  2. 在規(guī)定尺寸下作圖,如果不是這個畫布下制作的素材,使用的時候一定要非常小心的使用縮放,盡量做到不縮放。比如說,一個Button素材,拖放到規(guī)定尺寸的畫布下,在畫布中的顯示是比需要的尺寸小一些的,然后你把這個素材放大以達到需要的尺寸。那么這個Button導出給項目使用的時候,iOS真機上就會出現(xiàn)模糊和鋸齒。
  3. 設計人員必須清晰理解邏輯像素、顯示尺寸、分辨率、像素密度、次像素這幾個概念。理解了這些概念,就會明白為什么要在規(guī)定尺寸下制作圖片才能在手機上達到正確的效果,而不會出現(xiàn)UI過細和過糙的結果。這里我給出兩個參考文章:
    (1)怎樣去掉圖標模糊的虛邊,也就是次像素
    (2)邏輯像素、顯示尺寸、分辨率、像素密度
    當然這里的文章不全,其他請自行百度然后進行理解。

下圖是修復后的效果:

左為修復后,右為修復前

UI的顆粒感

在游戲UI中,總是會出現(xiàn)很多的帶陰影的UI。陰影區(qū)域不大的時候,一般是看不出顆粒感的問題。但是一旦出現(xiàn)大面積的陰影或者漸變,就會發(fā)現(xiàn)明顯的顆粒感。如下圖:

上面的黑條是正常的PVRTC 4bits設置,下面的黑條是測試的 RGBA 16bit 設置的效果

上圖的第一個黑條是可以看出明顯的顆粒的,如果看不清楚,我給大家放大一下:

顆粒感在真機上會看的非常明顯

即使設計人員按照上文的規(guī)范,給出了正確的UI圖片,顆粒感這個問題也還是會出現(xiàn),因為這個是Unity對于圖片打包壓縮的問題。簡單的說,就是設置的問題。

下面給大家簡單說一下Unity 中常見的圖片導入設置:

PVRTC: 不失真壓縮率最高的壓縮格式。特別的TBDR架構,不渲染被遮擋的部分,有效節(jié)省計算資源和帶寬。紋理壓縮在許多設備上面都支持,支持每個像素2位或者4位的紋理,包含或者不包含alpha通道都可以

ETC2:補全了ETC1(大部分移動GPU都會支持的紋理標準。不支持Alpha通道。)不支持的Alpha通道,支持更高質量的RGBA(RGB+Alpha)壓縮。

ASTC: 由于ETC、PVRTC等格式均為有損壓縮,因此,當紋理色差范圍跨度較大時,均不可避免地造成不同程度的“階梯”狀的色階問題或其他問題。而ASTC可以解決一些問題。ASTC 在 iOS 的高端機上是被支持的,因此理論上在 Editor 下不會強制把 ASTC 轉為 RGBA32,建議嘗試設置為 ASTC 后打包,從 Editor.log 中或者直接從包體大小上可以看出是否確實使用了 ASTC。ASTC又被詳細的區(qū)分為 4x4 block、5x5 block.....12x12 block。但使用 ASTC 的話,雖然打包時比較小,但是在普通機型上會被處理成 RGBA32,導致過大的內(nèi)存開銷。

解決iOS端顆粒感問題的關鍵,就是改成ASTC格式

下面上圖:

最后一個黑條便是改成ASTC的效果

可以說,改成ASTC后,可以很完美的解決顆粒感的問題。

最后,iOS端一般的UI問題,都可以很好的解決了。

最后編輯于
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 227,967評論 6 531
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 98,273評論 3 415
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 175,870評論 0 373
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經(jīng)常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 62,742評論 1 309
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 71,527評論 6 407
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 55,010評論 1 322
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,108評論 3 440
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,250評論 0 288
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 48,769評論 1 333
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 40,656評論 3 354
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 42,853評論 1 369
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,371評論 5 358
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發(fā)生泄漏。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 44,103評論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,472評論 0 26
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,717評論 1 281
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,487評論 3 390
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 47,815評論 2 372

推薦閱讀更多精彩內(nèi)容