目前安卓手機的屏幕大小各異,沒有統一的標准,因此用Unity 3D制作的手游需要做好對不同分辨率屏幕的UI自適應,否則就會出現UI大小不一和位置錯位等問題。
我們的項目在開發時的參照分辨率(Reference Resolution )設置的是主流的1920*1080,我們通過Unity提供的Canvas Scaler組件實現UI對不同分辨率屏幕的自適應。
1.將Canvas Scaler的UI Scale Mode屬性設置成Constant Pixel Size
2.對Canvas下的子對象設定錨點
以下圖中Canvas的子對象Panel-Repository為例
我們在inspector面板中將Panel-Repository這一UI組件的錨點定在左下角,這樣Panel-Repository就相對於畫布canvas左下角不動,從而使該UI組件隨屏幕調整時不會超出Canvas左下角
設置好錨點之后可以看下UI在不同分辨率屏幕下的效果
1920*1080 (參照分辨率)下:
2960*1440:
本項目中UI組件可按錨點可划分成4部分,分別對應畫布canvas的四個角:
-
以畫布左下角為錨點的兩個面板和一個按鍵
-
以畫布左上角為錨點的文本
-
以畫布右上角為錨點的設置鍵
-
以畫布右下角為錨點的面板和兩個按鍵
可以看出各UI組件是相對於錨點不動的
1560*720:
因為屏幕(canvas大小同屏幕大小相等)的高度從1080變為720,導致部分UI組件超出了畫布范圍
但是可看出四部分相對於各自的錨點仍是不變的(錨點在左上角的text因為UI層級關系被遮擋,錨點在右上角的橙色按鍵並未超出canvas右上角)
3.調節Canvas Scaler組件的Scale Factor數值
調節scale Factor有什么效果呢?請看動圖:
可見,Scale Factor可以幫助我們調整UI組件在canvas里邊的顯示大小。在不同分辨率的屏幕下,可以編寫腳本,在場景初始化時按照\(\frac{當前分辨率的高度}{參照分辨率的高度}\)設置scale Factor數值
需要注意的是,Scale Factor其實並未改變UI各組件的size(inspector里的width和height),而是調整了canvas的size。
在上述項目中,當屏幕大小是1560*720時,
-
未加載游戲場景以前,canvas默認等於屏幕大小,即1560*720;加載游戲場景后,canvas大小變為\(\frac{1560}{scale\ Factor} * \frac{720}{scale Factor}\) = 2340 * 1080.
-
此后Unity會自動將2340*1080的畫布映射到1560*720的屏幕上
因此需要注意,在獲取UI組件在canvas里邊的坐標時,需要將觸屏按壓或者鼠標移動等事件獲取的屏幕坐標除以scale Factor,做一個簡單的映射。
至此,UI的自適應功能成功搞定。