這是我閱讀 UGUI 源碼記錄的相關筆記，共三部分、文件結構和部分組件使用、輸入事件、核心部分

ZeroyiQ：UGUI 源碼筆記（一）文件結構和部分組件使用

ZeroyiQ：UGUI 源碼筆記（二）輸入事件

ZeroyiQ：UGUI 源碼筆記（三）核心部分

一、UGUI

1. Define

通過 3D 網格系統構建的 UI 系統。源碼地址

1.1 實現

使用 UGUI 制作一個圖元（圖片、按鈕...)，會先構建一個方形網格，然后綁定材質球，材質球里存放了要顯示的圖片。

1.2 問題

材質球和網格的渲染，性能開銷過大，drawcell 過高。

1.3 解決

減少材質球：一部分類型相同的圖片，進行合圖。多個圖元可以只是用一個材質球，改變模型頂點上的 UV 就能顯示不同的圖片了。

合并網格：將有相同材質球（圖片、shader）和相同層級的網格，進行合并。

2. 源碼文件結構(v2019.1)

• EventSystem 輸入事件
• EventData 事件數據
• InputModules 輸入事件捕捉模塊
• Raycasters 射線碰撞檢測
• EventHandle 事件處理和回調
• Animation 動畫
• CoroutineTween 補間動畫
• Core 渲染核心
• Culling 裁剪
• Layout 布局
• MaterialModifies 材質球修改器
• SpecializedCollections 特殊集合
• Utility 工具集
• VertexModifies 頂點修改器

二、部分組件

1. Canvas

類似于畫畫的畫布。Canvas 包含了上述解決步驟中的合并網格的功能。

1.1 Render Mode

• Screen Space - Overlay：不與空間上的排序有任何關系，常用在純 UI。Sort Order 值越大，顯示越前面
• Screen Space - Camera：依賴 Camera 的平面透視，能夠加入非 UGUI的元素到 UI 中。【常用】
• World Space： UI 物體會放出現在世界空間中，常在世界空間中與普通3D物體一同展示，列如場景中對象的血條。

2. Canvas Scale

縮放比例組件，用來指定 Canvas 中元素的比例大小。

2.1 UI Scale Mode

• Constant Pixel Size：指定比例大小。
• Scale With Screen Size：以屏幕基準自動縮放，能設置以寬還是以高。【手游項目常用】
• Constant Physical Size：以物理大小為基準。

2.2 ScreenMatchMode.MatchWidthOrHeight

根據屏幕高寬匹配。使用對數空間轉換能夠有更好的表現。

float logWidth = Mathf.Log(screenSize.x / m_ReferenceResolution.x, 2); float logHeight = Mathf.Log(screenSize.y / m_ReferenceResolution.y, 2); float logWeightedAverage = Mathf.Lerp(logWidth, logHeight, m_MatchWidthOrHeight); scaleFactor = Mathf.Pow(2, logWeightedAverage);

e.g. 設備和游戲屏幕比例，寬是 10/5 = 2，高是 5/10 = 0.5，匹配值設定為 0.5。

正常空間平均值計算：(2+0.5)* 0.5 = 1.25，會放大 Canvas。

對數空間平均值計算：2^((log2(2)+log2(0.5))*0.5) =2^((1+-1)*0.5) = 1 ，Canvas 比例不變。

3. Image 、RawImage

對于圖片、圖集展示的組件。

3.1 區別

• Image：展示圖集中的圖元，能夠參與合并。
• RawImage：能展示單張圖片，不能合并。

3.2 選擇

圖片尺寸小，能夠打成圖集 -> Image

圖片尺寸大，合圖效率低 -> RawIamge

圖片相同類型數量多，合并圖集太大，實際展示圖片又很少 -> RawIamge

4 RectTransForm

雖然 RectTransform 是 UnityEngine 下的類，但是在 UGUI 中大量使用，也需要有所了解。

簡單來說，UGUI 通過 RectTransform 來定義 UI 的位置、大小、旋轉。

4.1 Anchors

錨點：子節點相對于父節點的對齊依據。數值為相對于父節點的比例。

100X100的圖片，全展 Anchors，父節點 120X120 效果如下。

Anchors Presets 工具，列出了常用的 Anchor 布局。按住 Shift 可以連同 Pivot 一同改變，按住 Alt 可以連同位置一同改變，在子節點鋪滿父節點的時候非常好用。

4.2 Pivot

物體自身的支點，影響物體旋轉、縮放、位置。

總結

以上是生活随笔為你收集整理的ugui源码_UGUI 源码笔记（一）文件结构和部分组件使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。