這是我閱讀 UGUI 源碼記錄的相關(guān)筆記，共三部分、文件結(jié)構(gòu)和部分組件使用、輸入事件、核心部分

ZeroyiQ：UGUI 源碼筆記（一）文件結(jié)構(gòu)和部分組件使用

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

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

一、UGUI

1. Define

通過 3D 網(wǎng)格系統(tǒng)構(gòu)建的 UI 系統(tǒng)。源碼地址

1.1 實現(xiàn)

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

1.2 問題

材質(zhì)球和網(wǎng)格的渲染，性能開銷過大，drawcell 過高。

1.3 解決

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

合并網(wǎng)格：將有相同材質(zhì)球（圖片、shader）和相同層級的網(wǎng)格，進行合并。

2. 源碼文件結(jié)構(gòu)(v2019.1)

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

二、部分組件

1. Canvas

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

1.1 Render Mode

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

2. Canvas Scale

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

2.1 UI Scale Mode

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

2.2 ScreenMatchMode.MatchWidthOrHeight

根據(jù)屏幕高寬匹配。使用對數(shù)空間轉(zhuǎn)換能夠有更好的表現(xiàn)。

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. 設(shè)備和游戲屏幕比例，寬是 10/5 = 2，高是 5/10 = 0.5，匹配值設(shè)定為 0.5。

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

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

3. Image 、RawImage

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

3.1 區(qū)別

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

3.2 選擇

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

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

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

4 RectTransForm

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

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

4.1 Anchors

錨點：子節(jié)點相對于父節(jié)點的對齊依據(jù)。數(shù)值為相對于父節(jié)點的比例。

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

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

4.2 Pivot

物體自身的支點，影響物體旋轉(zhuǎn)、縮放、位置。

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。