UI開發核心問題-UI隨屏幕自適應


屏幕分辨率對UI適配的影響

  一般來說,UIRoot都會選擇FixSize的縮放模式,這樣可以讓UI隨着分辨率而自動縮放,保持和屏幕相對的大小比例不變,讓UI整體看上去不會有變大變小的奇怪現象。但是,還有另一個真正嚴重的問題:不同屏幕的寬高比不一樣。

  在Unity中,不同屏幕的寬高比,一般都會以高度為基准而拉伸寬度。

  切換屏幕比例模式的方法為在Game視圖中的屏幕比例菜單,FreeAspect為不限長寬比,可以在其中選擇想要的長寬比。

  如果屏幕比例菜單中沒有想要的屏幕比例,可以單擊菜單最底部那個小較好按鈕,會彈出一個讓自定義一個新的屏幕比例模式的界面,Label選項中,可以輸入一個名稱來為這個自定義的屏幕比例命名。在Type中可以選擇FixedResolution和Aspect Ratio兩個選項,如果選擇FixedResolution,可以在下面的Width&Height中輸入分辨率的寬和高的具體像素;如果選擇Aspect Ratio,可以在下面的Width&Height中輸入分辨率的寬高比。設定好之后單擊OK按鈕,即可保存這個自定義的屏幕分辨率模式。

  因為NGUI的UIRoot具備FixSize模式,所以,一般在進行UI隨屏幕自適應時,主要着重解決的是屏幕寬高比發生變化之后的自適應。

 

主流設備的屏幕分辨率

  不論是PC設備還是移動設備,屏幕分辨率一般處於4:3到16:9之間,一般來說,只需要考慮這兩個值作為極限值即可。

 

自適應核心組件Anchor的使用

  所謂Anchor,即為錨點,它的工作原理是它會自動地綁定攝像機的某一個點作為錨點,錨點一共有上左、上、上右、左、中、右、左下、下、右下9個點可以設定。當相機變動時,Anchor組件所在的物體位置也會跟隨相機的變動而變動,並始終處於相機邊界的錨點位置。

  Anchor的創建方式,在Unity頂部NGUI菜單中選擇Create->Anchor即可。

  Anchor組件的設置:

    UICamera選項自動鎖定了該Anchor所在的UI的攝像機,它將會綁定這個攝像機邊緣上的某一個點作為錨點。Container即為包含的物體,一般情況下無需設置,因為將物體放置於Anchor的子物體中,就可以利用“子物體跟隨父物體”實現跟隨Anchor的錨點。

    Side一項為核心項,選擇該Anchor的腦電,一共9個點,分別對應相機邊緣的上左、上、上右、左、中、右、左下、下、右下。

    RunOnlyOnce意為執行一次,即只在開始的時候進行一次適配,默認為勾選上,一把把不需要去修改它。

    RelativeOffset,這是Anchor的相對位置偏移,百分比形式的。

    PixelOffset,像素偏移,Anchor會相對於相機邊緣上的錨點以像素為單位進行偏移。

 

使用Anchor的注意事項

  (1)在設定了Anchor的Side錨點之后,Anchor會自動跑到響應的錨點位置上去,不需要手動拖動Anchor。

  (2)不論是3D UI還是2D UI,Anchor的用法是一模一樣的,不要手動拖動Anchor的位置。

  (3)一般情況下,盡量不要去設置Anchor的RelativeOffset和PixelOffset,就讓Anchor保持錨點原位置,然后將UI控件放到Anchor下作為子物體,再去調整UI控件的位置。

  (4)Anchor物體身上,盡量保證只有Anchor一個組件,以便於管理維護。

  (5)一套UI體系中,可以有無數多個Anchor(例如有5個Anchor都定位於左上角是被允許的),但是,盡量確保Anchor的父物體中沒有Anchor,也就是盡量避免Anchor中套Anchor。Anchor的父物體可以是UI Root,也可以是一個空物體。

  (6)不要濫用Anchor,如果相機邊緣的9個錨點中的每個點都有多個Anchor來定位,那么一定是UI結構的實際有問題了。

 

正式開發UI之前必須明確的幾個問題

  (1)針對的是什么樣的平台。

  (2)游戲的設備屏幕寬高比最大、最小是幾比幾。

  (3)游戲開發時的標准分辨率是多少像素,這將關系到美術制作圖片資源的標准。

  (4)檢查UI設計草圖,和策划人員明確哪些UI會在屏幕寬高比變化時自適應位置。

  (5)明確需要自適應位置的UI分別屬於哪一個錨點,並設計一個最佳的UI結構。


免責聲明!

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



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