1
// Unity 底层（简化版）——Canvas 如何生成 Mesh
2

3
public class CanvasRenderer {
4
    // 每个 Graphic（Image/Text 等走 Unity UI 的元素）都有一个 CanvasRenderer
5
    // CanvasRenderer 负责把这个 Graphic 转成 Mesh
6

7
    // 1. Graphic 提供顶点数据
8
    //    - 位置（RectTransform 的四个角）
9
    //    - UV（从图集中取样）
10
    //    - 颜色（顶点色，用于颜色过渡）
11
    //    - 切线（法线等 UI 不需要的字段）
12

13
    // 2. Canvas 收集所有 CanvasRenderer 的 Mesh
14
    //    按材质 + 贴图排序
15
    //    连续的、同材质同贴图的 Mesh → 合并为一个 DrawCall
16

17
    // 3. 合并的条件（全部满足才能合批）：
18
    //    - 同一张贴图（或图集——同张图集的元素视为同一张贴图）
19
    //    - 同一个 Material 实例
20
    //    - 渲染顺序连续（中间不能夹杂其他材质）
21
    //    - 不涉及 Mask 裁切（Mask 会改变 Stencil Buffer，打断合批）
22

23
    public void SetMesh(Mesh mesh) { /* ... */ }
24
    public void SetMaterial(Material material, Texture texture) { /* ... */ }
25

26
    // 当 Graphic 的以下属性变化时，CanvasRenderer 标记为脏：
27
    // - 顶点位置（RectTransform 变化）
28
    // - 颜色（color 属性变化）
29
    // - UV（更换贴图或图集位置）
30
    // - 材质（更换材质）
31

32
    // 标记为脏后，下次渲染时重新生成 Mesh → 触发合批重建
33
}

1
// ============ 触发完整 Canvas 重建的操作 ============
2

3
// ❌ 改颜色——触发顶点色重算 + 重建
4
GetComponent<Image>().color = new Color(1, 1, 1, 0.5f);
5

6
// ❌ 修改 RectTransform——触发位置重算 + 重建
7
GetComponent<RectTransform>().sizeDelta = new Vector2(100, 50);
8

9
// ❌ 改文字——触发 Text 的 Font Texture 重生成 + 重建
10
GetComponent<Text>().text = "新文字";
11

12
// ❌ 改图片——触发贴图切换，如果新图不在同一图集 → 打断合批
13
GetComponent<Image>().sprite = newSprite;
14

15
// ❌ SetActive(true/false)——触发新增/移除 CanvasRenderer
16
gameObject.SetActive(false);
17

18
// ============ 不触发重建的操作 ============
19

20
// ✅ 修改 Transform.position（非 RectTransform）
21
//    UI 元素的渲染位置由 RectTransform 决定，Transform.position 被忽略
22

23
// ✅ 修改材质属性（如 shader 的 float 参数）
24
//    只要不换 Material 实例，不触发重建

1
// ============ 单一 Canvas 方案：简单但脆 ============
2
// 所有 UI 在同一个 Canvas 下
3
// 优点：合批最好（如果所有元素用同一个图集）
4
// 缺点：任何元素变化 → 整个 Canvas 重建
5

6
// ============ 拆分 Canvas 方案：性能优先 ============
7
//
8
// Canvas_Static (静态元素——几乎不变)
9
//  ├── 背景图
10
//  ├── 边框装饰
11
//  └── 静态标题
12
//
13
// Canvas_Dynamic (动态元素——频繁变化)
14
//  ├── 血条（每帧可能变化）
15
//  ├── 计时器（每秒更新）
16
//  └── 伤害数字（频繁创建/销毁）
17
//
18
// Canvas_ScrollView (滚动区域——独立 Canvas)
19
//  └── ScrollRect 的内容
20

21
// 拆分原则：
22
// 1. 静态和动态分离——静态 Canvas 几乎永远不重建
23
// 2. 频繁变化的放独立 Canvas——变化只影响自己的 Canvas
24
// 3. ScrollRect 独立 Canvas——滚动时只有它在变

1
// 实践示例：战斗 HUD
2
//
3
// Canvas_HUD_Background (Static)
4
//   - 技能栏底框、小地图边框 —— 永远不变
5
//
6
// Canvas_HUD_Info (偶尔变)
7
//   - 玩家名字、等级 —— 升级时才变
8
//
9
// Canvas_HUD_Bars (每帧变)
10
//   - 血条、蓝条、耐力条 —— Update 中更新
11
//   - 冷却计时文本 —— 每帧更新
12
//
13
// Canvas_HUD_DamageNumbers (频繁创建/销毁)
14
//   - 伤害数字 —— 独立 Canvas，动画结束直接回收
15
//
16
// 效果：每帧只有 Canvas_HUD_Bars 和 Canvas_HUD_DamageNumbers 需要重建
17
//       其他 Canvas 保持睡眠——零重建开销

