Unity 3D手游對不同分辨率屏幕的UI自適應


目前安卓手機的屏幕大小各異,沒有統一的標准,因此用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的自適應功能成功搞定。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM