基于Unity的UIText实现打字机效果

BlaXuan · 发表于 2021-12-3 12:15

简介

打字机模式是游戏开发中十分常用的功能，其效果就是对文本进行逐文字的显示，目的是增加玩家的阅读感。下图展示了打字机效果：

调研

基于文本实现打字机的效果其实并不复杂，理想状态下，我们只需要将文本中的文字逐个拿出来进行显示就可以了。但生活往往会给你个小惊喜，那就是：富文本。富文本通过标签来实现常见的文字颜色、加粗、斜体等功能，它是嵌入在文本内容中的。以上图的示例来说，包含了富文本的完整文本内容为：
你好，我是<color=#ff0000ff>打字机</color>。我是粗体。我是斜体。
如果我们不对富文本做处理，而仅仅将文本中的文字逐个拿出来进行显示，那么效果就是错误的，如图：

目前网络上比较多的实现都是没有考虑过富文本的版本，也就是我前文提到的逐个显示文本中文字的方法，这个方法没有正确的处理富文本。因此本文的目标就是探讨一种可以正确处理富文本的打字机模式的实现，由于涉及到公司的内容权限，因此代码方面不会有太多，主要还是想和大家分享一下心得体会。
Unity定义的富文本

Unity定义了丰富的富文本来增强文字的显示效果，具体可以参考官方文档：
这里我们不是为了介绍富文本包含哪些可用内容，而是想说一说Unity对富文本的解析机制给我们实现打字机模式所带来的不便。
第一个是Unity只有在看到富文本标签匹配对时才会将文字显示为富文本指定的格式。举例来说，如果我们有富文本&#34;<color=#ff0000ff>我是红色&#34;，那么在Unity中会显示为：

因为此时Unity并没有看到富文本标签的结束标记，只有在富文本标签匹配时，Unity才会显示正确的格式。如&#34;<color=#ff0000ff>我是红色</color>&#34;：

因此在打字机模式下就无法做到当遇到富文本标签的起始标记时，直接将起始标记完整的填入目标显示文本，然后接着逐字的显示之后的文本。
第二个是Unity在解析富文本标签时，是不允许互相穿插的，例如文本&#34;无法穿插&#34;就无法被正确处理，显示效果如图：

这个问题在我想通过控制文字显隐的方式来实现打字机效果时给了我当头一棒，之后会有提及。
最初的想法：控制文字显隐！

经过和同事的简单商讨，我们最初的想法是希望以控制文字显隐的方式来实现打字机效果。我们在想是不是可以通过更改传递给Unity的顶点数据和索引数据来控制显示哪些文字，因为Unity是以网格的方式渲染文字的，如图：

虽然之后我没有尝试实现这种方案，但控制文字显隐的思路给了我启发，我想到是不是可以通过添加富文本标签&#34;<color=#00000000></color>&#34;来达到隐藏文字的效果。举个例子，如果当前我们的文本是&#34;隐藏我呀&#34;，当要显示第一个文字时，我们可以将文本改变为&#34;隐<color=#00000000>藏我呀</color>&#34;，最终的效果就是只有第一个文字会被显示，如图：

在逐个显示文字的过程中，只需要在相应的位置插入起始标记&#34;<color=#00000000>&#34;，并且在文本的最后插入结束标记&#34;</color>&#34;就可以隐藏相应的文本了。
这个方案一开始我也觉得没毛病，直到遇到了前文提到的穿插问题，我们无法在一个富文本标签对之间插入&#34;<color=#00000000>&#34;，并且在文本最后插入&#34;</color>&#34;，Unity无法正确解析。
以富文本&#34;我是粗体，我是斜体&#34;为例，当显示到&#34;粗&#34;这个字时，最终生成的文本其实是&#34;我是粗<color=#00000000>体，我是斜体</color>&#34;，由于Unity无法正确解析穿插的富文本，因此最终的显示效果就是不正确的，如图：

要想正确的实现隐藏效果，就必须小心的处理富文本标签对，不能出现穿插的问题。以上面的例子来说，我们最终生成的文本必须是&#34;我是粗<color=#00000000>体</color><color=#00000000>，我是斜体</color>&#34;，也就是必须保证富文本标签不能穿插。
除去这个问题之外，隐藏的方式还有一个问题，就是虽然看不到文字，但其实文字还是真实存在在那儿的，所以文本的对齐方式会有问题。举个例子，假设我们期望文本的对齐方式是居中的，那么当显示到第一个文字时，我们自然而然的希望这个文字出现在中间，但由于所有文字其实都已经生成，只不过其他文字是被隐藏了，因此第一个文字就不会出现在中间，错误的效果如图：

正确的效果应该如下图：

由于上文提到的两个问题，控制文字显隐的方式没有办法达到我们的需求。
实现方案：匹配富文本标签

