使用Shader進行UGUI的優化

• 降低Draw Call；
• 減少Overdraw；
• 減少UI Mesh重建次數和範圍。
  
  

• Overdraw特別大，幾乎很多時候會有整個螢幕的overdraw；
• 
  
• 玩家在移動過程中，因為一直在持續移動圖片的位置（做了適當的降頻處理），所以會一直有UI的Mesh重建過程。
  
• 
  
  

 

這裡需要注意的是，對於image控制元件的material進行賦值時，如果它在一個Mask控制元件之下，可能會遇到賦值失效的問題，採用materialForRendering或者強制更新材質的方式可能會有新的Material的建立過程導致記憶體分配，這些在優化之後可能帶來問題的點也是需要優化後進行驗證的。

• 在那篇文章的最後提到，我們自己拷貝了一個ThorImage類，開放部分介面然後繼承。我們後來改成了從Image直接繼承的方式，否則之前編寫的遊戲邏輯要在程式碼上相容兩種Image，會比較煩，這些向前相容的需求也是在優化過程中需要額外考慮和處理的點。
  
  

• 針對滾動列表這樣需要Mask的地方，一方面建議UI同學使用Rect Mask 2D元件，另外一方面為了邊緣的漸變效果為UI引入了Soft Mask 外掛來提供邊緣的漸變處理。放一張Soft Mask自己的效果對比截圖，需要類似效果的朋友可以自己購買。
  
  

UWA針對我們專案的深度優化報告裡提到：Soft Mask外掛的Component在Disable邏輯裡有明顯的效能消耗，目前我們未開始針對這塊進行優化，不過只在ui關閉的時候才有，所以優先順序也比較低，想嘗試的朋友可以提前評估下效能。

 

Tips：注意所使用貼圖的邊緣處理，因為uv的旋轉可能會導致超過之前0和1的範圍。首先貼圖的取樣方式要使用Clamp的方式，其次貼圖的邊緣要留出幾個畫素的透明區域，保證即使在裝置上貼圖壓縮之後依然可以讓邊緣的效果正確。

 

Tips：這裡使用UWA群裡一位朋友之前提供的三角函式近似的方法來略微減少一下指令消耗：

[AppleScript] 純文字檢視 複製程式碼

?

1 2

