【Unity笔记】TextMeshPro学习研究笔记

本文档为22年在项目上开发UI的时候,在研究学习TMP过程中写下的。如何创建动态字体等功能网上已有其他大佬分享的文章,本文主要研究了TMP控件的描边和投影功能,以及字体效果。


image.png

一、为什么要使用TMP

Unity 自带的Text文字组件,在高分辨率模式下,文字清晰度不足。且如需要描边和投影效果,则对应的效果也非常糟糕。


image.png

image.png

从图可见,文字模糊。描边效果在文字折角处有丢失。
因此,在部分需要较高清晰度,或需要额外文字效果的情况下,可使用Text Mesh Pro组件来实现所需要的效果。

1.1 TMP优点

1、 丰富的文本段落控制参数:TextMesh Pro提供了对文本格式和布局的改进控制,超过30个丰富的文本标签,包括支持上标,下标,下划线,划线,缩进,对齐,单步,行高,以及更多。支持多种字体和精灵、自定义样式等功能
2、 支持TrueType和OpenType
3、 支持以材质的方式给文字添加纹理效果

1.2 TMP缺点

1、 不能直接使用TTF字体,需要基于TTF字体创建专用字体文件资源。
2、 对中文支持不够好,需要使用动态字体模式生成字体文件。

二、创建字体TMP_Font Asset

2.1快速创建

在unity编辑器界面的project窗口,右键要使用 的TTF字体文件,在右键菜单中按顺序选择 Create>TextMeshPro>Font Asset,即可快捷创建对应的字体资源。


image.png

image.png

image.png

生成的字体资源,icon为蓝色的F字母。选中该资源,在Inspector窗口中可以看到unity定义的字体类型为TMP_Font Asset


image.png

image.png

2.2手动创建

手动创建字体资源,按照以下路径进入创建界面:Window>Text Mesh Pro>Font Asset Creator


image.png

image.png
image.png

image.png

image.png

image.png

image.png

image.png

2.2.1 Padding示例

下面分别展示Padding为0,5,10的SDF font 纹理,(SDF模式字体,越模糊效果越好)


image.png

image.png

image.png

2.2.2 Rander Mode效果示例

image.png

1、 SMOOTH、RASTER模式的字体,其投影不支持模糊效果。
2、 RASTER模式的字体锯齿强烈。
3、 SDF各类型效果差异不大,基本使用SDFAA模式即可,除非该字体使用SDFAA会出现乱码,则选择SDF或SDF8进行尝试。

三、TMP_Font Asset结构说明

image.png

TMP字体文件内部包含一个材质球资源、文字贴图资源。

3.1 材质球参数说明

3.1.1 Face

image.png
属性 说明
Color 选择字符表面的颜色和透明度。(该颜色将与顶点颜色Vertex Color相结合。)
Texture 选择要应用于字符表面的纹理。(颜色会影响纹理的颜色,如何应用纹理中的映射选项控制到字符/文本对象编辑器面板。纹理选项不是在所有着色器上都可用。)
Softness 控制字体的柔软度。
Dilate 增加或减少字符的大小。

纹理举例:


image.png

3.1.2 Outline描边

image.png
属性 说明
Color 控制字符轮廓的颜色和透明度。
Texture 选择要应用于字符表面的纹理。(颜色会影响纹理的颜色,如何应用纹理中的映射选项控制到字符/文本对象编辑器面板。纹理选项不是在所有着色器上都可用。)
Thickness 控制轮廓线的厚度。通常0.1 = 2像素描边

描边效果对比:


image.png

3.1.3 Underlay阴影

image.png
属性 说明
Underlay Type 投影类型:None:无 Normal:常规投影 Inner:字体内部
Color 投影颜色
Offset X 投影X轴偏移值
Offset Y 投影Y轴偏移值
Dilate 投影尺寸
Softness 投影模糊值

阴影效果:


image.png

四、多材质球设置

每个字体文件内部有一个材质球,但每个材质球只能关联一个shader着色器,可能会遇到不同的文字组件使用相同的字体,但有些文字需要加投影,有些文字需要加描边。而一个材质球无法配置成在不同文字组件中开启不同的参数配置。
但TMP字体可以配置多个材质球,不同的材质球设置不同的参数, TMP组件的Inspector中的Material Preset切换材质球以实现,在不同的文字组件中出现描边、投影效果。

4.1 创建多个材质球

image.png

1、 在需要创建额外材质球字体内部,选中材质球。
2、 按 Ctrl+D,即可生成一个额外材质球。
3、 生成的额外材质球可以在名字最后加效果名称以进行区分。比如:xxxx_outline、xxxx_shadow

4.2 切换材质球

image.png

1、 在TMP组件中,点击Material Preset,即可在下拉菜单中选择其他的预设材质球。

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容