参考
[专栏精选]TextMeshPro插件
TextMeshPro使用说明
TextMeshPro中文字体生成和字体材质更换
新一代Unity 文本组件 Text Mesh Pro 系列教程
【Unity学习笔记】TextMeshPro文档(一)
【Unity学习笔记】TextMeshPro文档(二)
【Unity学习笔记】TextMeshPro文档(三)
【Unity学习笔记】TextMeshPro文档(四)
【Unity学习笔记】TextMeshPro组件官方文档翻译
Unity原生的Text组件有一个毛病,只要文本放大字体放大就会有毛边或锯齿,一个更好的解决方案是用TextMeshPro替代ugui中的Text组件。
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
首次添加会弹出导入必要资源面板,点击IMPORT后,项目Assets文件夹下会生成TextMesh Pro文件夹
二、创建字体文件
UGUI的Text使用了一张字体贴图,Unity把所有需要显示的字符放到了一张图集中,字符的形状是通过像素定义的。当我们放大时,像素不够用就会出现文字变模糊的情况。
TextMesh Pro的Text使用了不同的技术来渲染文字,叫做Signed Distance Field(后面简称SDF,对该技术感兴趣的同学可以自行搜索一下)。和UGUI类似,这个技术同样需要将字符放到一个图集中,但是不使用像素来代表字符的形状,而使用SDF技术来生成字符的形状。使用这种技术字符在渲染时不会因为缩放而造成字符模糊的情况,总是能够准确的渲染字符的边缘。
TextMesh Pro无法像UGUI Text那样使用动态字体,因为TextMesh Pro需要对字体进行预处理来计算SDF,这部分计算非常耗时。这对于英文字体来说影响不大,一个字体文件或一张贴图包含的信息都很少,但是对于字符非常多的语言如中文就影响很大。所以对于中文环境建议如下:
- 对于游戏中显示的文字可以使用TextMesh Pro的SDF字体,提高显示效果和特效处理。
- 对于游戏中的输入框建议使用UGUI自带输入框,使用动态字体。
1.字体下载
2.属性设置
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文件拖至这里。注意要包含空格字符,除非确定你不需要它。
- 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模式,它将字符像素与纹理像素对齐以获得更清晰的结果。
这些都设置好之后,就可以点Generate Font Atlas按钮,然后保存成.asset文件,这就是Font Asset所需要的文件了。
三、设置全局默认字体
如果生成的字体图集缺少部分字符,每当输入这些字符时,TextMesh Pro会使字符回退到默认字形,你可以在Edit > Project Settings > TextMesh Pro Settings修改该字形。
你也可以设置一个或多个字体资源,当字符无法在主要图集中找到时,TextMesh Pro会将字符回退为这些资源中的字符。出于优化目的,可以使用高分辨率的主要字体图集,而所有回退图集则使用较低分辨率。
四、使用SDF字体
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
当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资源**
-
Editor->Project Settings->TextMesh Pro,可以看到Path 必须是Resources路径下的
-
把字体资源挪到Resources路径下,重新设置一下
-
可以用了,不过图片是歪的
-
选择表情Asset资源,展开Sprite Glyph Table调整一下
- 调用默认图集中的图:
<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
- 工具下载地址 https://www.codeandweb.com/texturepacker
-
步骤参考原文,这里展示一下支持Unicode