1. 程式人生 > >UGUI-螢幕自適應

UGUI-螢幕自適應

UGUI的螢幕自適應問題,其實是就是畫布的設定,要根據遊戲是橫屏還是豎屏來進行相應的設定。

我們先來看一下Canvas的官方描述,這裡只看前幾句:

class in UnityEngine.UI

Inherits from:EventSystems.UIBehaviour

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.

翻譯一下,大概的意思就是Canvas這個類實在UnityEngine.UI這個名稱空間裡的,繼承自EventSystems下的UIBehaviour這個類,Canvas Scaler元件用於控制畫布中UI元素的整體比例和畫素密度。這種縮放會影響畫布下的所有內容,包括字型大小和影象邊框。到這裡,我想博主也不用說了,要想做好螢幕自適應,畫布遊戲物體上的Canvas Scaler這個元件是關鍵。下面通過一個例子來說明。

1.開啟Unity,新建一個空工程,在場景中,新建一些“Image”,綠色的“Image”放置在Canvas畫布右上角且錨點也位於Canvas畫布右上角,其他圖片如圖放置,且錨點在Canvas畫布中心。

2.設定Canvas的“Canvas Scaler”的“UI Scale Mode”為“Constant Pixel Size”,切到Game檢視,檢視比例設定為“4:3”,此時UI正常顯示,但是當Game檢視螢幕變小,由於UI Scale Mode”為“Constant Pixel Size”,所以,最後UI超出了螢幕。

3.把Canvas的“Canvas Scaler”的“UI Scale Mode”設定為“Scale With Screen Size”,其他預設設定,調整螢幕大小,我們發現,當寬度大於高度時,UI會被完美的縮放,但是,如果當高度大於寬度時,我們就會發現一些Image已經超出螢幕外了。

4.把Canvas的“Canvas Scaler”的“UI Scale Mode”設定為“Scale With Screen Size”,Match的值設為1,我們又發現與上面的情況剛好相反,當高度大於寬度時,UI會被完美的縮放,但是,如果當寬度大於高度時,Image又超出螢幕外了。

其實,通過上面的實驗,讀者應該能夠想到如何解決了,在畫布上掛載一個元件專門用來控制畫布的Match,在Awake中判斷一下Screen.Width和Screen.Height,如果前者大,就把Match設為,否則就設為1.這樣自適應問題大概就解決了,剩下的就是調整UI的錨點來進一步完善細節了。總結一下:
1.當開發應用在移動端時,“Canvas Scaler”的“UI Scale Mode”為“Scale With Screen Size”,以便自適應移動端螢幕

2.最好事先知道應用到移動端螢幕的解析度,或螢幕比例,以對應合適設定“Canvas Scaler”的“Reference Resolution”

3.當應用是橫屏遊戲時,把“Canvas Scaler”的“Match”改為“0”,以“Width”為基準縮放UI適應螢幕;當應用是豎屏遊戲時,把“Canvas Scaler”的“Match”改為“1”,以“Height”為基準縮放UI適應螢幕