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
  • 调用默认图集中的图:
//默认图集+索引
 
 //默认图集+图名

调用指定图集中的图:

 //指定图集+索引
 
//指定图集+图名
  • 叠加颜色

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

//使用特定的颜色/透明度 ,不随文字变化

2.方案2 使用TexturePackerGUI工具,直接生成对应文件制作SpriteAssets
  • 工具下载地址 https://www.codeandweb.com/texturepacker
  • 步骤参考原文,这里展示一下支持Unicode


    image.png

    image.png

你可能感兴趣的:(Unity UGUI系列九 Text TextMeshPro)