Unity UGUI 自適應


  我們多少應該都遇到過,做好的游戲打包出來后,某些 UI 元素的位置全都亂了。出現這種情況是因為:在進行 UI 元素擺放的時候沒有考慮到在不同分辨率下,UI 元素的位置變動,沒有對它們進行針對性的修改和調整。

1、所謂的自適應

  a.保持相對位置不變

  比如將 UI 設計在屏幕的右上角,那么在各種的分辨率下都應該在右上角

  b.保持寬高比例不變

  由於分辨率有很多種,所以保持寬高等比例縮放是做不到的,要么是寬拉伸縮放的程度大一些,要么是高拉伸縮放的程度大一些

2、相對位置

  在 UGUI 中,可以通過設置 UI 的錨點來設置 UI 的相對位置。

3、縮放比例

  在 UGUI 中,可以通過設置 Canvas 下的 Canvas Scaler 來設置 UI 的縮放比例(Canvas 下的 Canvas 是用來處理 UI 遮擋關系的)

4、Canvas Scaler 組件

  UI Scaler Mode 一共有三個選項: Constant Pixel SizeScale With Screen SizeConstant Physical Size

  

  a.當 UI Scale Mode 為 Constant Pixel Size 時

UI 在任何分辨率下都不會進行縮放拉伸,只有通過改變 Scale Factor 才會進行縮拉,因此不推薦使用這種模式(而這種模式的優點就是你可以通過寫自適應算法來改變 Scale Factor 的值,代替 unity 的自適應算法)

  b.當 UI Scale Mode 為 Scale With Screen Size 時

相當於使用 unity 的自適應算法,此時 unity 會根據屏幕分辨率自動調節 Scale Factor 的值。一般要先選擇一種比較主流的分辨率(即比較多的機型都采用的分辨率)進行 UI 的設計,例如采用 1920x1080,在這里就是設置了 Reference Resolution 的值。

  c.當 UI Scale Mode 為 Constant Physical Size 時

無論屏幕大小和分辨率如何,UI 元素都保持相同的物理大小,因此這種模式也不適合做自適應。

5、屏幕匹配模式

  Screen Match Mode 有三種屏幕匹配模式:Match Width or HeightExpandShrink

  

  a.Match Width Or Height

當值為 0,即處於 Width 那端時,表示屏幕高度對於 UI 大小完全沒有任何影響,只有寬度會對 UI 大小產生影響。例如設置屏幕為 800*600,然后改變為800*300,屏幕高度變小了,但 UI 並沒有進行縮拉;同理當值為 1,即處於 Height 那端時,表示屏幕寬度對於 UI 大小完全沒有任何影響,只有高度會對 UI 大小產生影響。

  b.Expand

意思就是盡可能地使 UI 拉伸來適應屏幕。例如,設計了一個寬高為 200*100 的 Button,即寬高比為 2:1,放在 4:3 的屏幕內;然后把這個 Button 放在 16:9 的屏幕內,顯然,此時 Button 是不能進行等比例的縮放的,也就無法保持 2:1 的寬高比了。

  c.Shrink

  同理,也是盡可能地使 UI 進行縮放來適應屏幕。

6、一般設置

  各個 UI 元素選擇相應的錨點

  Canvas Scaler 選擇 Scale With Screen Size

  Screen Match Mode 選擇 Match Width Or Height,比例設為 1,也就是只和高度進行適配

  

 

 

***| 以上內容僅為學習參考、學習筆記使用 |***


免責聲明!

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



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