[Unity3D插件]NGUI之UIRoot屏幕分辨率自適應

NGUI在Unity3D遊戲開發中很是經常使用,而NGUI對於每個UI場景,都是以一個UIRoot爲UI遊戲對象樹的根的,那麼這個UIRoot是起什麼做用的呢?android

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

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

而正是這4個屬性,將影響整個UI場景中總體的縮放比例,當設置好這4個屬性以後,UIRoot遊戲對象的相對縮放值(LocalScale)將會生成而且不能被直接修改(NGUI中不少屬性都是不能直接被修改的,這種控制是在UIRoot腳本中,經過設置[ExecuteInEditMode]作到的,其相對縮放值是根據UIRoot的4個屬性計算出來的),那麼這4個屬性分別是什麼含義呢?ide

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


1.Scaling Style (縮放類型)

這是一個簡單的枚舉變量,包括三個枚舉值.net

[csharp]  view plain copy print ?
  1. public enum Scaling  
  2.     {  
  3.         PixelPerfect,  
  4.         FixedSize,  
  5.         FixedSizeOnMobiles,  
  6.     }  
(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。(這就是我前面吐槽的緣由)orm


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樹的進行「等比」縮放(寬度的縮放比也是此比例值),這樣,咱們就能夠作一套資源,在不一樣尺寸的分辨率最好的「不變形」的適配了blog

(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組件的大小作限制!

相關文章
相關標籤/搜索