螢幕自適應/關於Canvas/Canvas Scaler/Graphic Raycaster元件詳解
利用Canvas、Canvas Scaler、Graphic Raycaster元件完成螢幕自適應:
剛做完一款小遊戲,螢幕適配時,涉及安卓機各種螢幕比例、ipad、iPhoneX等較多尺寸型號的螢幕,開始出了一些問題,後來對Canvas的幾個元件仔細研究了一番,利用Canvas Scaler完美解決了適配問題。
一、 首先是Canvas元件:
Render Mode即渲染模式有三種
1. Screen Space-Overlay模式:
Canvas將置於螢幕最上層,自動填充螢幕,不會被其他模式的Canvas或2D/3D物體遮擋。
1.1 Pixel Pefect:完美畫素,邊緣更加清晰。
1.2 Sort Order:渲染順序,多個Canvas時可以調整其顯示順序
1.3 Target Display:目標顯示器,Unity多開時選擇顯示器用
2. Screen Space-Camera模式:
Canvas將置於相機前方,此時在Canvas和相機中間的2D/3D物體將顯示在UI上面,利用這一點,可以實現在UI介面展示3D模型,UI介面顯示粒子特效等功能,非常實用~
2.1 Pixel Pefect:同上。
2.2 Render Camera:對應的渲染相機,也就是該Canvas顯示在哪個Camera前面,不同的Camera渲染順序可能不同。
2.3 Plane Distance:Canvas與Camera的距離。
2.4 Sorting Layer:渲染層級,影響渲染順序。
2.5 Order in Layer:同一渲染層級下的渲染順序。
3. World Space模式:
Canvas將作為一個遊戲物件顯示在3D場景內,可以通過修改Rect Transform的相關屬性來調整顯示。
3.1 Event Camera:接收UI事件的Camera,Click、Drag等事件。
3.2 Sorting Layer:同上。
3.3 Order in Layer:同上。
4. Canvas渲染優先順序:
Sort Order -> Sorting Layer -> Order in Layer
二、 然後是Canvas Scaler元件:
Canvas Scaler也是螢幕適配的主要方式,一般通過該元件就可以完成適配,如果有需求,還可以通過Screen.height和Screen.width獲取螢幕長寬,然後程式碼控制UI位置及縮放。
Canvas Scaler只用於Canvas的Screen Space兩種模式,World Space模式Canvas作為一個3D物體,不涉及適配問題。
UI Scale Mode即縮放模式,有三種:
1. Constant Pixel Size模式:
固定畫素大小,不論螢幕解析度尺寸大小如何變化,畫素保持原有大小不變。效果如下
關於Canvas/Canvas Scaler/Graphic Raycaster元件詳解_017 1.1 Scale Factor:縮放倍數。
1.2 Reference Pixel Per Unit:Unity的1個單位代表多少個畫素
同一個介面,Scale Factor的縮放顯示:
2. Scale With Screen Size模式:螢幕自適應常用方式 !!!
2.1 Reference Resolution:參考解析度,進行螢幕適配,自動縮放UI大小時,將以此作為參考。
2.2 Screen Match Mode:
首先,需要設定Panel大小與Reference Resolution一致,錨點設在中心。
螢幕匹配方式,分為三種:
2.2.1 Match Width Or Heigh:保持寬高比不變,通過設定Match值,對寬高進行縮放。如果Match值為0,優先縮放寬度與螢幕寬度一致,高度或超出螢幕或在螢幕內;如果Match值為1,則優先縮放高度。
2.2.2 Expand:保持寬高比不變,優先縮放任一寬度或高度與螢幕一致,另外一個方向在螢幕內,即Canvas包含在螢幕內。
2.2.3 Shrink:保持寬高比不變,優先縮放任一寬度或高度與螢幕一致,另外一個方向在螢幕外,即螢幕包含在Canvas內。
2.3 Reference Pixel Per Unit:同上
3. Constant Physical Size模式:
固定物理尺寸,這個模式很少用到。
3.1 Physical Unit:物理單位,點、毫米、釐米等。
3.2 Fallback Screen DPI:物理單位的畫素密度。
3.3 Default Sprite DPI:預設Sprite的畫素密度。
3.4 Reference Pixel Per Unit:同上。
三、 最後是Graphic Raycaster元件:
關於UI射線檢測的設定。
1. Ignore Reversed Graphics:是否忽略反轉圖片的檢測。
2. Blocking Objects:在Canvas前面,可以遮擋射線檢測的物體。
3. Blocking Mask:遮擋射線檢測的層級。