Unity TextMeshPro介绍

franciscochonge · 发表于 2022-12-30 11:47

原文翻译自https://www.kodeco.com/22175776-introduction-to-textmesh-pro-in-unity
比较专业的外文教程网站

你有没有看过Unity项目中的UI，然后想：“为什么这看起来这么简单？”许多游戏都有一个看起来很棒的UI，但仍然使用默认的Unity文本。真无聊！
如果你想找到一个解决文本乏味的解决方案，那就只看TextMesh Pro。在本教程中，您将创建一个怪异的基于文本的冒险游戏，其中文本样式和格式将根据故事中发生的情况进行更改。在您进行此次冒险时，您将了解：

1.TextMesh Pro的基本使用和样式选项。
2.使用富文本标记。
3.如何创建字体资源。
4.如何自定义材质预设。

完成后，你将看到TextMesh Pro如何为你的项目提供最漂亮的文本，无论你的需求是什么样式。

image.png

注意：本教程假设您熟悉Unity开发，但不需要任何编码知识。

https://cloud.189.cn/t/e6nuUnm6jQVj (访问码:ve5t)
下载初学者项目。
在Unity 2020.3或更高版本中打开项目。
浏览资产/RW以查找此项目中使用的资产。子文件夹包含以下内容：
字体：标准字体文件、TextMesh Pro字体资源和字体预设。
场景：基于文本的冒险游戏的初始场景。
脚本：在基于文本的冒险游戏中推进屏幕的助手脚本。
精灵：文本冒险游戏中使用的图像和图标。
纹理：将在教程中应用于字体的纸板纹理。
现在您已经了解了该项目，是时候开始使用TextMesh Pro了。

如果没有看到TextMesh Pro工具和组件，请尝试在Package Manager中启用包。要执行此操作，请导航到Window Package Manager安装
什么是TextMesh Pro？

在Unity游戏引擎的早期，向游戏添加文本的一种方法是使用TextMesh。与Unity一起预先打包的TextMesh使用位图字体在屏幕上显示文本。
TextMesh提供了一些基本的样式和配置选项，但您对可以使用它创建的内容非常有限。由于文本是使用位图渲染的，因此当放大时，它开始显得模糊。此外，当屏幕上同时有许多TextMesh对象时，游戏的帧速率会下降。

image.png

为了弥补TextMesh中样式选项的不足，Stephan Bouchard创建了一个名为TextMesh Pro的工具，并在Unity资产商店出售。
TextMesh Pro包含在Unity中高效运行的强大样式工具。该工具非常有用，2017年，Unity收购了TextMesh Pro并聘请了Stephan Bouchard。从那以后，他们在所有版本的Unity中都包含了TextMesh Pro。
使用TextMesh Pro有很多原因。前三名是：
它看起来很棒：文本无论大小都很好看。
它是无限可配置的：你可以让你的文本看起来像你想要的那样。
易于使用：TextMesh Pro内置在Unity游戏引擎中。样式选项是直观的，因此您可以快速学习它们。
TextMesh Pro如何工作？

在本教程中，您将了解如何设置和配置TextMesh Pro的每个部件。但首先，这里有一个高层次的概述，帮助您在前进过程中将事情拼凑起来。
TextMesh Pro的核心是字体资产。您可以从标准字体文件创建字体资源。使用该字体的所有TextMesh Pro对象都将引用该字体资源。
每个字体资源生成一个纹理图集，其中包含每个字体中的所有字符。创建的材质预设和绘制到屏幕上的文本都引用了单个纹理图集。

image.png

TextMesh Pro使用有符号距离场在屏幕上渲染文本。此功能的工作方式不在本教程的范围内，但其结果是，无论文本的相对大小和距相机的距离如何，文本都会显得清晰。传统位图纹理在绘制距离较近且尺寸较大时显得模糊。
在开始使用TxtMesh Pro之前，需要注意的最后一点是，有两种类型的TextMesh Pro组件，TextMeshPro和TextMeshProUGUI。TextMeshPro与MeshRenderer一起使用。它最好与应该存在于世界空间中的文本一起使用，比如可以添加到场景中的游戏内标志。

image.png

TextMeshProUGUI与CanvasRenderer和Canvas系统一起工作，最适合屏幕空间中存在的文本。它取代了内置的 Unity UI.Text组件。

除了它们的预期用途外，这两种类型的组件之间没有区别——它们共享相同的配置选项。

在本教程中，您将学习如何创建和使用TextMeshProUGUI组件。您可以在 Unity 的TextMesh Pro 用户指南中找到有关使用TextMeshPro组件的信息。
设置启动项目

在Assets/RW/Scenes/IntoTheAttic-Starter打开起始场景。

