Unity 文本解决方案：富文本插件TextMeshPro

╰半橙微兮° 2023-02-22 14:58 9阅读 0赞

*  TextMeshPro是Unity收购的一个第三方插件，现在已经自动内置到编辑器中，只要使用一次就会自动导入到工程。
 *  TextMesh Pro是Unity的终极文本解决方案。它是Unity的UI Text和Text Mesh网格的完美替代品。
 *  功能强大，易于使用，TextMesh Pro使用先进的文本渲染技术，以及一套自定义着色器;提供实质性的视觉质量改进，同时给用户提供难以置信的灵活性，当涉及到文本样式和纹理。
 *  TextMesh Pro提供了对文本格式和布局的改进控制，具有诸如字符、单词、行和段落间距、字距、对齐文本、链接、30多个可用的富文本标记、支持多种字体和精灵、自定义样式等功能。
 *  由于TextMesh Pro创建的几何图形和Unity的文本组件一样，每个字符使用两个三角形，所以这种改进的视觉质量和灵活性并不需要额外的性能成本。
 *  优化桌面和移动设备，TextMesh Pro带来了最先进的文本渲染统一

组件介绍：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNjcyNzcw_size_16_color_FFFFFF_t_70][]

Main Setting：  
Font Asset：TMP的字体资源。  
Materail Preset：字体用到的材质  
Font Style：字体风格，粗体，斜体，下划线等等  
Auto Size：自动适应大小(和Text一样)  
Vertex Color：字体颜色  
Color Gradient：勾选之后会出现渐变色的控制参数  
Override Tags：勾选之后富文本的<color>标签会失效  
Spacing Options：字体、单词、行、段落间距。单词的判定依据是空格，段落的判定依据是换行。  
Alignment：对齐方式  
Wrapping：是否自动折行  
Overflow：溢出方式  
    Overflow：可以溢出

Ellipsis：超出时将超出部分用...替代

Truncate：无法溢出

Page：将文本内容分成很多页可以通过切换页签id来切换内容

Linked：可以关联一个其他的TMP组件多余部分将显示在新的组件里面(实际测了下没有起效果)

Masking：不明

ScrollRect：不明

Extra Setting：  
Margins：上下左右边界调整  
Geometry Sorting：不明  
RichText：是否支持父文本  
Raycast Target：是否支持UI事件响应  
Parse Escape Characters：是否解析转义字符  
Visible Descender：不明  
Sprite Asset：关联的表情资源文件(如果没有设置，在使用图文混编的时候会自动启用系统默认的表情资源)  
Kerning：是否开启自动紧缩。有些字母排列在一起的时候会显得比较空如T e，开启后会显示为Te。  
Extra padding：官方文档说的是某些比较小的字体在排版时可能被裁剪掉，开启该选项可以防止这个现象。目前没有遇到过这个情况，如果以后遇到了就开启试试吧。  
轮廓、阴影、外发光：  
以上这些特性由shader实现，所以使用这些特性需要通过调整材质面板对应的参数

轮廓：

outline：外轮廓参数，其中：【Color】是轮廓颜色。【Thickness】决定了外轮廓的厚度。【Texture】则会将texture的纹理采样之后和color混合输出最终颜色，这里的texture应该设置为repeat模式。因为speed参数可以使得外轮廓有一个uv流动的效果，可以用来做流动的外轮廓，如果用clamp就没有流动效果了。  
Face：控制内部的表现(外轮廓以内的字体部分)，和outline联合使用，其中：【Color】是内部颜色，该颜色会合字体顶点色(组件面板的Vertex Color)叠加在一起作为最终字体的颜色。【Softness】是会控制外轮廓的柔和程度。【Dilate】控制的是内部区域的大小。texture同outline，不过纹理会叠加到内部区域。  
阴影：

轮廓参数中有一个勾选框，可以开启和禁用该特性。  
【Color】阴影颜色，【Offset】阴影的偏移量，【Dilate】影响阴影大小，【Softness】柔和程度。  
外发光：

【Color】外发光颜色，【Offset】内外交界处的偏移为整数则沿法线向外偏移，【Inner】外发光向内部扩散的距离，【Outer】外发光向外部扩散的距离，【Power】强度。  
表情混编使用：  
      我们平时开发游戏的时候经常会遇到图文并列的情况。比如一个上商店界面，需要在购买按钮上展示消耗的货币图标和数量。一般处理的时候都是做两个预制件，一个处理图片，一个处理文字，在用布局组件控制排版。比较繁琐。。。

有了TMP的混编功能只需要一个TMP组件加一个带富文本的字符串就可以实现功能了。如string costtxt = string.format("<sprite=index> X \{0\}", costnum)。极大的简化了工作量，像一些图文混编的聊天功能也可以用TMP组件轻松的实现。ps:其中index是关联的表情资源(Extra Setting里的Sprite Asset)的序号(这个可以看表情制作这块)。

下面是一个使用的参考:

表情资源制作：  
1.导入需要用于制作表情的图片到unity中，将Sprite Mode设置为Multiple。

2.点击sprite Editor将每一个表情分割出来。(图是百度随便扒的)

为了使文字和图片对齐，中心点设置为左下。  
3.保存退出sprite编辑界面，右键选中处理好的图片，依次选Create->TextMeshPro->Sprite Asset即可生成Sprite Asset。

4.将生成好的Sprite Asset拖到TMP组件中使用。

5.编写富文本

6.最终效果

中文字体制作：  
字体资源的制作有很多种方式，这里只介绍一种添加中文支持的方式(因为我在自己的项目中只用了这一种 ^-^! )。

1.在window->TextMeshPro里面打开Font Asset Creator

Source Font File中添加支持中文的字库  
Character Set 设置为Custom Characters(自定义字符集)  
Custom Character List中添加需要用到的中文字符，点击保存就得到支持中文的TMP字体了。  
\*\*\*这里有一个内存优化点

Atlas Resolution 决定了生成字体图片的大小

Samping Point Size 可以设置为自动尺寸和自定义尺寸两种模式

如果设置为自动尺寸则生成的单个字符会自动缩放以占满整个图片

如果设置为自定义尺寸则可以指定游戏中使用最多的那个尺寸大小，然后根据最终所有字符占用的尺寸大小来调整Atlas Resolution，以避免占用多余的内存。

关于性能：  
关于性能有两个点可能要注意一下。

1.使用图文混编图片和文字会分别占用一个dc(因为二者使用的材质信息不同)。因此TMP中混编的图片同样要注意不要和字体发生重叠，否则就会打断文本自身的合并处理增加dc。如果有重叠的时候就将带图片的放在上层(貌似同一个组件中图片的层级会默认比文字高)，这样文字和文字之间dc仍然是合并的。

2.TMP组件支持的外发光，光照，阴影这些特性都是在shader中实现的，如果全开的话势必会增加渲染的开销。建议根据项目情况去选择不同的shader来生成字体，比如插件自己提供的mobile里的shader(mobile里的shader不仅仅是删除了部分功能如光照外发光，本身对外轮廓，阴影的算法也做了简化)。如果使用需求明确的话，也可以根据需求去裁减修改插件提供的shader。总之够用就行。  
———————

引用：

[https://zhuanlan.zhihu.com/p/84700094][https_zhuanlan.zhihu.com_p_84700094]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNjcyNzcw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200718165444643.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNjcyNzcw,size_16,color_FFFFFF,t_70
[https_zhuanlan.zhihu.com_p_84700094]: https://zhuanlan.zhihu.com/p/84700094