UI 工具包使用 TextCore 渲染文本,这是一种基于 TextMesh Pro 的技术。TextCore 支持高级样式功能,能够以各种点大小和分辨率清晰渲染文本。它利用了有符号距离场 (SDF) 字体渲染,即使经过变换和放大,也可以生成看起来清晰的字体资产。
此示例将演示如何在__ UI__(即用户界面,User Interface)让用户能够与您的应用程序进行交互。Unity 目前支持三种 UI 系统。更多信息
See in Glossary Builder 中设置文本样式,创建和应用静态和动态字体资产,使用富文本标签和自定义样式表来设置文本样式,以及创建“用户界面工具包文本设置 (UITK Text Settings)”资产来管理面板的文本设置。
注意:出于演示目的,本指南使用运行时 UI。创建字体资产和样式表的说明也适用于编辑器 UI。但是,无法在当前版本中更改编辑器 UI 的默认“用户界面工具包文本设置 (UITK Text Settings)”。
本指南适用于熟悉 Unity 编辑器、UI 工具包和 C# 脚本的开发者。在开始之前,请熟悉以下内容:
从运行时 UI 开始,然后创建用于管理面板文本设置的“用户界面工具包文本设置 (UITK Text Settings)”资产。您还可以创建一个 Resources 文件夹和子文件夹,用来存储字体资产和自定义样式表。
Assets 文件夹中,创建一个 Resources 文件夹。Assets\UI Toolkit 文件夹,然后选择创建 (Create) > UI 工具包 (UI Toolkit) > 文本设置 (Text Settings) 以创建UITK Text Settings.asset。UITK Text Settings.asset 的检视面板窗口将显示字体资产、文本样式表资产、精灵资产和颜色渐变预设的默认路径名称。Resources 文件夹中,创建名为 Fonts & Materials 和 Text Style Sheets 的两个文件夹。
使用 UI Builder 将开关 (Toggle) 文本设置为粗体和斜体,并且字体大小为 12px。有关更多信息,请参阅使用 USS 设置文本的样式。
SimpleRuntimeUi.uxml 可在 UI Builder 中打开。
创建静态字体资产并将其应用于按钮控件。对于静态字体资产,不需要在构建中包含源字体文件。但是,必须为按钮的显示文本中的所有字符生成图集。显示文本为 This is a Button,将在文本中添加 *,因此为 TBhinostua* 生成图集。
从 Google Fonts 下载 Lato 字体包。
解压缩字体包文件,将 Lato-Regula.ttf 放在项目的 Assets 文件夹中。
在字体文件的检视面板 (Inspector) 窗口中,确认以下内容:
在项目 (Project) 窗口中,右键单击 Lato-Regula.ttf,然后选择创建 (Create) > 文本核心 (Text Core) > 字体资产 (Font Asset) > SDF。这将创建一个名为 Lato-Regula SDF.asset 的动态字体资产。
在 Lato-Regula SDF.asset 的检视面板 (Inspector) 窗口中,将图集填充模式 (Atlas Population Mode) 设置为静态 (Static)。
单击更新图集纹理 (Update Atlas Texture)。
在字体资产创建工具 (Font Asset Creator) 窗口中的字符集 (Character Set) 列表中,选择自定义字符 (Custom Characters)。
在自定义字符列表 (Custom Characters List) 框中,输入 TBhinostua*。
单击生成字体图集 (Generate Font Atlas)。
保存更改。
将 Lato-Regula SDF.asset 放在 Assets\Resources\Fonts & Materials 文件夹中。
双击 SimpleRuntimeUi.uxml 可在 UI Builder 中打开。
在按钮控件的检视面板 (Inspector) 窗口中,选择文本 (Text) > 字体资产 (Font Asset) > Lato-Regula SDF。
创建动态字体资产并将其应用于 TextField 控件。对于动态字体资产,必须在构建中包含源字体文件。将源字体文件直接导入为字体设置的路径。
从 Google Fonts 下载 Roboto 字体包。
解压缩字体包文件,将 Roboto-Regular.ttf 放在项目的 Assets\Resources\Fonts & Materials 文件夹中。
在字体文件的检视面板 (Inspector) 窗口中,确认以下内容:
右键单击 Roboto-Regular.ttf,然后选择创建 (Create) > 文本核心 (Text Core) > 字体资产 (Font Asset)。这将创建一个名为 Roboto-Regular SDF.asset 的动态字体资产。
双击 SimpleRuntimeUi.uxml 可在 UI Builder 中打开。
在 TextField 控件的检视面板 (Inspector) 窗口中,选择文本 (Text) > 字体资产 (Font Asset) > Roboto-Regular SDF。
使用富文本标签在标签控件中设置文本样式。
注意:在当前版本中,TextField 不支持富文本标签。
SimpleRuntimeUi.uxml 可在 UI Builder 中打开。This is a <font-weight=700><size=2em><color=#FF0000>*Label*</color></size></font-weight>。这使得单词 Label 变大、变红、变粗,并在一,两侧均带有星号。标签文本在视口窗口中如下所示:
要将 Label 的样式应用于 Button,请创建一个自定义样式表,并将该样式应用于这两个单词。
右键单击 Assets\Resources\Text Style Sheets 文件夹,然后选择创建 (Create) > 文本核心 (Text Core) > 文本样式表 (Text StyleSheet)。这会在“用户界面工具包文本设置 (UITK Text Settings)”资产中设置的路径中创建一个 Text StyleSheet.asset。
在 Text StyleSheet.asset 的检视面板 (Inspector) 窗口中,执行以下操作:
ExampleStyle。<font-weight=700><size=2em><color=#FF0000>*。*</color></size></font-weight>。在 UITK Text Settings.asset 的检视面板 (Inspector) 窗口中,从默认样式表 (Default Style Sheet) 列表中选择文本样式表 (Text StyleSheet)。
双击 SimpleRuntimeUi.uxml 可在 UI Builder 中打开。
在标签控件的检视面板 (Inspector) 窗口中,将文本 (Text) 更改为 <s>This is a <style="ExampleStyle">Label</style>。
确保选中启用富文本 (Enable Rich Text)。
在按钮控件的检视面板 (Inspector) 窗口中,将文本 (Text) 更改为 <s>This is a <style="ExampleStyle">Button</style>。
确保选中启用富文本 (Enable Rich Text)。
进入运行模式并在运行时 UI 中检查文本。
在文本字段中,输入一些随机字符。对于动态字体资产,字体图集是在文本字段中输入文本时动态生成的。
在项目的 Assets\Resources\Fonts & Materials 文件夹中,选择 Roboto-Regular SDF.asset。
在 Roboto-Regular SDF.asset 的检视面板 (Inspector) 窗口中,选择更新图集纹理 (Update Atlas Texture) 以打开字体资产创建工具 (Font Asset Creator) 窗口。如果图集窗口被隐藏,请将其展开。您应该会在图集窗口中看到输入的字符。