此游戏以纵向模式运行，因此请将游戏视图的纵横比更改为 9:16。为此，请单击游戏视图中的现有分辨率或宽高比下拉菜单，然后单击+图标以添加新的宽高比预设。将类型更改为纵横比并输入宽度9和高度16。最后，点击确定。现在，游戏窗口将以纵向模式显示。

image.png

使用额外的富文本标签

接下来的几个对话框屏幕使用了一些方便的 Rich Text 标签。

在屏幕14-Knock上，使用align标签将每行左对齐、居中和右对齐。每个新标签都会覆盖前一个标签，因此您不需要任何结束标签。

如何使用对齐富文本标签

在屏幕15-WhosThere上，使用<s>标记划线并使用标记为文本加下划线。<u>

删除线和下划线富文本标签

在屏幕17-Investigate上，使用<uppercase>标签将所有字母设为大写。此外，使用<smallcaps>标签将所有内容设为大写，但之前小写的字母会变小一些。

影响大写的富文本标签

在屏幕19-Climb上，使用<voffset>标签设置垂直偏移。您设置的数值以字体为单位，结束标记结束所有垂直偏移。

垂直偏移富文本标签

这些只是您可以与 TextMesh Pro 一起使用的部分富文本标签。请务必查看TextMesh Pro 文档，了解 30 多个可用富文本标签的完整列表。

但是，文档无法回答一个问题：

什么。是在阁楼吗？
TextMesh Pro 字体资源

到目前为止，您只使用了与起始项目捆绑在一起的字体资源。请记住，字体资源是从标准字体文件生成的，并控制文本使用的字体。

入门项目还包括Dela Gothic One字体，它有一个大字体以最好地显示您的字体自定义。在下一节中，您将学习如何将其转换为字体资源。
创建字体资源

在Window TextMeshPro Font Asset Creator创建一个新的字体资源。将源字体文件设置为DelaGothicOne-Regular。

要从您的字体资源中获得最佳效果，请注意以下属性：

Padding

7

图集分辨率

512×512

将此字体的图集分辨

1024×1024

字符集

ASCII

Redner 模式

SDFAA

字体资源创建设置

设置完这些属性后，单击生成字体图集，您将看到字体图集的预览。您可以展开窗口以获得更大的预览。

TextMesh Pro自创字体图集

保存前，查看输出框。生成器会在此处显示字体文件中丢失的任何错误或字符。

另外，请注意SP/PD比率。生成器通过将Sampling Point Size除以Padding Value来计算。为获得最佳效果，此值应低于 10%。如果高于 10%，则增加Atlas Resolution或减小Padding值，然后重新生成字体，直到该值低于 10%。

字体资产生成的输出

现在，是时候使用您的新字体资产了。单击Save as...并将 Font Asset 保存到Assets/RW/Fonts/Font Assets。激活屏幕21-UpHhere，选择Text (TMP)并将Font Asset设置为DelaGothicOne-Regular SDF。

在 TextMesh Pro 中更改字体资源

自定义 TextMesh Pro 字体资源

到目前为止，您可以看到通过在 TextMesh Pro 中创建字体资源和使用富文本标签来创建精美字体的能力有多大。但是，使用TextMesh Pro Material可以让您进一步自定义文本。

自定义 TextMesh Pro 材质可让您精细控制文本面、轮廓、阴影、斜面、纹理和照明属性。有了这些效果，您可以让您的文本看起来更专业——甚至可以深入到将您的文本变成一件艺术品。

将屏幕22-Crawl设置为示例项目中的活动屏幕。

此屏幕上有两个单独的文本对象，它们将展示 TextMesh Pro 材质的一个重要特征。选择Text (TMP) Top和Text (TMP) Bottom并将 Font Asset 设置为DelaGothicOne-Regular SDF。

现在，仅选择Text (TMP) Top并向下滚动到其Material设置。

转到轮廓部分并使用滑块增加厚度。您会看到文本周围开始形成黑色轮廓。但其他有趣的事情正在发生。

更改 TextMesh Pro 中的默认材质

你注意到了吗？虽然您只修改了Text (TMP) Top的材料属性，但效果也适用于Text (TMP) Bottom。

那是因为两个对象都引用了默认材质。当您更改默认材质时，所有其他引用它的对象都会发生更改。一直回到屏幕21-UpHhere，您会看到同样的轮廓适用于文本。

因此，修改默认材质不是一个好主意。相反，您将为每个所需的文本效果创建单独的材质预设。

现在，将默认材质重置为其原始设置。您将在下一节中学习如何创建材质预设。
创建材质预设

