TextMeshPro 使用及性能

目录

TextMeshPro：

组件介绍：

Main Setting：

Extra Setting：

轮廓、阴影、外发光：

表情混编使用：

表情资源制作：

中文字体制作：

关于性能：

---

TextMeshPro：

ps：第一次写博客，排版和表述可能有不尽人意的地方请多多包涵。另外受个人能力限制，可能有一些不正确的地方，也请大家帮忙指正。如果能帮到其他开发同学就真的太棒了 ^ _ ^ 

组件介绍：

 

Main Setting：

• Font Asset：TMP的字体资源。
• Materail Preset：字体用到的材质
• Font Style：字体风格，粗体，斜体，下划线等等
• Auto Size：自动适应大小(和Text一样)
• Vertex Color：字体颜色
• Color Gradient：勾选之后会出现渐变色的控制参数
• Override Tags：勾选之后富文本的标签会失效
• 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(" 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

 

1. Source Font File中添加支持中文的字库
2. Character Set 设置为Custom Characters(自定义字符集)
3. 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。总之够用就行。