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

推荐阅读更多精彩内容