1
// Unity 底层（简化版）——射线检测如何工作
2

3
public class GraphicRaycaster {
4
    public List<RaycastResult> Raycast(PointerEventData eventData) {
5
        List<RaycastResult> results = new List<RaycastResult>();
6

7
        // 1. 获取所有 Graphic 组件（Text, Image, RawImage...）
8
        var graphics = GraphicRegistry.GetGraphicsForCanvas(canvas);
9

10
        // 2. 将屏幕坐标转换到 Canvas 的本地坐标
11
        //    Screen Point → Canvas Local Point（需要处理不同 RenderMode）
12

13
        // 3. 对每个 Graphic 做矩形包含检测
14
        foreach (var graphic in graphics) {
15
            // 只检测 Raycast Target 为 true 的元素
16
            if (!graphic.raycastTarget) continue;
17

18
            // 深度优先遍历——从顶层往底层检测
19
            // 检查点是否在 RectTransform 的矩形内
20
            if (RectTransformUtility.RectangleContainsScreenPoint(
21
                graphic.rectTransform,
22
                eventData.position,
23
                eventCamera)) {
24

25
                results.Add(new RaycastResult {
26
                    gameObject = graphic.gameObject,
27
                    depth = graphic.depth  // 用于决定谁在最上面
28
                });
29
            }
30
        }
31

32
        // 4. 按深度排序——depth 大的在上面
33
        results.Sort((a, b) => b.depth.CompareTo(a.depth));
34

35
        return results;
36
    }
37
}

1
// 场景：背包面板前面还有一个确认对话框
2
// 点击"确认"按钮 → 只有按钮响应 → 不会穿透到背包
3

4
// 原理：事件系统按 depth 排序，只派发给最顶层命中元素
5
// 但——如果顶层元素不处理，默认不会向下传递
6

7
// 自定义穿透行为：
8
public class PassThroughPanel : MonoBehaviour, IPointerClickHandler {
9
    public void OnPointerClick(PointerEventData eventData) {
10
        // 自己处理完逻辑后，手动传给下一层
11
        ExecuteEvents.Execute(
12
            GetNextSiblingGameObject(),
13
            eventData,
14
            ExecuteEvents.pointerClickHandler
15
        );
16
    }
17
}

1
// TMP 的使用
2
using TMPro;
3

4
public class TMPExample : MonoBehaviour {
5
    [SerializeField] private TextMeshProUGUI tmpText;
6

7
    void Start() {
8
        // TMP 的文本设置——和原生 Text 类似但功能更多
9
        tmpText.text = "Hello <color=red>World</color>";  // 富文本
10
        tmpText.fontSize = 24;      // 不会模糊——SDF 的魔法
11
        tmpText.fontStyle = FontStyles.Bold | FontStyles.Italic;
12

13
        // TMP 的性能优势
14
        // - 同一字体的所有 TMP 文本共享同一个 Material + 贴图（SDF Atlas）
15
        // - 不同字号的文本仍然可以合批——因为是同一张贴图
16
        // - 原生 Text：不同字号 = 不同贴图 = 无法合批
17
    }
18
}

1
// ❌ 每帧修改 TMP 文本——触发 Canvas 重建
2
void Update() {
3
    tmpText.text = $"HP: {currentHealth}/{maxHealth}";  // 每帧重建
4
}
5

6
// ✅ 只在值实际变化时才更新
7
private int lastDisplayedHealth = -1;
8

9
void Update() {
10
    int displayHealth = Mathf.CeilToInt(currentHealth);
11
    if (displayHealth != lastDisplayedHealth) {
12
        tmpText.SetText("HP: {0}/{1}", displayHealth, maxHealth);
13
        lastDisplayedHealth = displayHealth;
14
    }
15
}
16

17
// ✅ 或者——用多个 Text 拆分静态和动态部分
18
// "HP: " ← 静态 Text（不重建）
19
// "100"   ← 动态 Text（只在值变化时重建）

