Unity記錄-UGUI的屏幕自適應原理和應用

好久沒更新博客了，自從入了遊戲的坑，都還在學習階段，平時都是記錄在自己的筆記上，決定抽空都轉換成博客，都是一些基礎加上自己工作中遇到的情況，分享出來，給想入門的人一些參考吧。

UGUI的屏幕自適應，是通過Canvas Scaler來做的，根據屏幕的分辨率，計算出canvas的大小，同時計算ScaleXY,通過Size + Scale來控制Canvas的變換，UI作爲canvas的子物體，也會跟隨着一起變化；爲了保證UI的位置，需要在設計UI的時候，對角落，邊緣的UI做特殊的處理，利用錨點來保證UI與邊緣或角落的距離，錨點的概念就不多說了，一句話：錨點的向量值就是錨點與自己軸心的距離。根據ugui提供的幾種默認的錨點位置，就能滿足基本的需求，然後改變分辨率，再驗證一下UI的位置是否正確。

Canvas Scaler

首先要明確幾個概念：

1. Reference Resolution : 參考的屏幕大小，選擇主流的分辨率，在這個分辨率下設計UI。
2. Screen Size : 當前的屏幕大小
3. Canvas Size : Canvas RectTransform的寬高
4. Scale Factor: 用於計算ScaleXy,縮放Canvas，來適應屏幕。 ScaleFactor = ScreenSize / Canvas Size;只有當canvas的renderMode爲screen Space時纔有效。
5. Canvas.Rectransform.ScaleXYZ , canvas的縮放比例
   在ScreenSpace->overlay模式下，ScaleXYZ = scaleFactor
   在ScreenSpace->Camera模式下，ScaleXYZ = scaleFactor * scaleFactorCamera（只是說明camera的影響因子）

UI Scale Mode是三種模式

Constant Pixel Size

通過Scale Factor直接縮放所有的UI元素,按照scaleFactor = Screensize/ canvasSize的規則變化。
當scaleFactor= 1時，canvasSize和screenSize是相等的。

接下來是參數：Reference pixels Per Unit，每單位的像素數，用來決定UI在世界座標中的大小。
其實還有另外一個pixel per unit，它是Sprite的屬性，這兩個有什麼關係呢？
PixelPerUnit = spritePixelperUnit / reference pixels per unit
這個兩個共同作用，計算出真實的PixelPerUnit
UI的大小 = 原圖的width / PixerlperUnit * 原圖的height / PixelPerUnit
要在Unity中看到UI的真實大小，需要點擊image的set Native Size。

Scale with Screen Size

根據屏幕尺寸來調整UI的縮放值，具體項目中使用哪種模式，根據自己而定，一般選擇match width or Height 或者Expand。不過一般推薦使用expand,它可以完整的顯示UI，不會出現裁剪的問題。

Screen Match Mode 的三種模式：

• Match Width or Height
  根據寬度或高度來適應canvas size
  具體根據Match的值，

1. Match = 0, 根據寬度進行縮放，只有屏幕的寬度變換對UI有影響。
   此時，CanvasSize.width = Reference resolution. x
   scale Factor = ScreenSize.width / CanvasSize.width
   CanvasSize.height = ScreenSize.height / Scalefactor
   計算出CanvasSize的高度。

2. Match=1 , 根據高度進行縮放，
   CanvasSize.Height = ReferenceResolution.y
   ScaleFactor = ScreenSize.height / CanvasSize.height;
   CanvasSize.width = ScreenSize.Width / ScaleFactor ;

3. Match = (0, 1) 根據兩者的權重來加成。

如果是橫版遊戲，以高度縮放，豎版遊戲按寬度縮放。
下面是UGUI的源碼，可以看到還是比較清楚的，對數變換可以忽略

case ScreenMatchMode.MatchWidthOrHeight:
 {
      float logWidth = Mathf.Log(screenSize.x / m_ReferenceResolution.x, kLogBase);
      float logHeight = Mathf.Log(screenSize.y / m_ReferenceResolution.y, kLogBase);
      float logWeightedAverage = Mathf.Lerp(logWidth, logHeight, m_MatchWidthOrHeight);
      scaleFactor = Mathf.Pow(kLogBase, logWeightedAverage);
  }

• Expand
  將Canvas Size進行寬或高擴大，讓他高於Reference Resolution(參考分辨率)。
  計算方式：
  scaleFactor = Mathf.Min(screenSize.x / referenceresolution.x, screenSize.y / referenceresolution.y);
  當reference Resolution = 1280 * 720 ,Screen Size = 800 * 600
  Scale Factor Width = 800/1280 = 0.625;
  Scale Factor Height = 600 / 720 = 0.8333
  取較小的值Scale Factor = 0.625
  根據ScaleFactor = ScreenSize / CanvasSize
  Canvas Size Width = 800 / 0.625 = 1280;
  Canvas Size height = 600 / 0.625 = 960;
  Canvas Size= 1280 * 960
  高度從720變成960， 最大程度的放大。縮放不剪切；適合製作較小的標準尺寸，擴充到較大屏幕上。保證UI中的元素都在屏幕內部，可能會出現側邊空白。

