1. 程式人生 > >Unity3D開發(一):NGUI之UIRoot螢幕解析度自適應

Unity3D開發(一):NGUI之UIRoot螢幕解析度自適應

NGUI在Unity3D遊戲開發中非常常用,而NGUI對於每一個UI場景,都是以一個UIRoot為UI遊戲物件樹的根的,那麼這個UIRoot是起什麼作用的呢?

先簡單看一下UIRoot中的基本屬性

UIRoot遊戲物件的屬性只有4個,分別是縮放規則,手動高度,最小高度和最大高度

而正是這4個屬性,將影響整個UI場景中整體的縮放比例,當設定好這4個屬性之後,UIRoot遊戲物件的相對縮放值(LocalScale)將會生成並且不能被直接修改(NGUI中很多屬性都是不能直接被修改的,這種控制是在UIRoot指令碼中,通過設定[ExecuteInEditMode]做到的,其相對縮放值是根據UIRoot的4個屬性計算出來的),那麼這4個屬性分別是什麼含義呢?

(吐槽一下,也許這裡的使用者體驗並不足夠友好,因為Manual Height和Minimum Height, Maximum Height並不會同時起作用,如果能做到在選擇Scaling Style時動態的切換,使用者也許能更清楚它們之間的關係)

1.Scaling Style (縮放型別)

這是一個簡單的列舉變數,包括三個列舉值

public enum Scaling
	{
		PixelPerfect,
		FixedSize,
		FixedSizeOnMobiles,
	}
(FixedSize和FixedSizeOnMobiles類似,並且後者只添加了對ios和android平臺的判斷,所以前者可以替代後者使用)

這裡只討論PixelPerfect和FixedSize的區別,兩者都是針對於所有在此UIRoot之下的UI元件而言的,也可以認為是在此UIRoot下,整個遊戲螢幕的尺寸的縮放型別!

2.Manual Height和Minimum Height, Maximum Height (手動高度和最小高度,最大高度)

Manual Height和Minimum Height, Maximum Height不會同時對此UIRoot起作用,當選擇Scaling Style為PixelPerfect時,我們需要設定Minimum Height, Maximum Height;而當Scaling Style為FixedSize或FixedSizeOnMobiles時,我們需要設定Manual Height。(這就是我前面吐槽的原因)

3.使用

(1)PexelPerfect和Minimum Height, Maximum Height

這個組合主要用於我們期望所有的UI紋理都“儘量”不進行縮放,所謂“儘量”的程度,則是取決於Minimum Height和Maximum Height,Minimum Height表示當裝置分別率小於此設定值時,根據此設定值對UIRoot進行縮放;Maximum Height表示當裝置解析度大於此設定值時,根據此設定值對UIRoot進行縮放(UIRoot是UI遊戲物件樹的根,修改UIRoot的縮放,則會影響整棵UI樹的縮放)

(2)FixedSize和Manul Height

這個組合主要用於我們期望所有的UI紋理都進行“合適”的縮放,所謂“合適”縮放的原則,則是根據Manual Height設定值,當裝置解析度的高度值不同於此設定值時,則根據其比例(即Manual Height / Screen Height)對整棵UI樹的進行“等比”縮放(寬度的縮放比也是此比例值),這樣,我們就可以做一套資源,在不同尺寸的解析度最好的“不變形”的適配了

(3)交集

前面兩組在什麼情況下等同呢?

Manual Height == Minimum Height == Maximum Height 

推導過程,呵呵~~

具體可參考UIRoot中activeHeight屬性和GetPixelSizeAdjustment的計算過程

4.這也許並不夠

基於以上推到,當我們以1024x768為標準解析度做一套UI資源(也就是選擇FixedSize並且Manual Height=768),似乎可以滿足百分之90以上的機型了,而為什麼是1024x768呢?

既然我們已經容忍在除1024x768之外的其他裝置上進行等比縮放了,那為什麼不是960x640呢?

計算一下1024x768的寬高比=1.33,960x640的寬高比=1.5,這就是移動裝置的解析度比例的全部了嗎?

當然不是,iphone5的比例就要大於1.5,還有各種奇葩的android裝置呢,比如夏新的n828就是960x540,寬高比=1.78

那為什麼以1024x768為標準呢?

因為1.33的寬高比,當我們的1024x768的資源到960x640的裝置上時會有什麼現象?

根據Manual Height / Screen Height的比例可知,我們需要縮放768 / 640 = 1.2倍,假設是一張1024x768的紋理,高度縮放1.2倍變為了640,寬度也要相應縮放1.2倍變為853(保證等比縮放不變形),也就是說1024x768的資源放到960x640上反而兩邊有了黑邊,這是我們可以容忍的,我們可以做一個很大的背景或者拉伸,保證UI元件不變形即可,很多遊戲都是這麼做的,比如植物大戰殭屍在iphone5和ipad上看到的背景視野並不一樣大!

當放到夏新的機器上呢?

我們需要縮放768 / 540 = 1.4倍,寬度1024 / 1.4 = 731,這是可以的,只是看起來更怪一些,因為兩邊的黑邊相對比例更大了(960 - 731=229的黑邊區域)

而我表示android機器的解析度奇葩到只有想不到,沒有做不到的程度,也許寬高比1.7並不是終點,當遇到1.8之後,黑邊的相對比例會更大。。。

5.問題又來了

假設我們的遊戲型別更適合iphone手機玩,不太適合ipad,所以我希望能以960x640為標準做一套資源,可以嗎?

我只能說不太可以,因為你要在設計UI元件的大小做限制了,為什麼需要做限制?

假設我有一張紋理是960x640大小的,在iphone上鋪滿整屏,根據我們的設定(FixedSize和Manual Height=640),拿到1024x768的解析度上,高度640 / 768 = 0.83,為了保證等比縮放,寬度960 / 0.83 = 1156,不幸的事情發生了,1156 > 1024,這個UI元件寬度超過了螢幕的寬度,被裁剪了。。。這是我們不能容忍的,或許你可以說我們儘量不做這種尺寸的UI,OK,你可以對UI尺寸加限制,但是當面對android那些奇葩的解析度的時候,你會發現限制越來越大,這也許會讓美術和策劃瘋掉!

6.解決方案

當我們花上一些時間去觀察現在移動裝置的解析度時,雖然奇葩很多,但是還是有一些規律的,規律的在於寬高比而不在於具體尺寸,大體上劃分一下寬高比在1.3,1.5,1.7的範圍上的居多(基本是全部吧!)即便是再有1.2,1.8的比例也無妨。。。

NGUI為我們提供的方案只有以各種高度為衡量標準是不夠的,我們應該加上一種以寬度為衡量標準的縮放型別

而對於UI資源的標準,我們選取960x640,寬高比為1.5

這樣,當我們在相容大於1.5的尺寸的時候,使用NGUI的現有方案;當我們在相容小於1.5的尺寸的時候,使用以寬度為衡量標準

也就是說有一個類似Manual Width的屬性,當小於1.5時,我們使用Manual Width / Screen Width得出整棵UI樹的縮放比例!

這樣做的好處是“黑邊”區域不會太大,並且不需要對UI元件的大小做限制!

PS: 我表示以上言論對於“可以為適配解析度做無數套圖的資源土豪”而言可能是我想多了!