[专栏精选]TextMeshPro插件

你好,我是元宇宙大智,让你学Unity快人几步。


小新:“UI里面还有一类组件是用TextMeshPro开头的,这类组件有啥用啊?”
大智:“TextMeshPro是Unity收购的一个第三方插件,可以解决文字渲染的很多问题,可以替换UI Text。比如UI Text就没办法对文字加入特效。”
小新:“哇,可以直接对文字加入动态特效啊?那就不用美术同学辛苦去做了?”
大智:“是的哦”
小新:“那我们今天就来学习一下这个吧!”

TextMesh Pro

TextMesh Pro是Unity中文字渲染的终极解决方案,原本是一个第三方插件,后被Unity收购后并入Unity,现在可以免费使用。

安装

对于Unity2018及以后的版本,可以从菜单栏Window > Package Manager中安装TextMesh Pro。

Unity2018.2及之后的版本TextMesh Pro包会被默认安装到工程中,无需手动安装。

对于Unity2017及之前的版本,可以通过AssetStore(https://assetstore.unity.com/packages/essentials/beta-projects/textmesh-pro-84126)下载导入此插件。

创建

TextMeshPro最基础的用法就是使用它的Text组件来显示文本。有两种使用方法,一种是通过网格MeshRenderer渲染,一种是通过UI系统渲染。

Mesh方式创建方法:Hierarchy的Create菜单(右键菜单)> 3D > TextMesh Pro - Text

UI方式创建方法:Hierarchy的Create菜单(右键菜单)> UI > TextMesh Pro - Text

第一次创建时,会弹出一个提示窗口:

这似乎是您第一次访问TextMesh Pro,因此我们需要为您的项目添加对使用TextMesh Pro至关重要的资源。这些新资源将放置在项目的根目录中的“TextMesh Pro”文件夹。

点击下方的按钮Import TMP Essentials即可。

导入必要资源后,下方的TMP Examples & Extras会变为可点击状态。这些资源是可选导入的,可以点击Import TMP Examples & Extras来导入实例和额外资源。

Examples&Extras包中包含额外的资源和示例,可以更轻松地发现和学习TextMesh Pro的强大功能。这些额外资源将与TMP基本资源放在同一文件夹中。

TextMesh Pro - Text 和 UGUI - Text 的区别

TextMesh和UIText的渲染对比

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

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

创建字体

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

所以对于中文环境建议如下:

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

创建SDF字体文件的过程如下:
1、菜单栏打开Window > TextMeshPro > Font Asset Creator

2、在Font Source中选择你想要创建的字体

3、在Character Set中选择要生成的字符集

4、其他选项根据需要进行设置(下面会详细说明每个属性的作用)

5、点击下方的Generate Font Atlas按钮生成字体

6、生成结束后记得点击Save保存**

Font Creator窗口属性

Font Source 选择要创建SDF字体的源字体

Font Size 创建字体的字号的大小。

  • Auto Sizing 建议使用该选项。根据给定Atlas Resolution(图集分辨率)来计算并使用最大字号。
  • Custom 自定义字号。

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

Packing Method 打包方式

  • Fast 可能计算出不是最大的字号,但是计算速度会快一些
  • Optimum 可以计算出图集上能承载的最大的字号
    通常在测试设置时使用Fast,在最终打包时使用Optimum

Atlas Resolution 使用SFD字体时,更高的分辨率会产生更精细的渐变,从而产生更高质量的字体。对于大多数字体,仅包含所有ASCII字符时,512x512纹理分辨率足够用。

当需要支持数千个字符时,不得不使用大纹理。但即使在最高分辨率下,也可能无法满足所有要求。在这种情况下,可以通过创建多个字体资源来拆分字符。将最常用的字符放在主字体资源中,将其他字符放在后备(fallback)字体资源中。

Character Set 字体文件中的字符不会自动包含在字体资源中。你必须指定你需要的那些。你可以选择一些预定义的字符集,也可以自己提供字符列表。

  • 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 从外部文件中导入字符

注意要包含空格字符,除非确定你不需要它

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

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

Get Kerning Pairs? 你可以选择从字体中提取字距数据。此数据用于调整特定字符对之间的间距,以产生更好的视觉效果。但是请注意很多字体没有字距数据。

总结

大智:“SDF字体创建完以后就能用于TMP的text了。”
小新:“这个插件确实很强大,文字显示看起来真舒服。”

今日思考题

大智:“把你的界面里的文字替换成TMP的text看看效果如何吧!”
小新:“好嘞”
大智:“收获别忘了分享出来!也别忘了分享给你学Unity的朋友,也许能够帮到他。”

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 218,036评论 6 506
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,046评论 3 395
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 164,411评论 0 354
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,622评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,661评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,521评论 1 304
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,288评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,200评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,644评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,837评论 3 336
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,953评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,673评论 5 346
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,281评论 3 329
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,889评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,011评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,119评论 3 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,901评论 2 355

推荐阅读更多精彩内容