使用富文本块的高级文本样式

天の川

在处理游戏UI时，典型的UMG文本块提供多种多样的选项和自定义设置。但是，许多开发者发现需要更灵活的文本来支持样式更改、内嵌图像、超链接等内容的标记。在试验性富文本块控件中，已经可以通过代码实现上述许多需求。

在4.20版本中，可以在UMG中使用该控件，其工作流程经过改进后，比以前更加灵活，扩展性更强。在改进期间，我们没有试图为开发者可能需要的所有可能的自定义提供支持，而是将富文本块设置为接受装饰器类，让您可以定义项目所需的标记行为。您会发现，我们提供了一个装饰器类作为例子，让您能够通过RichTextBlockImageDecorator.cpp设置您自己的装饰器。

在本博文中，我将从UI设计者和程序员的角度，介绍如何使用UMG中新增的富文本块控件。我将说明如何使用装饰器类为其扩展更多功能。在开始添加您自己的自定义之前，最好先熟悉UMG中新公开的富文本块功能。富文本块控件让您可以自定义块内容，您可以通过使用数据表资源的文本样式和装饰器进行自定义，也可以使用您自己的装饰器类。

您创建的数据表资源用于根据用户定义的任意结构存储任意类型的数据。在创建数据表时，您会注意到提供的两个结构体：文本样式行（Text Style Row）和图像行（Image Row）。文本样式行结构体是随着富文本块提供的内置样式的一部分，供您定义字体类型，比如是否有轮廓、颜色类型和字号等。图像行是提供的RichTextBlockImageDecorator示例类的一部分，供您指定富文本块控件中的任意装饰器类。它与文本样式行结构体类似，让您可以定义内嵌图像的属性，如尺寸缩放、色调、对齐等。

您可以将RichTextBlockImageDecorator类示例作为起点来创建您自己的标记文本，然后将其替换为您需要的任何Slate内容，包括图像、超链接甚至控件！数据表可以保存任意类型的数据，并可以通过数据表资源在编辑器中设置。

入门

首先，我们需要创建一个新的控件蓝图，并使用选用板将富文本块拖到画布上。选中该富文本块，使用“细节（Details）”面板以找到文本样式设置（Text Styles Set）。通过这个资源指定槽，我们可以传递样式数据表来定义文本样式以及想要使用的任意数量的额外样式。您可以选择该指定下拉菜单并选择“数据表（Data Table）”，或者使用内容浏览器并选择“新增（Add New）>其他（Miscellaneous）>数据表（Data Table）”来创建一个新的数据表。

在创建数据表时，可以直接从UMG中的“细节（Details）”面板创建。从“选取结构（Pick Structure）”窗口和下拉菜单中选择富文本样式行（Rich Text Style Row）作为行结构体。



在UMG的“细节（Details）”面板或内容浏览器中双击新建的数据表以将其打开。在数据表编辑器中，我们首先创建一个新行，命名为“Default”。该行表示默认状态下的文本，如果某文本没有显式设置为其他样式，则富文本块会自动使用该文本。




探索新创建的Default行下面的不同选项，并设置您想要用于设置字体类型、字号、字型的基准样式。设置好选项后，单击加号（+）按钮添加一个新行，然后在行名称（Row Name）文本框中输入名称来再添加一些样式。

回到分配了数据表资源的控件蓝图，通过“细节（Details）”面板在富文本块的文本（Text）部分中添加一些文本。



在UMG工具栏中，可能需要单击“编译（Compile）”按钮以在富文本块控件中显示该文本。



这里的文本使用的是刚才设置的Default行。要应用您在数据表资源中创建的其他样式，请使用以下格式来对换行的文本应用样式：

<StyleName>Text</>



在该示例中，我们将要继承数据表资源中用于Rich所在行的样式的文本包括在标记中。这样，该文本现在就会继承我们所设置的属性，在本例中，为橙色文字带有黑色轮廓。

需要记住的是，该样式标记不需要任何前缀或后缀（如RichText.*）就能发挥作用，而且不区分大小写。


使用装饰器

