Text 类的底层实现：讲述者背后的“造字工坊“

引子文字显示的那一刻究竟发生了什么前面两篇我们先认识了讲述者 Text又学会了用代码驾驭它。你已经能熟练地写下myText.text 你好然后看着屏幕上出现你好两个字。一切看起来那么理所当然、那么顺滑。但如果我们停下来问一个打破砂锅的问题当你把你好赋值给 text 属性的那一瞬间从这行代码到屏幕上真正亮起那两个字中间到底发生了什么屏幕说到底只是一大片会发光的像素点。它并不认识你“好这样的汉字它只懂得在某个位置、显示某种颜色”。那么两个抽象的字符是如何一步步变成屏幕上一片片精确亮起的像素的这中间隐藏着一座我们从未见过的造字工坊。文字的显示绝不是把字贴上去这么简单而是一整套精密的、多道工序的加工流程。今天我们就推开这座工坊的大门深入 Text 类的底层实现看看在那行简单的赋值背后藏着怎样一台精密运转的机器。这一篇会比前面更硬核但请放心我们依然用比喻带路让最底层的原理也变得看得见、摸得着。一、第一个真相屏幕上没有字只有三角形要理解 Text 的底层必须先接受一个可能颠覆你直觉的真相——在图形渲染的世界里屏幕上根本不存在文字这种东西。屏幕能画的其实只有一种东西三角形。是的你没看错。无论多复杂的画面——一个 3D 角色、一片森林、一个界面按钮还是屏幕上的一行字——在最底层它们统统是由无数个三角形拼接而成的。这是显卡GPU的工作方式它是一台三角形绘制机器只擅长一件事飞快地画三角形并给三角形的表面贴上颜色或图案。那么问题来了一个方方正正的字符怎么用三角形来表示答案很巧妙。想象你要显示一个字符实际上是先摆出一个矩形的框然后把这个字符的图案像贴纸一样贴到这个矩形框上。而一个矩形正好可以用两个三角形拼出来——沿对角线一切一个矩形就变成了两个三角形。所以底层的真相是这样的显示一个字符 摆一个矩形 两个三角形 贴上这个字的图案显示你好两个字 两个矩形 四个三角形 各自贴上你和好的图案显示一整段话 许许多多个矩形 许许多多个三角形 各自贴上对应字符的图案这就是文字显示的底层本质。那位优雅的讲述者说出的每一个字在机器眼里都是一小片精心摆放、精心贴图的三角形。理解了这一点后面的一切就都有了根基。二、造字工坊的图纸网格Mesh既然文字最终要变成一堆三角形那么就需要一份图纸来精确记录这些三角形长什么样、摆在哪里。这份图纸在图形学里有个专门的名字——网格Mesh。网格就是那份描述如何用三角形拼出图形的完整蓝图。它主要记录三样关键信息第一样顶点Vertices——三角形的角在哪。每个三角形有三个角每个角就是一个顶点顶点记录着自己所在的精确位置坐标。要摆一个字符的矩形需要四个顶点矩形的四个角。显示你好两个字就需要八个顶点。文字越多顶点就越多。这些顶点就像图纸上一个个精确标注的坐标点决定了每片三角形摆放的位置和大小。第二样三角形的连接方式——哪几个顶点连成一个三角形。光有一堆顶点还不够还得说明哪三个顶点围成一个三角形。这份连接信息把散落的顶点组织成了一个个实实在在的三角形。第三样UV 坐标——该贴图案的哪一部分。还记得每个矩形要贴上字的图案吗UV 坐标就负责告诉每个顶点你这个角对应着字符图案上的哪个位置。有了 UV你这个字的图案才能不偏不倚、恰到好处地贴在属于它的那个矩形上而不会贴歪、贴错。此外网格还会记录每个顶点的颜色。这就是为什么你改变 Text 的 color文字就跟着变色——颜色信息本就写在这份图纸的顶点上。所以Text 类在底层做的最核心的一件事就是把你给的字符串翻译成这样一份网格图纸。你写下你好它就在幕后默默地算出需要八个顶点、摆在哪些坐标、每个顶点对应字符图案的哪个位置、是什么颜色——最终生成一份完整的网格。这份图纸交给显卡显卡照着它画出三角形、贴上图案屏幕上才亮起了你好两个字。三、字符图案从哪来字体图集与动态字体我们反复说给矩形贴上字的图案那么这些字符的图案究竟存在哪里答案是一张特殊的纹理——字体图集Font Texture。还记得我们前面讲过的 Texture布料和图集吗字体的原理与之相通。系统会把字体里一个个字符预先渲染成图案密密麻麻地排布在一张大纹理上——这张纹理就是字体图集。上面记录着你长什么样、好长什么样、每个字母、每个符号长什么样。于是显示文字的流程就完整了网格图纸上的 UV 坐标指向字体图集上对应字符的那一小块区域显卡照着图纸把那一小块字符图案贴到对应的矩形三角形上。字符图案 矩形三角形两者一结合字就显示出来了。这里还藏着一个 Text 底层的精妙机制——动态字体的按需生成。对于中文这样有着成千上万个字符的文字不可能一开始就把所有字都渲染进图集那张图集会大得吓人。所以 Text 采用了一种用到才造的聪明策略当你要显示某个字时如果字体图集里还没有这个字系统就临时把这个字渲染出来动态地塞进图集里再供显示使用。这也解释了一个底层的性能现象当你显示了大量以前从未出现过的新字符时系统需要临时往图集里塞字甚至可能因为图集塞满了而不得不重建整张图集。这就是为什么在某些场景下突然显示一大段全新的文字会带来一小下卡顿——工坊正在紧急赶制新的字符图案呢。四、Text 的家族血统它是一个Graphic要真正理解 Text 的底层还必须搞清楚它的家族血统。在 UGUI 的世界里Text 并不是孤立存在的。它和我们之前认识的 Image、Raw Image其实是同一个家族的兄弟——它们都继承自一个共同的祖先叫做Graphic图形。这个 Graphic 祖先定义了所有能在界面上被画出来的东西的共同行为。它立下了一条家规凡是我的子孙都必须回答一个问题——“你该如何生成自己的网格图纸”Image 回答“我是一张精灵图我的网格就是一个或九宫格的九个贴着图片的矩形。”Raw Image 回答“我是一张原始纹理我的网格就是一个贴着纹理的矩形。”Text 回答“我是一段文字我的网格是一堆矩形每个矩形贴着一个字符的图案。”你看尽管 Image 画的是图片、Text 画的是文字但在底层它们做的是同一件事——生成一份网格图纸交给显卡去画。它们的区别仅仅在于图纸的内容不同。这就是为什么它们能和谐地共存于同一套 UI 系统里、能被统一地管理和优化——因为它们本质上是同一种东西一份等待被绘制的网格。理解了这层血统你就理解了整个 UGUI 显示体系的底层统一性。Image、Text、Raw Image看似三个不同的控件实则是 Graphic 家族在回答如何生成网格这个问题时给出的三个不同答案而已。五、最关键的机制重建Rebuild现在我们来到 Text 底层最重要、也最影响性能的一个机制——重建Rebuild。这也是我们前两篇反复提到的性能开销的根源所在。我们已经知道Text 的核心工作是把字符串翻译成网格图纸。那么一个关键问题是这份图纸需要多久翻译一次答案是只要影响文字显示的东西变了图纸就得重新翻译一次。这个重新翻译图纸的过程就叫重建。想想看哪些情况会让图纸作废、必须重画你改了text内容“你好变成了再见”——字都不一样了图纸当然得重画。你改了fontSize字号变了——每个矩形的大小都变了顶点坐标全得重算。你改了font字体换了——字符的图案变了图纸也得重来。你改了对齐方式、改了框的大小——文字的排布位置变了图纸依然得重算。每一次这样的改变都会触发一次重建。而重建是要花费实实在在的计算的——系统要重新算出所有顶点的坐标、重新组织三角形、重新计算 UV……文字越多这份图纸越复杂重建的开销就越大。现在你终于能从底层彻底理解为什么我们前一篇要反复强调不要在 Update 里每帧无意义地更新文字了voidUpdate(){scoreText.text分数score;// 即使 score 没变也可能触发重建}每一次对 text 的赋值都可能宣告旧图纸作废逼着工坊重新绘制一份新图纸。一秒六十帧就是让工坊一秒钟白白重画六十次图纸——即使每次画出来的图纸一模一样这是何等的浪费。而只在数据真正变化时才更新这条纪律从底层看本质就是别让工坊做无用功只在图纸真的需要变的时候才让它动手重画。这条忠告的分量只有理解了底层的重建机制才能真正掂量得出来。六、聪明的偷懒脏标记与统一重建既然重建这么昂贵UGUI 的底层设计者们自然想尽了办法来减少它。这里有两个精妙的底层智慧值得一说。智慧一脏标记Dirty Flag——“记账而不立即干活”。当你改变了 Text 的某个属性系统并不会立刻、当场就吭哧吭哧地重建网格。它只是先在一个小本子上打一个标记意思是“这个 Text 脏了图纸过期了待会儿需要重画。”这个标记为脏的动作被形象地称为脏标记。它就像一位聪明的工头你每提一个修改要求他不马上放下手头的活去改而是先记在本子上“这里要改、那里要改。”为什么要这样因为你可能在同一帧里连着改了 text、又改了 color、又改了 fontSize。如果每改一次就立即重建一次那就白白重建了三次而有了脏标记工头只是记了三笔账等到这一帧的末尾才统一看一眼账本“哦这个 Text 脏了那我就重建它一次。”——三次修改最终只换来一次重建。这就是脏标记带来的巨大节省。智慧二统一在恰当的时机重建。那么工头究竟在什么时候才拿出账本、集中处理这些脏了的图形呢答案是在每一帧即将真正开始渲染画面之前有一个统一的时机系统会一次性检查所有被标记为脏的图形把它们的图纸集中重建好然后一起交给显卡。这种先记账、再统一处理的设计把原本可能散乱、重复的大量重建收拢成了井井有条的一次性批处理。这是 UGUI 底层为了性能做出的极为重要的架构设计。理解了这两点你也就明白了一个更深的道理你在代码里的每一次属性修改背后都牵动着这套脏标记—统一重建的机器在运转。你改得越克制、越集中这台机器就转得越轻松你改得越频繁、越随意它就越不堪重负。七、从图纸到像素最后的旅程图纸重建好了最后一程就是把它变成屏幕上真正的像素。这一程主要由显卡完成。系统把网格图纸顶点、三角形、UV、颜色连同字体图集一起打包交给显卡。显卡拿到后飞快地做几件事第一按图纸摆好所有三角形。根据顶点坐标把一个个三角形精确地摆到屏幕对应的位置上。第二给三角形填色贴图。根据 UV 坐标从字体图集上取出对应的字符图案贴到每个三角形上同时应用顶点记录的颜色。第三逐像素点亮。显卡计算出每个三角形覆盖了屏幕上哪些像素点然后把这些像素点按照贴图和颜色一个个精确地点亮。至此那两个抽象的字符你好终于走完了从代码到屏幕的全部旅程——字符串 → 网格图纸 → 三角形 → 贴上字体图集的图案 → 逐像素点亮。屏幕上你好两个字清清楚楚地亮了起来。这就是引子里那个问题的完整答案。从你写下myText.text 你好到屏幕上亮起这两个字中间竟然隐藏着这样一条精密的流水线翻译成图纸、拆解成三角形、贴上字符图案、点亮像素。每一步都环环相扣共同成就了那个我们习以为常、却其实无比精妙的瞬间。八、底层视角下的实战智慧理解了底层回过头看那些实战建议你会有全新的、更深刻的领悟。为什么文字分静态和动态因为重建是以整个 Text 为单位的。一段文字里只要有一个字变了整份图纸就得重画。把永不变的标题和疯狂跳动的数字放在一起数字的变化就会连累标题一起重建。分开放才能让不变的部分安安稳稳只重建真正在变的那部分。为什么警惕海量文字因为文字越多网格图纸上的顶点和三角形就越多每次重建的计算量就越大。满屏文字的重建是一笔沉重的开销。为什么避免频繁显示大量新字符因为动态字体需要临时往图集里塞新字字符太多太新可能触发图集的重建那是更大的开销。为什么集中修改属性更好因为脏标记机制会把同一帧里的多次修改合并成一次重建。集中改、少分散就是在配合这套机制发挥最大的节省效果。你看当你看透了底层的三角形、网格、重建、脏标记这套机制那些原本需要死记硬背的实战条例就全都变成了顺理成章、不言自明的道理。这就是理解底层的真正价值——它让你不再是机械地遵守规则而是从根源上明白了规则为何如此。九、尾声知其然更知其所以然我们推开了 Text 底层这座造字工坊的大门走完了一趟从字符到像素的完整旅程。我们知道了那个颠覆直觉的真相——屏幕上没有文字只有三角形我们认识了那份精密的图纸——网格它用顶点、三角形、UV 和颜色记录着如何拼出每一个字我们明白了字符图案来自字体图集以及中文那用到才造的动态生成机制我们理清了 Text 的家族血统——它和 Image、Raw Image 同为Graphic的子孙本质上都在回答如何生成网格这一个问题我们更深入了那个最关键的机制——重建以及它背后脏标记、统一处理的聪明偷懒之道。从最上层的拖拖点点到中层的代码驾驭再到今天最底层的造字工坊——我们对 Text 的理解终于抵达了根基。而这趟旅程最大的收获或许不在于记住了多少术语而在于一种认知境界的跃升——从知其然到知其所以然。以前你只知道改文字会有性能开销所以别频繁改现在你清楚地看见了那开销从何而来——是一份图纸的作废与重画是无数三角形的重新计算。以前你只是遵守着一条条实战规则现在你能从最底层的机制出发自己推导出这些规则甚至举一反三应对书本上从未写过的新情况。这正是一个开发者从会用走向精通的分水岭。因为真正的高手从来不满足于它能工作而总要追问一句它为什么能这样工作。当你能看透一行myText.text 你好背后那整座精密运转的工坊时你手中的这个小小的 Text 控件便再也不是一个神秘的黑箱而成了一台你彻底看得懂、也因此能真正驾驭得好的、透明的机器。而这份看透底层的能力会成为你面对未来一切复杂技术时最深厚、最可靠的底气。