今天舶主翻閱了大神們的文章和書籍學習一下UGUI牛逼的自適應部分。。。兩個字 ,強大。。。。。
先來看一下Unity官方給Canvas Scaler的定義"The Canvas Scaler component is used for controlling the overall scale and pixel density of UI elements in the Canvas. This scaling affects everything under the Canvas, including font sizes and image borders."。畫布定標器用於畫布上UI元素的整體縮放比例和像素密度。該縮放比例會影響畫布中的所有東西,包括字體大小和圖像邊界。
為了適應不同的分辨率,我們可能會允許適當的UI整體性的縮放,外加一些盡可能少的布局微調。這樣就能達到一個比較理想的效果。Unity中 Canvas Scale就是負責該功能的組件。
下面我們就打開這個組件看一看,Canvas Scaler的 UI Scale Mode(UI縮放模式)有三個值:constant pixel size、scale with screen size 和constant physical size。注意分清楚UI元素的像素和畫布像素是完全不一樣的。
首先就應用給大家列舉一下:Canvas Scale 模式為 constant pixel size 這個模式一般用於需要整體縮放畫布的對象(通過Scale Factor)。constant physical size 和前面這個類似也可以縮放(通過RectTransform)。scale with screen size這個模式比較常用是我們開發自適應一般用的模式。往后看重點闡述。

Constant Pxiel Size 不變像素大小

Scale Factor:畫布的縮放比例。默認況下為1,表示正常大小。
Reference Pixels Per Unit : 每單位代表的像素量
一般用這個是來縮放圖片的,用這個Factor(因子)值我可以一張圖實現很多的大小還不失真,這種模式保證了恆定像素的來縮放的。這個對美術來說是個好組建,不用每個大小的都做一張,只要調好Factor因子值就好了。
Scale With Screen Size: 根據屏幕大小定標(根據載體的分辨率來布局,會隨屏幕分辨率的變化而變化。)


Reference Resolution(參考分辨率):參照當前UI布局所依據的分辨率,隨屏幕分辨率的變化而變化。//游戲運行的最理想分辨率,就是你做游戲時采用的分辨率
Screen Match Mode(屏幕匹配模式): 參考寬或者高或者兩者來布局畫布。(width和height設置權重來調節影響比例模式)
一般來說用的都是寬的情況多一點。當下的設備都是寬度變化較大,高度一般都沒有什么變化。我們玩的游戲一般情況下要么是全屏,要么是左右留白。上下留白的太少了(橫屏玩游戲)。說到這里就要強調一下了自適應並不是一定能適應成全屏的他是跟設備有關系的,它只會找一個最合適的匹配模式來顯示。。。。
這個工作的流程是Screen Match這部分Unity內置的代碼和設備屏幕原始信息先匹配得到我們所需要的處理過的屏幕信息。然后Reference Resolution工作根據我們處理過的屏幕信息進行匹配。
通過下面一個實例來加深認識:
開始前提一下大家首先要理解應該是上一篇--------什么是畫布和下一篇---------RectTransform組件,然后再去理解什么是自適應,怎么去做自適應。上來一下是看不懂的。尤其是不理解RectTransform的同學。。。。
首先我游戲的理想分辨率為1920*1080,開碼:
創建一個Canvas然后調節Canvas的Canvas Scale組件中的UI Scale Mode 屬性:改為, Scale With Screen Size。Reference Resolution(參考分辨率):改為:1920*1080
··
創建一個image組件,然后將它移動到畫布的邊緣。

調節image的Anchors屬性為父物體的左上角(即為anchorMin=(0,1),anchorMax=(0,1))。修改image的pivot點(UI元素中心點)的位置為左上角(即為pivot=(0,1))
現在來說一下為什么要這樣設置,首先·我的image是放在了UI上畫布的左上角,anchors的意義在於以指定點為參考點,對應邊到對應點的距離按比例不會發生改變
我要保證我的image始終在畫布里面如果以中間為參考點那么就有可能被撐出畫布。這個選點是一個習慣多做幾次就知道怎么選了,我這里選擇了相對較優的左上點。
再在image下面創建一個text, text 進行同樣的操作Anchors屬性為父物體的左上角(即為anchorMin=(0,1),anchorMax=(0,1))。修改image的pivot點(UI元素中心點)的位置為左上角(即為pivot=(0,1))
看下效果
1920*1080(正常)

800*600(自適應效果)

Contant Physical Size 不變物理尺寸

和Constant Pixel Size類似,但是只能通過RectTransform來改變大小。

單位像素,DPI這類的舶主沒有搞懂,有知道到兄弟指導一下,總感覺這個組件還差點火候。