1
// ============ BindableProperty：可绑定属性 ============
2
public class BindableProperty<T> {
3
    private T value;
4

5
    public T Value {
6
        get => value;
7
        set {
8
            if (!EqualityComparer<T>.Default.Equals(this.value, value)) {
9
                this.value = value;
10
                OnValueChanged?.Invoke(value);
11
            }
12
        }
13
    }
14

15
    public event Action<T> OnValueChanged;
16

17
    public BindableProperty(T initialValue = default) {
18
        value = initialValue;
19
    }
20

21
    // 单向绑定——View 响应 Model 的变化
22
    public void BindTo(UnityEngine.UI.Text text, Func<T, string> formatter = null) {
23
        OnValueChanged += (val) => {
24
            text.text = formatter != null ? formatter(val) : val.ToString();
25
        };
26
        // 立即刷新一次
27
        text.text = formatter != null ? formatter(value) : value?.ToString();
28
    }
29

30
    // 绑定到 TMP Text
31
    public void BindTo(TMP_Text tmpText, Func<T, string> formatter = null) {
32
        OnValueChanged += (val) => {
33
            tmpText.SetText(formatter != null ? formatter(val) : val.ToString());
34
        };
35
        tmpText.SetText(formatter != null ? formatter(value) : value?.ToString());
36
    }
37

38
    // 绑定到 Slider
39
    public void BindTo(Slider slider) where T : IConvertible {
40
        OnValueChanged += (val) => {
41
            slider.value = Convert.ToSingle(val);
42
        };
43
        slider.value = Convert.ToSingle(value);
44
    }
45
}
46

47
// ============ ViewModel：Model 和 View 的中介 ============
48
public class PlayerViewModel {
49
    // Model 数据
50
    private PlayerModel model;
51

52
    // 暴露给 View 的绑定属性
53
    public BindableProperty<int> Health { get; } = new BindableProperty<int>(100);
54
    public BindableProperty<int> MaxHealth { get; } = new BindableProperty<int>(100);
55
    public BindableProperty<int> Gold { get; } = new BindableProperty<int>(0);
56
    public BindableProperty<string> PlayerName { get; } = new BindableProperty<string>("");
57

58
    // 计算属性——不直接对应 Model 的字段
59
    public BindableProperty<string> HealthDisplay { get; } = new BindableProperty<string>("100/100");
60
    public BindableProperty<float> HealthPercent { get; } = new BindableProperty<float>(1.0f);
61

62
    public PlayerViewModel(PlayerModel model) {
63
        this.model = model;
64

65
        // 监听 Model 变化 → 更新 ViewModel
66
        model.OnHealthChanged += (current, max) => {
67
            Health.Value = current;
68
            MaxHealth.Value = max;
69
            HealthDisplay.Value = $"{current}/{max}";
70
            HealthPercent.Value = (float)current / max;
71
        };
72

73
        model.OnGoldChanged += (gold) => {
74
            Gold.Value = gold;
75
        };
76
    }
77

78
    // 主动操作——View 调用，ViewModel 处理逻辑
79
    public void BuyItem(ItemData item) {
80
        if (model.Gold >= item.price) {
81
            model.SpendGold(item.price);
82
            model.AddItem(item);
83
        }
84
    }
85
}
86

87
// ============ View：只负责绑定和显示 ============
88
public class PlayerHUDView : MonoBehaviour {
89
    [SerializeField] private TMP_Text healthText;
90
    [SerializeField] private Slider healthSlider;
91
    [SerializeField] private TMP_Text goldText;
92
    [SerializeField] private TMP_Text playerNameText;
93

94
    private PlayerViewModel viewModel;
95

96
    public void Bind(PlayerViewModel vm) {
97
        viewModel = vm;
98

99
        // 单向绑定——ViewModel 变化 → UI 自动更新
100
        vm.HealthDisplay.BindTo(healthText);
101
        vm.HealthPercent.BindTo(healthSlider);
102
        vm.Gold.BindTo(goldText, val => $"金币: {val}");
103
        vm.PlayerName.BindTo(playerNameText);
104

105
        // 不需要 Update() 轮询——完全事件驱动
106
    }
107
}
108

109
// ============ 使用 ============
110
void Start() {
111
    var model = new PlayerModel();
112
    var viewModel = new PlayerViewModel(model);
113

114
    var hudView = FindObjectOfType<PlayerHUDView>();
115
    hudView.Bind(viewModel);
116

117
    // Model 变化 → ViewModel 自动更新 → View 自动刷新
118
    model.TakeDamage(30);
119
    // healthText 显示 "70/100"  ← 自动
120
    // healthSlider 移到 0.7    ← 自动
121
    // 不需要任何 Update() 代码
122
}

1
// ❌ 在 LayoutGroup 的子元素上频繁 SetActive
2
// 每次 SetActive → LayoutGroup 标记为脏 → 重新计算所有子元素位置
3
void Update() {
4
    errorMessage.SetActive(hasError);  // 每帧触发布局重建！
5
}
6

7
// ✅ 用 CanvasGroup 控制可见性——不影响布局
8
[SerializeField] private CanvasGroup errorGroup;
9

10
void Start() {
11
    errorGroup = errorMessage.AddComponent<CanvasGroup>();
12
}
13

14
void Update() {
15
    errorGroup.alpha = hasError ? 1 : 0;
16
    errorGroup.interactable = hasError;
17
    errorGroup.blocksRaycasts = hasError;
18
    // 不触发 LayoutGroup 重建！
19
}