天天看點

(轉)Unity 3D手遊對不同分辨率螢幕的UI自适應

轉至:https://www.cnblogs.com/notorious/p/12932610.html

目前安卓手機的螢幕大小各異,沒有統一的标準,是以用Unity 3D制作的手遊需要做好對不同分辨率螢幕的UI自适應,否則就會出現UI大小不一和位置錯位等問題。

我們的項目在開發時的參照分辨率(Reference Resolution )設定的是主流的1920*1080,我們通過Unity提供的Canvas Scaler元件實作UI對不同分辨率螢幕的自适應。

1.将Canvas Scaler的UI Scale Mode屬性設定成Constant Pixel Size

(轉)Unity 3D手遊對不同分辨率螢幕的UI自适應

2.對Canvas下的子對象設定錨點

以下圖中Canvas的子對象Panel-Repository為例

(轉)Unity 3D手遊對不同分辨率螢幕的UI自适應

我們在inspector面闆中将Panel-Repository這一UI元件的錨點定在左下角,這樣Panel-Repository就相對于畫布canvas左下角不動,進而使該UI元件随螢幕調整時不會超出Canvas左下角

(轉)Unity 3D手遊對不同分辨率螢幕的UI自适應

設定好錨點之後可以看下UI在不同分辨率螢幕下的效果

1920*1080 (參照分辨率)下:

(轉)Unity 3D手遊對不同分辨率螢幕的UI自适應

2960*1440:

本項目中UI元件可按錨點可劃分成4部分,分别對應畫布canvas的四個角:

  • 以畫布左下角為錨點的兩個面闆和一個按鍵
  • 以畫布左上角為錨點的文本
  • 以畫布右上角為錨點的設定鍵
  • 以畫布右下角為錨點的面闆和兩個按鍵

可以看出各UI元件是相對于錨點不動的

(轉)Unity 3D手遊對不同分辨率螢幕的UI自适應

1560*720:

因為螢幕(canvas大小同螢幕大小相等)的高度從1080變為720,導緻部分UI元件超出了畫布範圍

但是可看出四部分相對于各自的錨點仍是不變的(錨點在左上角的text因為UI層級關系被遮擋,錨點在右上角的橙色按鍵并未超出canvas右上角)

(轉)Unity 3D手遊對不同分辨率螢幕的UI自适應

3.調節Canvas Scaler元件的Scale Factor數值

調節scale Factor有什麼效果呢?請看動圖:

(轉)Unity 3D手遊對不同分辨率螢幕的UI自适應

可見,Scale Factor可以幫助我們調整UI元件在canvas裡邊的顯示大小。在不同分辨率的螢幕下,可以編寫腳本,在場景初始化時按照目前分辨率的高度參照分辨率的高度目前分辨率的高度參照分辨率的高度設定scale Factor數值

(轉)Unity 3D手遊對不同分辨率螢幕的UI自适應

需要注意的是,Scale Factor其實并未改變UI各元件的size(inspector裡的width和height),而是調整了canvas的size。

在上述項目中,當螢幕大小是1560*720時,

  • 未加載遊戲場景以前,canvas預設等于螢幕大小,即1560*720;加載遊戲場景後,canvas大小變為1560scale Factor∗720scaleFactor1560scale Factor∗720scaleFactor = 2340 * 1080.
  • 此後Unity會自動将2340*1080的畫布映射到1560*720的螢幕上

    是以需要注意,在擷取UI元件在canvas裡邊的坐标時,需要将觸屏按壓或者滑鼠移動等事件擷取的螢幕坐标除以scale Factor,做一個簡單的映射。

至此,UI的自适應功能成功搞定。

U3D