既然Unity在解析富文本格式时既需要看到完整的富文本标签又不允许穿插，那我们就满足它的要求，手动来匹配富文本标签。
有了这样的思路之后，就可以动手实现啦，整体的方案并不算太复杂，流程如下图所示：

这里的关键点在于每次对当前文字进行解析时，首先判断它是不是一个富文本标签的起始标记，如果是的话，我们就将这个富文本标签压入一个栈中，之后，就跳过这个标记，继续解析下一个文字。如果不是的话，还需要判断当前文字是不是一个富文本标签的结束标记，如果是的话，就需要从富文本标签栈中弹出标签，这样的话，才能最终保证富文本标签是匹配的。在解析完当前要显示的文字之后，我们就需要查询富文本标签栈，看其中是否有富文本标签。如果有的话，就证明在本次解析的过程中，我们遇到了富文本标签的起始标记，但没有遇到富文本标签的结束标记，此时就需要相应的补上富文本标签的结束标记，以此来达到匹配的目的。
下面以一个例子来进行说明，帮助大家更容易的理解：

开始时，我们解析的文字为&#34;<&#34;，此时经过判断发现它是富文本标签的起始标记，则将该标签压入富文本标签栈中，同时将该标签添加到显示字符串。接着我们解析文字&#34;你&#34;，它是一个正常显示的文字，将它添加到显示字符串。在解析文字的过程结束后，我们去查询富文本标签栈，发现其中有一个color标签，则需要在显示字符串中添加color标签的结束标记。最终的显示字符串就是&#34;<color=red>你</color>&#34;。

在下一步的处理中，我们继续解析文字&#34;<&#34;，此时经过判断发现它是富文本标签的起始标记，则将该标签压入富文本标签栈中，同时将该标签添加到显示字符串。接着我们解析文字&#34;好&#34;，它是一个正常显示的文字，将它添加到显示字符串。在解析文字的过程结束后，我们去查询富文本标签栈，发现其中有一个color标签，还有一个b标签，此时我们需要按倒序的方式添加结束标记以保证富文本标签的匹配。最终的显示字符串就是&#34;<color=red>你好</color>&#34;。

最后，我们解析文字&#34;<&#34;，发现它是一个富文本标签的结束标记，此时就需要从富文本栈中弹出标签，表明一个富文本标签匹配对的结束，同时将这个结束标记添加到显示字符串中。接着继续解析文字&#34;<&#34;，发现它仍旧是一个富文本标签的结束标记，则处理流程和之前一样，从富文本栈中弹出标签，同时将这个结束标记添加到显示字符串中。到这里，全部的文本内容都已经处理完毕了，打字机模式结束。
总结与展望

本文阐述了基于Unity的UIText实现的打字机效果，更多想分享给大家的是我自己的想法和思路。在真正实现的过程中还会遇到许多细节上的问题，并且对于字符串操作所带来的内存分配的优化也是进一步需要考虑的问题。
本人能力有限，如有错误和更好的想法，望不吝赐教。知识只有分享了才能体现它的作用和价值，共勉 :)。
参考资料：

https://docs.unity3d.com/Manual/StyledText.html

本文固定链接: EnigmaJJ：基于Unity的UIText实现打字机效果
转载请注明: EnigmaJJ 2019年09月22日于知乎发表

kirin77 · 发表于 2021-12-3 12:20

除了内存问题以外，反复解析的效率如何呢？

zifa2003293 · 发表于 2021-12-3 12:28

你好，不知道你这里说的反复解析指的是文本字符串中的每个字符么？在解析每个字符时，目的就是判断出它是富文本标签的标记还是普通字符，效率取决于你使用什么方式去判断。我使用了字符串比较的方式，一方面比对的字符串长度很短，另一方面比对的字符串数量很少，所以没有什么性能开销~

xiangtingsl · 发表于 2021-12-3 12:29

这个兼容富文本的打字效果是不是可以直接全部显示，然后调节Transform的width实现？更简单效果也没区别？

johnsoncodehk · 发表于 2021-12-3 12:34

最好用处理输出结果的字体网格的方式实现，性能也比较好，分段的时候也不会出岔子

super1 · 发表于 2021-12-3 12:37

单行没问题，多行会出岔子

Zephus · 发表于 2021-12-3 12:42

如果不是非要自己造轮子，好像dotween的打字机功能就支持了富文本

Baste · 发表于 2021-12-3 12:51

这么6的，它的原理是什么呢？

xiaozongpeng · 发表于 2021-12-3 12:56

dotween不支持富文本的。。。

Zephus · 发表于 2021-12-3 12:58

题主你好，请问轮子造好了咩？开源吗？

		自动登录	找回密码
密码			立即注册

[笔记] 基于Unity的UIText实现打字机效果

本帖子中包含更多资源