材质预设存储 TextMesh Pro 材质的设置。它们与一种字体相关联，您可以轻松地在为该字体创建的任何材质预设之间切换。

要创建材质预设，请选择要应用材质预设的TextMesh Pro对象。在这种情况下，选择Text (TMP) Top。

点击Material上垂直的三个点图标，然后选择Create Material Preset，在当前Font Asset的目录下新建一个Material Preset。它会自动应用于选定的 TextMesh Pro 对象。

将Outline Thickness设置为0.25以获得微妙的轮廓，使文本从背景中脱颖而出。

创建材质预设

要采取的最后一个重要步骤是正确命名新的材质预设。描述性名称不仅可以帮助您识别材质预设，而且命名不正确的材质预设也不会出现在该字体的可用材质预设列表中。

创建材质预设时，它的名称与其应用的字体资源相同。您必须保留完整的字体资源名称作为材质预设名称的前缀。您可以在该前缀后的名称中附加任何详细信息。

将此材质预设命名为 DelaGothicOne-Regular SDF — Black Outline，因为它是Dela Gothic One字体的简单黑色轮廓。

现在，选择Text (TMP) Bottom并为其创建一个新的 Material Preset。将面颜色设置为棕色，将轮廓颜色设置为浅灰色，厚度为0.25，使文本看起来像布满灰尘的方框。

将材质预设命名为 DelaGothicOne-Regular SDF — Dusty Boxes。

两个具有不同材质预设的文本网格 Pro 对象

注意：为了让事情井井有条，将新的材质预设移到FontPresets目录中。

现在您已经创建了两个材质预设，您可以使用TextMeshProUGUI组件上的材质预设下拉菜单在它们和默认材质之间切换。请记住，如果材质预设的名称没有字体资源作为前缀，它将不会显示在此列表中。

循环使用材质预设

更多材质预设设置

至此，您已准备好创建更多材质预设设置。首先，本教程将引导您完成创建过程，然后您将有机会自己创建一些很酷的效果。
使用纸板预设

将屏幕24-LargeBox设置为活动屏幕。在这里，您将应用硬纸板纹理并将其设置为在字体表面上移动。

选择Text (TMP)并将Font Asset设置为DelaGothicOne-Regular SDF。

然后将水平和垂直映射设置为段落。这会在每个文本段落中的所有字符上拉伸纹理。

纸板材质预设的字体设置

创建一个名为Dela Gothic One-Regular SDF – Cardboard的新材质预设并设置：

面向

资产/RW/纹理/纸板

将X 速度

0.1

轮廓颜色

棕色

轮廓厚度

0.15

纸板材质预设设置

现在，进入播放模式并预览效果。

在 TextMesh Pro 中移动纹理

做得好！
使用斜面预设

现在，尝试通过添加斜面和一些照明设置来创建您自己的效果。首先将26-Stopped设置为活动屏幕。

设置了斜面和照明选项的文本

完成后，或者如果遇到困难，请单击下面的“显示”按钮以查看解决方案。

选择Text (TMP)并将Font Asset设置为DelaGothicOne-Regular SDF。然后创建一个名为Dela Gothic One-Regular SDF – Stopped的新材质预设。

将面颜色设置为红色。

在Underlay部分中，将Offset X设置为1，将Offset Y设置为-1，将 Dilate 设置为1。

在Lighting部分的Bevel下，将Amount设置为1并将Width设置为0.5。根据您的艺术喜好调整局部照明下的值。

“停止”文本的材料预设设置

[/剧透]

你成功了吗？如果没有，这是另一个机会。:]
使用发光预设

首先将28-Skull设置为活动屏幕。

现在，由您自己重新创建发光的轮廓效果。

带有发光轮廓的金色文本

完成后或遇到困难时，请单击下面的“显示”按钮查看解决方案。

选择Text (TMP)并将Font Asset设置为DelaGothicOne-Regular SDF。然后，创建一个名为Dela Gothic One-Regular SDF – Golden的新材质预设。

在Face部分，将Color设置为漂亮的金色，将 Dilate 设置为-0.75。

检查Glow部分并将Color设置为类似的金色，将Offset设置为1，将Outer设置为0.25。

另请注意，可以调低“面部扩张”设置以缩小文本。这使文本在您眼前呈现出实体化的外观，同时使发光的偏移轮廓更加突出。

发光金色字体的材质预设设置

您可以使用下图作为面部和发光颜色的参考。

脸部和发光的颜色设置

现在，通过将字体资源和材质预设添加到其余屏幕来完成故事。然后单击Play并享受您自己的基于文本的冒险游戏！

游戏的最后画面：结束

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

Unity TextMeshPro介绍

本帖子中包含更多资源