现在我们已经能够对富文本块中的文本应用不同的样式，但如果我们想要插入一些其他文本该怎么办呢？我们可以使用装饰器设置自己的标记来实现这一目的。这些标记让我们能够使用Slate来无缝渲染文本中的任何内容。

为便于您操作，我们包含了一个示例RichTextBlockImageDecorator类，通过它，您可以使用装饰器类向富文本块添加图像。与富文本样式行的内置样式一样，富图像行结构体定义想要在内嵌文本中支持的所有图像。




现在，我们继续扩展提供的RichTextBlockImageDecorator类，让子类指向刚刚创建的富图像行数据表。最简单的方法是创建一个新的蓝图类，选择提供的RichTextBlockImageDecorator类作为父类，打开蓝图并将数据表指定给该类的图像设置（Image Set）属性。

请注意，在4.20中，图像装饰器不会出现在父类列表中，但将在4.21中提供支持。就目前来说，可以将其扩展为C++类，并在C++文件中指定您的数据表，或将Blueprintable添加到标头顶部处的UCLASS宏，以便将子类扩展为蓝图。

在设置了装饰器后，将其添加到富文本块的装饰器类数组，并使用以下标记插入表中的图像：

<img id="ImageNameFromTable"/>

您可能需要单击工具栏中的编译（Compile）按钮以使更改生效。




添加新的装饰器

虽然我们提供了RichTextBlockImageDecorator类作为示例，但富文本块最强大之处在于，您现在可以定义自己的自定义装饰器来充分利用Slate，让您可以在文本中内嵌任何内容。为此，您需要编写两个类：URichTextBlockDecorator和FRichTextDecorator。设置好这两个类之后，您就能够使用UMG中的富文本块控件，通过DecoratorClasses数组向任何富文本块添加装饰器。您还能够使用标记通过装饰器解析文本。

URichTextBlockDecorator定义UObject类，这个类可以向编辑器的“细节（Details）”面板公开属性。您至少需要实现CreateDecorator，它应该将SharedPtr返回到您将创建的FRichTextDecorator实例来执行所有繁重的任务。您还可以在这里实现任何属性和效用函数，这样设计师就可以将您的装饰器子类创建为蓝图以用于传递所需的任何数据。您可以回忆一下，RichTextBlockImageDecorator定义了数据表属性，这样我们就能在图像表中进行传递。您想要在蓝图中修改的任何内容都应该存在于UObject上。

FRichTextDecorator负责对标记进行实际的解析/替换，并需要实现两个函数。第一个函数Supports将通过FTextRunParseResults获得标记的内容，并根据装饰器是否实际负责处理这个标记来返回true或false。Supports将针对DecoratorClasses数组中的每个装饰器进行调用，然后如果没有找到用来处理标记的装饰器，再回退以将标记显示为普通文本。调用第二个函数CreateDecoratorWidget是为了通过替换支持的标记来实际构造和返回控件。如果您的标记需要包含任何文本或元数据，可访问FTextRunInfo。

以RichTextBlockImageDecorator类为例，我们定义SRichInlineImage控件并在其中填充了传递到UObject包装类的数据表中的正确图像，然后将其作为CreatorDecoratorWidget的返回值进行传递。


在项目中使用富文本

我们已经介绍了如何使用富文本块内置功能以及如何编写装饰器类以添加您自己的功能。现在，如何将这个功能运用到您的工作流程中呢？

如果您发现每次创建富文本块时都会设置包含同一组装饰器的装饰器类数组，那么拥有一个带有一组默认装饰器的富文本控件子类可能很有用。如果您需要更多的控制权，SRich文本块还支持自定义解析器和marshaller。您可以编写自己的解析器来更改如何检测和处理标记的规则，使用自定义marshaller可以自行控制文本在控件中的布局方式。

虽然在所有项目文本区域使用富文本块十分方便，但在搜索标记时解析文本会引起相关的性能成本。如果性能是不能忽视的问题，则在不需要使用富文本块的额外功能时，需要继续使用普通文本块。

富文本块控件带来了很多可能性，让您可以对项目文本应用有趣的效果。通过它，您可以应用简单的效果，例如文本高亮和手柄按钮，或者更具互动性的效果，例如内嵌按钮和loot链接，而通过装饰器，您可以添加任何自己能想象到的效果！