Unity UGUI系列九 Text TextMeshPro

参考
[专栏精选]TextMeshPro插件
TextMeshPro使用说明
TextMeshPro中文字体生成和字体材质更换
新一代Unity 文本组件 Text Mesh Pro 系列教程
【Unity学习笔记】TextMeshPro文档(一)
【Unity学习笔记】TextMeshPro文档(二)
【Unity学习笔记】TextMeshPro文档(三)
【Unity学习笔记】TextMeshPro文档(四)
【Unity学习笔记】TextMeshPro组件官方文档翻译

Unity原生的Text组件有一个毛病，只要文本放大字体放大就会有毛边或锯齿，一个更好的解决方案是用TextMeshPro替代ugui中的Text组件。

image.png

TextMeshPro是Unity收购的一个第三方插件，可以解决文字渲染的很多问题，可以替换UI Text。比如UI Text就没办法对文字加入特效。

比起UGUI的Text控件，Textmesh pro有着许多优势。它使用Signed Distance Field（SDF）即有向距离场作为主要的文本渲染管线，在不同的分辨率和不同的位置下都能渲染出清晰的文本，而且它通过不同的着色器来实现描边，阴影，发光等效果，表现更出色的同时性能也更好。

但是，Textmesh pro使用时需要制作字体文件即Font Asset，对于英文数字即字符只需制作ASCII的文件即可，但是对于中文，如果我们的文字需要动态生成且不可控，那么就需要考虑所有可能需要的文字，生成的字体文件就会很大，不适合手游等要求安装包小的项目使用。所以建议只在可确定中文的UI和ASCII包含字符上使用Textmesh pro。

https://docs.unity.cn/cn/2019.4/Manual/com.unity.textmeshpro.html
TextMesh Pro 是 Unity 的最终文本解决方案。它是 Unity UI Text 和旧版 Text Mesh 的完美替代方案。
功能强大且易于使用的 TextMesh Pro 使用高级文本渲染技巧以及一组自定义着色器；它大幅改进了视觉质量，同时为用户创建文本样式和纹理提供了难以置信的灵活度。
TextMesh Pro 能够更好地控制文本格式和布局，提供了字符、单词、行和段落间距调整、字距调整、文本对齐、链接、超过 30 种富文本标签、多种字体和精灵支持、自定义样式等功能。
强大的性能。由于 TextMesh Pro 创建的几何体与 Unity 的文本组件一样，每个字符都使用两个三角形，因此这种改进的视觉质量和灵活性不会带来任何性能成本的损失。

一、添加TextMesh Pro

3D和UI都可以添加

首次添加会弹出导入必要资源面板，点击IMPORT后，项目Assets文件夹下会生成TextMesh Pro文件夹

image.png

二、创建字体文件

UGUI的Text使用了一张字体贴图，Unity把所有需要显示的字符放到了一张图集中，字符的形状是通过像素定义的。当我们放大时，像素不够用就会出现文字变模糊的情况。

TextMesh Pro的Text使用了不同的技术来渲染文字，叫做Signed Distance Field（后面简称SDF，对该技术感兴趣的同学可以自行搜索一下）。和UGUI类似，这个技术同样需要将字符放到一个图集中，但是不使用像素来代表字符的形状，而使用SDF技术来生成字符的形状。使用这种技术字符在渲染时不会因为缩放而造成字符模糊的情况，总是能够准确的渲染字符的边缘。

TextMesh Pro无法像UGUI Text那样使用动态字体，因为TextMesh Pro需要对字体进行预处理来计算SDF，这部分计算非常耗时。这对于英文字体来说影响不大，一个字体文件或一张贴图包含的信息都很少，但是对于字符非常多的语言如中文就影响很大。所以对于中文环境建议如下：

• 对于游戏中显示的文字可以使用TextMesh Pro的SDF字体，提高显示效果和特效处理。
• 对于游戏中的输入框建议使用UGUI自带输入框，使用动态字体。

1.字体下载

推荐https://www.zaosj.cn/

image.png

2.属性设置

image.png

• Source Font File：原字体文件，这里的文件可以是微软提供给我们的也可以是自己下载的。其中微软提供给我们的字体文件地址在：C:\Windows\Fonts

• Sampling Point Size：选择采样点一般设置为auto

• Padding：图集中每个字符之间的间隔，以便在渲染时能区分他们的边缘。此外padding也用于文字的特效，所以不宜过小；但是也不宜过大，过大会造成更大的atlas分辨率或者atlas上能承载的字符更少。对于512*512的图集，padding为5通常比较合适。

