一般我們在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ī)范化作圖了。下面我們來說具體的一般做法。有幾個關鍵點:
- UI必須在規(guī)定的尺寸下進行作圖。就拿iPhone6的UI來說,我們設計在制作UI的時候,就必須先在Photoshop里面建一個1334*750 72dpi的畫布,然后所有的UI都要在這個畫布下完成制作和導出。
- 在規(guī)定尺寸下作圖,如果不是這個畫布下制作的素材,使用的時候一定要非常小心的使用縮放,盡量做到不縮放。比如說,一個Button素材,拖放到規(guī)定尺寸的畫布下,在畫布中的顯示是比需要的尺寸小一些的,然后你把這個素材放大以達到需要的尺寸。那么這個Button導出給項目使用的時候,iOS真機上就會出現(xiàn)模糊和鋸齒。
- 設計人員必須清晰理解邏輯像素、顯示尺寸、分辨率、像素密度、次像素這幾個概念。理解了這些概念,就會明白為什么要在規(guī)定尺寸下制作圖片才能在手機上達到正確的效果,而不會出現(xiàn)UI過細和過糙的結果。這里我給出兩個參考文章:
(1)怎樣去掉圖標模糊的虛邊,也就是次像素
(2)邏輯像素、顯示尺寸、分辨率、像素密度
當然這里的文章不全,其他請自行百度然后進行理解。
下圖是修復后的效果:
UI的顆粒感
在游戲UI中,總是會出現(xiàn)很多的帶陰影的UI。陰影區(qū)域不大的時候,一般是看不出顆粒感的問題。但是一旦出現(xiàn)大面積的陰影或者漸變,就會發(fā)現(xiàn)明顯的顆粒感。如下圖:
上圖的第一個黑條是可以看出明顯的顆粒的,如果看不清楚,我給大家放大一下:
即使設計人員按照上文的規(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后,可以很完美的解決顆粒感的問題。
最后,iOS端一般的UI問題,都可以很好的解決了。