[UGUI]深入理解Canvas Scaler

Canvas Scaler:

這是一個理解起來相當繁瑣複雜的一個組件,但又是一個至關重要的組件,不徹底瞭解它,可以說對UGUI的佈局和所謂的“自適應”就沒有一個完整的認識。

Canvas Scale指的是UI Canvas整體的縮放比例,這個值在Canvas 的Render Mode爲 Screen Space – Overlay 的情況下默認爲1,在 Canvas 的 Render Mode 爲 Screen Space – Camera 的情況下則不一定爲1,會受到渲染UI的攝像機 參數影響(如果爲Perspective 相機,會受到 Field Of View影響,如果是 Orthographic相機,會受到 Size影響)。

Canvas Scaler存在的意義:

爲了適應不同的分辨率,我們可能會允許適當的UI整體性縮放,外加一些儘可能少的佈局微調。 這樣就能達到一個比較理想的效果。如果沒有這個組件,Canvas的Scale默認情況下永遠固定不變,那麼分辨率變化時,只能單純依靠錨點信息去調整UI,會對整體佈局產生較大的影響,不能夠達到“自適應”的目的。

什麼是Pixelperfect?

PixelPerfect(完美像素)指的是一個UI素材本身的像素對應屏幕上一個像素的情況,這種情況下UI素材映射到屏幕上時沒有任何拉伸和壓縮,這種情況下UI顯示效果非常清晰完美。

Ui Scale Mode–Scale With Screen Size

根據屏幕尺寸來調整UI的縮放值

Reference Resolution:

參考分辨率,即一開始製作時選定的屏幕分辨率,後面的選項參數都是根據它來計算的。

Screen Match Mode—Match Width Or Height

Match

Match是一個滑條,拉在最左時是Width ,最右時是Height,中間則是按比例混合。
當處於最左邊時,屏幕高度對於UI大小完全沒有任何影響,只有寬度會對UI大小產生影響。假設寬度爲Reference Resolution寬度的x倍,則UI整體縮放爲Reference Resolution狀態下的x倍。也就是說只有寬度等於Reference Resolution寬度時,才能做到pixel perfect,否則像素就會有拉伸

  • 當處於最右邊時,與上述情況正好相反,決定整體縮放值的是高度,而寬度則沒有任何影響
  • 處於中間某處時,對上述兩者的影響進行權重加成

Screen Match Mode—Expand

當屏幕分辨率大於參考分辨率時,選擇變化較小的一個方向(橫向還是縱向),作爲放大Canvas Scale的標準,另一方向上的變化則是在整體縮放以後再進行補償性的變化。此舉旨在減少擴大分辨率時由於非等比擴大而對UI整體佈局造成影響。適合製作較小標準尺寸,擴充到較大屏幕。

例如:
Reference Resolution爲800*600(假設此時Canvas Scale爲(1,1,1))。
如果實際分辨率爲800*800,那麼Canvas Scale還保持爲(1,1,1)因爲寬度沒有發生變化,只是單純的高度增加了200,所以勢必對佈局造成一定得影響。
1000*600的情況也是一樣,Canvas Scale沒有變化,只是單純寬度增加了200。
但如果實際分辨率變爲1000*800,那麼Canvas Scale就變成(1.25,1.25,1.25)。因爲寬度是參考分辨率寬度的1.25倍,高度是1.33倍,那麼取較小的1.25。 這個1.25倍的意義是:整體Canvas渲染放大1.25倍,橫向或縱向的變化超過了1.25倍,則靠拉伸Canvas來變化,此時因爲這部分變化,可能會對佈局產生一些相對較小的影響,例如相對位置、某些元素的長寬比。

Screen Match Mode—Shrink

和Expand類似,但是更適合於縮小的情形。它會在屏幕尺寸縮小時,通過縮小CanvasScale儘量減少由於非等比縮小對佈局產生的影響。按照影響較小的一個方向縮小的比例去縮小CanvasScale,然後再通過變形調整另外一個方向。

Ui Scale Mode—Constant Pixel Size

固定的UI縮放值

Scale Factor

直接設定UI的Canvas Scale,例如,設定爲2,則Canvas Scale爲標準狀態下的2倍

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章