我的笔记

外观

Lesson 002｜this.node.x = 100 到底发生了什么？ ​

Tags： #Creator2.x #Node #DirtyFlag #RendererDifficulty： ⭐☆☆☆☆

🎯 本课目标 ​

理解一行代码从修改数据到最终显示在屏幕上的完整流程。

🧩 上节课回顾 ​

上一课我们建立了 Creator 2.x 的整体架构：

TypeScript → JS Engine → JSB → Cocos2d-x → GPU

今天开始，我们沿着一行代码真正走一遍。

🧠 完整流程 ​

text
this.node.x = 100
        │
        ▼
Setter
        │
        ▼
Node 数据更新
        │
        ▼
Dirty Flag
        │
        ▼
等待 Renderer
        │
        ▼
World Matrix
        │
        ▼
Vertex 更新
        │
        ▼
Batch
        │
        ▼
DrawCall
        │
        ▼
GPU
        │
        ▼
Screen

💡 为什么需要 Dirty Flag？ ​

如果每修改一次属性就立刻重新计算矩阵：

  • CPU 重复计算
  • 大量无效开销

因此 Creator 使用 Dirty Flag（脏标记）：

修改时只做标记，渲染阶段统一更新。

这就是 Deferred Update（延迟更新） 思想。

💼 工作中的真实案例 ​

ts
node.x = 100;
node.y = 200;
node.rotation = 45;
node.scale = 2;

通常：

  • Dirty Flag：会被多次标记
  • World Matrix：渲染阶段统一计算一次
  • GPU：最终绘制一次

⚠️ 常见误区 ​

误区：

修改 node.x 图片就立刻移动。

实际上：

修改的是节点数据。

真正绘制发生在 Renderer。

🎤 面试会怎么问 ​

  1. 什么是 Dirty Flag？
  2. 为什么引擎喜欢延迟更新？
  3. 为什么 World Matrix 不立即计算？

📝 今日练习（参考答案） ​

问题：

ts
node.x = 100;
node.y = 200;
node.rotation = 45;
node.scale = 2;

回答：

  • Dirty Flag：会多次标记（同一节点可重复置脏）
  • World Matrix：通常统一计算一次
  • GPU：通常绘制一次

✅ 本课总结 ​

以后分析性能问题，先判断发生在哪一层：

JS → Engine → Renderer → GPU

下一课： 什么是 World Matrix？为什么父节点移动，子节点也会移动？