Vector2 tempPos;[/color][/size][/font][/align][font=微軟雅黑][size=3][color=#2f4f4f]RectTransformUtility.ScreenPointToLocalPointInRectangle(ParentCanvas.transform as RectTransform,                     ParentCanvas.worldCamera.WorldToScreenPoint(img.transform.position),                     ParentCanvas.worldCamera, out tempPos);

這裡的ParentCanvas是當前控制元件向上遍歷找到的第一個Canvas物件。

Tips：這裡，搞清楚了vs中頂點的worldPosition對應的屬性之後，可以做很多有趣的事情，包括之前的旋轉效果也可以不再旋轉uv而是對頂點位置進行旋轉。

3. 關於_Time，它的y值與C#中對應的是Time.timeSinceLevelLoad。這裡為了實現介面一開始的時候第一個字是從0開始放大的，需要從C#傳遞給Shader一個起始時間，通過_Time.y - _TimeOffset 來確保起始效果。

最後直接貼一下C#部分的程式碼好了，也很簡單，提供給UI配置縮放尺寸、縮放持續時間和間隔等引數，然後通過協程來控制字型的材質引數：

[AppleScript] 純文字檢視 複製程式碼

?

001 002 003 004 005 006 007 008 009 010 011 012 013 014 015 016 017 018 019 020 021 022 023 024 025 026 027 028 029 030 031 032 033 034 035 036 037 038 039 040 041 042 043 044 045 046 047 048 049 050 051 052 053 054 055 056 057 058 059 060 061 062 063 064 065 066 067 068 069 070 071 072 073 074 075 076 077 078 079 080 081 082 083 084 085 086 087 088 089 090 091 092 093 094 095 096 097 098 099 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142

using System; using System.Collections.Generic; using UnityEngine; using UnityEngine.EventSystems; using UnityEngine.UI; using DG.Tweening; using ThorUtils; using System.Collections;   namespace KEngine.UI {     public class UIAutoExpand : MonoBehaviour     {         public float ScaleDuration = 1;         public float CycleInterval = 5;         public float ScaleRatio = 0.5f;         private Canvas ParentCanvas;           private Image[] images;         private Vector4[] meshSizes;         private int currentScaleIdx = -1;           private Coroutine playingCoroutine;                   private static Material UIExpandMat = null;         private static int VertexParamsID = -1;         private static int TimeOffsetID = -1;         private static int TimeScaleID = -1;         private static int ScaleRatioID = -1;           void Awake()         {             //初始化靜態變數             if (UIExpandMat == null)             {                 UIExpandMat = new Material(Shader.Find("ThorShader/UI/UIExpand"));                 VertexParamsID = Shader.PropertyToID("_VertexParmas");                 TimeOffsetID = Shader.PropertyToID("_TimeOffset");                 TimeScaleID = Shader.PropertyToID("_TimeScale");                 ScaleRatioID = Shader.PropertyToID("_ScaleRatio");             }               UIExpandMat.SetFloat(TimeScaleID, 1 / ScaleDuration);             UIExpandMat.SetFloat(ScaleRatioID, ScaleRatio);               if (ParentCanvas == null)             {                 Transform trans = transform;                 while(trans != null)                 {                     ParentCanvas = trans.GetComponent<Canvas>();                     if (ParentCanvas != null)                     {                         break;                     }                     trans = trans.parent;                 }             }             if (ParentCanvas == null || ParentCanvas.worldCamera == null)             {                 Debug.LogError("The parent canvas of UIAutoExpand could not be empty!");                 return;             }             images = GetComponentsInChildren<Image>();             if (images.Length > 0)             {                 meshSizes = new Vector4[images.Length];             }             Vector2 tempPos;             for (int i = 0; i < images.Length; ++i)             {                 Image img = images;                 tempPos.x = 0;                 tempPos.y = 0;                 RectTransformUtility.ScreenPointToLocalPointInRectangle(ParentCanvas.transform as RectTransform,                     ParentCanvas.worldCamera.WorldToScreenPoint(img.transform.position),                     ParentCanvas.worldCamera, out tempPos);                 meshSizes.x = tempPos.x;                 meshSizes.y = tempPos.y;                 meshSizes.z = 0;                 meshSizes.w = 0;             }         }           private void OnEnable()         {             playingCoroutine = StartCoroutine(PlayExpandAni());         }           private void OnDisable()         {             if (playingCoroutine != null)             {                 StopCoroutine(playingCoroutine);             }         }           private void OnDestroy()         {             StartScaleImage(-1);             if (playingCoroutine != null)             {                 StopCoroutine(playingCoroutine);             }         }           private void StartScaleImage(int idx)         {             if (images == null)             {                 return;             }             if (currentScaleIdx > -1 && currentScaleIdx < images.Length)             {                 Image preImg = images[currentScaleIdx];                 preImg.material = null;             }             if (idx < 0 || idx >= images.Length)             {                 return;             }             currentScaleIdx = idx;             Image curImg = images[idx];             UIExpandMat.SetVector(VertexParamsID, meshSizes[idx]);             curImg.material = UIExpandMat;         }           private IEnumerator PlayExpandAni()         {             while (true)             {                 for (int i = 0; i < images.Length; ++i)                 {                     UIExpandMat.SetFloat(TimeOffsetID, Time.timeSinceLevelLoad);                     StartScaleImage(i);                     yield return Yielders.GetWaitForSeconds(ScaleDuration);                 }                 StartScaleImage(-1);                 yield return Yielders.GetWaitForSeconds(CycleInterval);             }         }     } }

Tips：這裡使用了 Shader.PropertyToID 方法來減少給material賦值過程中的消耗，對於攜程使用了一個Yielders類減少頻繁的記憶體分配。

總之，基於Shader來對持續的DoTween動畫進行優化，可以大大減少Canvas重建的機率。而Shader中基於頂點和_Time屬性進行動畫計算的消耗非常少，比如通常的Image只有四個頂點而已，再配合部分C#程式碼提供給材質必須的引數，就可以實現更加複雜的ui動畫。尤其對於會長時間存在的動畫效果，如果可以善用Shader可以做到兼顧效果和效率。

6. 進度條

在進行戰鬥中的Profile的時候也是發現了每幀都有一個Canvas重建的過程，排查後發現是用於顯示倒數計時效果的進度條在持續地被更新導致的。

UGUI的進度條控制元件功能非常通用，但是層次很複雜，包括Background、Fill Area和Handle Slide Area三個部分。它是實現原理是基於Mesh的修改：

 

從上面的gif可以看出，當Slider的value更改的時候，mesh會跟著調整。這可以做到一些UI想要的效果，比如讓Fill中的圖是一張九宮格的形式，就可以做出比較好看的進度條效果，保證拉伸之後的效果是正確的。

當你需要一條可能持續變化的進度條一直在顯示的時候，比如倒數計時進度，持續的Canvas重建就不可避免。

針對具體的需求，通過Shader來進行一個簡單的ProgressBar也非常容易，通過對於alpha的控制就可以做到擷取的效果：

[AppleScript] 純文字檢視 複製程式碼

?

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

fixed4 frag(v2f IN) : SV_Target {         half4 color = (tex2D(_MainTex, IN.texcoord) + _TextureSampleAdd) * IN.color;   #if _ISVERTICAL_ON         float uvValue = IN.texcoord.y - _UVRect.y;         float totalValue = _UVRect.w; #else         float uvValue = IN.texcoord.x - _UVRect.x;         float totalValue = _UVRect.z; #endif   #if _ISREVERSE_ON         uvValue = totalValue - uvValue; #endif                                           color.a *= uvValue / totalValue < _Progress;           color.a *= UnityGet2DClipping(IN.worldPosition.xy, _ClipRect);         #ifdef UNITY_UI_ALPHACLIP         clip (color.a - 0.001);         #endif           return color; }

這次是在ps階段進行處理，當然也可以在vs中模擬頂點的縮放效果或者處理uv的偏移。為了支援垂直和反向，這裡通過兩個巨集來進行控制。在實現了條狀的進度條，然後準備根據UI的具體需求進行效果上優化的時候，UI同學表示設計方案修改了變成了圓形的進度條（=_=），而且是兩個方向同時展示進度，最終效果如下圖所示的效果：

 

[AppleScript] 純文字檢視 複製程式碼

?

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19

fixed4 frag(v2f IN) : SV_Target {         half4 color = (tex2D(_MainTex, IN.texcoord) + _TextureSampleAdd) * IN.color;         float theta = atan2((IN.texcoord.y - _UVRect.y)/_UVRect.w - 0.5,                             (IN.texcoord.x + 1E-18 - _UVRect.x)/_UVRect.z-0.5); [/color][/size][/font][align=left][font=微軟雅黑][size=3][color=#2f4f4f] [/color][/size][/font][/align][font=微軟雅黑][size=3][color=#2f4f4f] [align=left]#ifdef IS_SYMMETRY[/align] [align=left]        color.a *= ((1 - _Progress) * UNITY_PI < abs(theta));[/align] [align=left]#else[/align] [align=left]        color.a *= ((1 - _Progress) * UNITY_PI * 2 < theta + UNITY_PI);[/align] [align=left]#endif[/align]   [align=left]        color.a *= UnityGet2DClipping(IN.worldPosition.xy, _ClipRect);[/align] [align=left]#ifdef UNITY_UI_ALPHACLIP[/align] [align=left]        clip(color.a - 0.001);[/align] [align=left]#endif[/align]   [align=left]        return color;[/align] [align=left]}

這裡用了一個消耗比較大的atan2指令來進行弧度值的計算，支援對稱和非對稱的兩種方式，對稱的方式用於上面的特殊進度條，非對稱的方式用於下面這種環形的進度條。