• Shrink
  將Canvas Size進行寬或高的收縮，讓他低於Reference Resolution
  ScaleFactor = Mathf.Max((screenSize.x / referenceresolution.x, screenSize.y / referenceresolution.y)
  同樣的計算，
  Canvas Size從1280 * 720 收縮爲960 * 720 ，最大程度的縮小；縮放且剪切
  保證屏幕側邊不會出現空白，可能會將UI裁剪掉。

• 計算ScaleXY
  上面已經談論過了，在screen space 下，當改變尺寸時，canvas size 會發生變化，變化的規則也在上面進行了說明，但是同時我們也注意到canvas的Scale也是發生了變化。
  下面我們來討論在Screen Space-camera下，canvas是怎麼做適配的
  使用了camera來渲染UI，canvas此時是處於世界空間中，現在要做的就是把canvas和投影空間的投影平面重疊，爲了滿足這個目的，canvas會進行縮放和變換來適應。
  一直滿足等式：canvas.height * ScaleXY = 投影面height
  1.正交相機
  參數Size ,定義了投影平面的高的1/2,
  Canvas.height * Scale = camera.size * 2
  Canvas.height可以根據上面討論過的規則計算出，然後scale = camera.size * 2 / cavas.height ;

2.透視相機
參數是Fov,同時要考慮canvas.planedistance;
canvas.height * Scale = 2 * canvas.planeDistance * tan(camera.fov/2)
舉例：
當reference Resolution = 1280 * 720 ,Screen Size = 800 * 600
正交相機： Size = 360
上面已經計算過了，Canvas.heigt = 960
則Scale = 360 * 2 / canvas.height = 0.75

在canvasSize 和scaleXyz的共同作用下，canvas才能一直和投影空間重疊。爲了適配平面大小，canvassize進行變換，同時又爲了與投影空間重疊，scaleXYZ跟隨着變換。

Constant Physical Size

通過硬件設備的DPi(Dots per Inch 每英寸點數)進行縮放。不管屏幕的size如何變化，都會保持UI的大小不變

計算屏幕變換時，UI的縮放係數計算

UI的適配，只要設置好UI控件的錨點位置，ugui會自動爲我們做適配，但是如果我們要知道具體UI的縮放係數，還需要結合上面討論的canvas縮放的規則來進行計算。

項目中使用的是expand模式
float referenceAspect = referencesolution.x / referencesolution.y
float ScreenAspect = Screen.Width / Screen.Height

如果ScreenAspect > referenceAspect 時，
Screen.Width / Screen.Height > reference.x / reference.y
做一個簡單的變換：
Screen.Width / reference.x > Screen.Height/ reference.y
可以回到上面看一下，scalefactor的計算方法，取的是w和h中縮放小的那個，這個時候，取的是Height的縮放。
所以canvas 在縮放的時候，height是不變的，對canvassize的Width進行擴大，
canvassize.x= Screen.w * referenc.y / Screen.h
標準的canvas的寬度是是reference.x
所以canvas當前的W的縮放因子是 ， canvassize.x / referenc.x =
Screen.w / reference.x * reference.y / Screen.h = ScreenAspect / referenceAspect
所以H的縮放因子是1， W的縮放因子是ScreenAspect / referencsAspect。

同理，如果refereneAspect > ScreenAspect
則，Screen.h / reference.x > Screen.W / reference.y
所以canvas的規則就是，W不變， H縮放
W的縮放因子是1
H的縮放因子是referenceaspect / ScreenAspect
用代碼表示：

float  ScreenAspect = Screen.width / Screen.height;
float referenceAspect = reference.x / reference.y ;
float Wscale ；W方向的縮放
float Hscale；
float FullScale；全屏的縮放
if(ScreenAspect > referenceAspect)
{
    Hscale = 1.0f;
    Wscale = ScreenAspect / referenceAspect;
    FullScale = Wscale;
}
else if(ScreenAspect < referenceAspect)
{
    Wscale = 1.0f;
    Hscale = referenceAspect / ScreenAspect;
    FullScale = Hscale ;
}
else 
{
    Wscale = 1.0f;
    Hscale = 1.0f
    FullScale = 1.0f ;
}

UI上3D物體相關的適配

如果UI上用到了3D模型，而且是用單獨的3D相機去渲染的。而且模型在UI的上面，如果屏幕尺寸發生變換，模型不會變化，UI可能會縮小，模型會擋住原來旁邊的UI，所以需要對3D物體根據屏幕尺寸進行縮放，問題是這個縮放比例的計算。
可以利用上面計算的UI縮放係數，來縮放相機的參數
如果是透視相機，縮放fov
如果是正交相機，縮放size
達到3D模型適配UI的效果，正交相機是親測有效

所以如果有這種3D模型疊在UI上的需求，最好還是用RenderTexture來做，不需要考慮這種適配的問題。