• Packing Method：打包模式，有最快和最优两种。Fast 可能计算出不是最大的字号，但是计算速度会快一些，Optimum 可以计算出图集上能承载的最大的字号。通常在测试设置时使用Fast，在最终打包时使用Optimum。

• Atlas Resolusion：图集分辨率，中文字体一般用最大的8192*8192。使用SFD字体时，更高的分辨率会产生更精细的渐变，从而产生更高质量的字体。对于大多数字体，仅包含所有ASCII字符时，512x512纹理分辨率足够用。当需要支持数千个字符时，不得不使用大纹理。但即使在最高分辨率下，也可能无法满足所有要求。在这种情况下，可以通过创建多个字体资源来拆分字符。将最常用的字符放在主字体资源中，将其他字符放在后备(fallback)字体资源中。

• Character Set：字符设置，这里选择字符的来源，一般我们选择来源自文字并将字库txt文件拖至这里。注意要包含空格字符，除非确定你不需要它。
  

  image.png
  • ASCII 大小写字母+数字+常见符号
  • Extended ASCII 包含所有的ASCII字符
  • ASCII lowercase 小写字母+数字+常见符号
  • ASCII uppercase 大写字母+数字+常见符号
  • Numbers + Symbols 数字+常见符号
  • Custom Range 使用十进制来制定字符的编码范围，可以使用减号和英文逗号来指定范围，如32-126,161-255。使用自定义字符范围时，可以直接引用一个SDF字体，使用这个字体中的字符集
  • Unicode Range(Hex) 使用16进制来制定字符的编码范围，可以使用减号和英文逗号来指定范围，如20-7E,A1-FF
  • Custom Characters 自定义字符，直接输入对应的字符
  • Characters from file 从外部文件中导入字符

• Character File：字库文件

• Font Style 你可以选择几种不同的字体样式。这些设置仅适用于位图字体。你可以通过shader配置SDF字体的样式，可以选择粗体、斜体、粗体加斜体和描边，也可以控制粗体和轮廓的强度。

• Render mode：距离场模式创建SDF纹理需要与SDF shader一起使用。字符是在高分辨率下采样来创建良好的渐变。16x是默认值并且足以用于大多数情况。32x生成较慢但可以让复杂或小字符产生更好的质量。其他模式直接将字符渲染为位图，以便与位图字体一起使用。Raster模式不使用抗锯齿，Smooth模式使用抗锯齿。两者都有一个Hinted模式，它将字符像素与纹理像素对齐以获得更清晰的结果。

  
  image.png

这些都设置好之后，就可以点Generate Font Atlas按钮，然后保存成.asset文件，这就是Font Asset所需要的文件了。

image.png

三、设置全局默认字体

如果生成的字体图集缺少部分字符，每当输入这些字符时，TextMesh Pro会使字符回退到默认字形，你可以在Edit > Project Settings > TextMesh Pro Settings修改该字形。

你也可以设置一个或多个字体资源，当字符无法在主要图集中找到时，TextMesh Pro会将字符回退为这些资源中的字符。出于优化目的，可以使用高分辨率的主要字体图集，而所有回退图集则使用较低分辨率。

image.png

四、使用SDF字体

image.png

1.Enable RTL Editor

可以勾选Enable RTL Editor单选框转换为从右到左的文本排列方式（相当于把字符的显示顺序颠倒，abc显示为cba），文本在显示前会将字符顺序颠倒过来。勾选后，Inspector面板上会多出一个RTL Text Input输入框，可以直接编辑已经反顺序的文字。

2.B I U S ab AB SC

前俩选项是粗体和斜体，它们的外观依赖字体资产（Font Asset）。

接着那俩是underlie和strikethrough表示下划线和删除线，效果就是在字体下面或者中间加一条横线。

最后三是用来设置字母大小写的，功能分别是：小写，大写，和小写字母尺寸一样大的大写

前四个可以随意选择，最后三同一时刻只能选一个。

3.Font Size

font size决定字符的大小，你可以使用固定大小，也可以使用自适应大小。

当auto size勾选时，可以指定字符的最小和最大值。Text Mesh Pro将会自动计算，找到最适合的大小，确定的大小会显示在Font Size输入框中。

WD%
WD%包含一个百分比值，表示控制最大的字符的宽度减少百分比。这会水平的挤压字符，使它们更高，通常只适用于数字。

你还可以通过修改Line来减少行高从而适应更大的字体大小。

