UE4中使用富文本（RichTextBlock多格式文本块）

前言

哈喽大家好啊~好久没有写东西了，最近闹疫情，实在是没心情！其实主要还是因为太懒了！

今天将为大家分享个不是很新的技术，但是又是在游戏开发里常出现的需求，富文本应用。

说到富文本，可能很多人并不知道什么是富文本。富文本其实主要表述了在单一文本段中出现多种文本样式（字体，大小，颜色，格式）并且掺杂了图像内容。最常见的需求当然是聊天框中插入装备道具信息啦，可以看下图一中的样例。

从截图中，可以看到，文本段内掺杂了不同颜色的文字，同时还有表情图标夹杂其中。这就是富文本的典型应用。

在虚幻的4.20之前如果希望制作富文本，还是要自己完成设计，也就是需要自己编写控件，解析文本。但是在4.20加入了一个新的文本控件“RichTextBlock”。它可以帮助我们构建富文本段，通过使用标签语言，快速格式化文本段，使得文本内容更加的丰富。

这完全得益于虚幻的设计，使得我们更轻松的使用富文本。

标签语言

要说标签语言，那最典型的就是网页构建html了，这是典型的标签语言，通过不同的标签表述不同的内容。标签起到标记的作用，用于标记特定内容的开始和结束。大家可以简单的理解为方便解读格式的一种规则说明即可。

步骤

创建用户控件蓝图

在资产内容浏览器中，直接右键，创建“用户控件蓝图”，然后将蓝图显示在视口中。此步骤比较简单，不加赘述。

在控件蓝图中加入 RichTextBlock 控件。

由于 RichTextBlock控件必须指定文本格式数据表格。否则无法显示任何文本内容。

多样式文本设置

目前 RichTextBlock 控件支持样式文本和样式图片，样式文本需要借助编写数据表格（DataTable）来标注文本样式。步骤如下：

1. 构建文本数据表格
2. 构建文本格式数据
3. 编写文本

构建文本格式表格

数据表格中的表头结构体不需要我们单独编写，引擎有提供表格的表头格式。直接在内容浏览器中右键杂项中选择。

表头选择虚幻提供的富文本格式结构体

注意：RichImageRow是富文本中用来插入图片，标记图片格式的。RichTextStyleRow用来标记文本格式，我们选择文本格式。

构建文本格式数据

数据表格是用来构建标签标记的依据。将你希望使用的文本内容标记，通过添加数据条目来完成。条目名称即为标签名称。文本的外观、大小、颜色等信息均需要在表格中填入！

注意：表格中必须提供“Default”数据条目（Default用来指定默认文本格式）

设置数据表格到RichTextBlock

在富文本中控件细节面板中将刚刚构建的数据表格进行设置即可。

编写文本

设置妥当后，文本编写就相对比较简单了，在RichTextBlock的细节面板中，找到Text输入文本即可。需要注意的是，输入后需要编译下才可以显示。

如果编译后没有显示文本，请检查文本格式数据表格中，是否包含“Default”数据条目。

在数据表格中，我加入了数据条目“F01”并且设置了文本的样式，编译后就显示为图2的样子（图2测试文本也加入了图像），文本格式如下！

这是恢复魔法药品<F01>紫罗兰</>

注意，标签格式，和标签结尾，圈定内的文本将会使用数据表格中的标签名称条目的字体样式来显示

多样式图像设置

图像设置和文本设置几乎相同，但是唯一区别在于设置到控件上时方式不同。总共分为以下几步：

1. 构建图像格式数据表格
2. 创建图像格式装饰类
3. 应用装饰类
4. 通过标签显示图像

构建图像格式表格

流程参照图3，图4，选择表格头为”Rich Image Row”。打开数据表格后，即可编辑图像。

同样，数据条目名称是用来标记富文本中插入图像的参考，不能随意命名。图片的格式需要在数据表格中设置完成，例如大小，对齐，填充方式等。

创建图像装饰类

与文本样式不同，图像样式无法直接设置到 RichTextBlock 控件上，需要通过使用装饰类来完成，装饰类构建非常简单，只需要创建蓝图继承装饰类即可。

创建完成后打开蓝图，在类设置中即可设置图像数据表格信息。

至此图像装饰类构建设置完成。

应用装饰类

应用装饰类只需要在 RickTextBlock 控件的细节面板中进行添加即可。一个控件可以添加多个装饰类。参照图6，下面的红框。

添加图像标签

在文本中，添加图像标签即可，标签格式如下

<img id="icon02"/>

icon02就是你构建的图像数据表格中的数据条目名称。千万注意不能有多余的空格，可以直接复制上面的文本使用。多空格会导致解析错误。可以参照图7

结语

富文本在游戏开发中比较常用，不管是引擎提供的功能还是自己来设计，首先都需要明白富文本的意义。通过标签语言方式进行文本样式标记已经是非常常用的手段。不管是对于使用者还是开发者都是最直观的一种方式。

目前需要引擎提供的富文本控件约束性还是比较强的。例如同一个文本，如果只是颜色的不同，就需要构建两条数据条目，真正的标签语言应该把文本样式和文本特性进行拆分，这样才能更加灵活的应对更多的需求场景。

虚幻引擎版本：V4.21.2