当勾选了auto size，会花很多时间去计算字符合适的大小。所以只在必要的时候勾选它，并且要避免对频繁改变的动态文字使用此项。如果你的文本从不改变，你可以勾选此项，记住计算出的字体大小，然后取消勾选，并手动填入刚刚计算出的值。

4.Vertex Color Color Graident

Vertex Color用于为文本着色。除了使用统一颜色外，你也可以勾选Color Gradien从而对文本使用颜色渐变。

通过Color Mode，我们可以切换渐变颜色的个数）Four Corners Gradient表示为每个字符的四个角各选择一个颜色，然后进行渐变。可以为每个TextMesh Pro物体单独手动设置，也可以通过指定gradient preset来快速设置。

这里的渐变颜色会与前面的Vertex Color相乘，所以如果想看原始渐变，就让Vertex Color颜色为白色。

如果勾选了override tags，那么rich text的颜色会被忽视。

5.Spacing Options

字符之间、单词之间、行之间、段落之间的间距都可以修改。段落由换行符确定。你可以为每个TextMesh Pro单独设置，而不用调整字体资产（Font Asset）。

这些设置也可以通过富文本（rich text）修改。

6.Alignment

文本对齐方式，分成了水平和垂直两组。

7.Wrapping & Overflow

image.png

当Wrapping设为Enabled，这可以确保文字不会显示到文本显示区域的外面（就是自动换行嘛）。对于单词也会正常换行，除非一个单词的就已经比一行的宽度要长。

overflow属性决定文本比显示区域长的情况。

• overflow模式表示文本会延申到显示区域外面。
• Elipsis模式会把显示区域外的文字裁切掉（不显示）并在显示区域内文字末尾加上三个点…来表示有文字省略了。
• Masking模式将会将文本按类似overflow的方式渲染，但是所有在显示区域外的文字会被shader隐藏，这只对UI物体有效，对3D物体无效。Scroll Rect也有类似的用途，但不推荐使用。
• Truncate模式就是简单的把显示区域外卖的文字裁切掉。
• Page模式会将文本划分为几页，你可以选择要显示哪一页。由于页面是单独显示的，所以垂直对齐按每页进行。也可以使用富文本手动插入分页符

8.Horizontal Mapping/Vertical Mapping 这部分没搞懂……

可以使用支持其他纹理的着色器将图像映射到文本顶部。UV映射选项控制纹理在文本上拉伸的方式。每个维度（横、竖）可以使用不同的设置。

五、图文混排

参考
Unity - TextMeshPro图文混排
TextMesh Pro 的图文混排功能：插入自定义表情图
https://gitee.com/skode/TextInlineSprite 这个有动态表情，也有静态表情

如果找不到表情素材，可以用这个D:\UnityProject\Hello\Assets\TextMesh Pro\Sprites\EmojiOne.png，或者是TextMesh Pro\Examples & Extras\Sprites\Default Sprites.png

1.方案1 不借助任何工具，直接生成SpriteAssets

该方案的缺点：不能使用 Unicode 去赋值 Text中的图文混排。步骤如下：

• 准备好一张图片，修改TextureType为Sprite(2D and UI)，Sprite Mode 为 Multiple , 在SpriteEditor切割好。

• 然后在Project视图中选中该图片 右键选择 Create -> TeshMeshPro -> SpriteAsset , 会自动生成 ** SpriteAsset资源**

  
  image.png

• Editor->Project Settings->TextMesh Pro，可以看到Path 必须是Resources路径下的

  
  image.png

• 把字体资源挪到Resources路径下，重新设置一下

  
  image.png

• 可以用了，不过图片是歪的

  
  image.png

• 选择表情Asset资源，展开Sprite Glyph Table调整一下

  
  image.png
• 调用默认图集中的图：

<sprite=9>//默认图集+索引
 
<sprite name="happy"> //默认图集+图名

调用指定图集中的图：

<sprite="MySprites" index=9> //指定图集+索引
 
<sprite="MySprites" name="happy">//指定图集+图名

• 叠加颜色

<sprite=9 tint=1>//使用文字的叠加颜色/透明度。文字叠加的颜色同样被应用到图片上。tint=0 不叠加 tint=1 叠加

<sprite=9 color=#ffffff80>//使用特定的颜色/透明度 ，不随文字变化

2.方案2 使用TexturePackerGUI工具，直接生成对应文件制作SpriteAssets

• 工具下载地址 https://www.codeandweb.com/texturepacker

• 步骤参考原文，这里展示一下支持Unicode

  
  image.png
  image.png