Unity实用功能之使用TextMeshPro组件

这是我参与8月更文挑战的第17天,活动详情查看:8月更文挑战

概述

上两篇文章我们知道了如何在Unity中设置Text文本颜色渐变,今天就让我们来学习一下另一种方法实现Text的渐变效果——TextMeshPro组件。我们平时一般是用UGUIText组件。不过Text渲染的字体不是矢量的,所以靠近的时候会看到锯齿和模糊。而且Text还有非常多的功能限制,所以,我们这是就需要采用TextMeshPro组件。下面就让我们一起来看一下TextMeshPro组件。

TextMeshPro组件介绍

TextMeshPro,使用它渲染的字体是矢量的,靠近不会有锯齿和模糊。除此之外,还有丰富的表现效果,比如模糊、扩张、描边、发光等等。在Unity的旧版本中,他是一个资源商店中的免费资源,后来被整合进了Unity的Package Manager。总体来说其功能比Text要强上许多,在我看来唯一一点不太友好的就是不支持中文,需要自己创建中文字体库,感觉有点不太方便。

安装插件

首先打开Package Manager,在搜索栏搜TextMeshPro,点击安装即可。路径:Untiy编辑器菜单栏Windows->Package Manager。

image.png
导入后在Assets目录中多了一个TextMesh Pro文件夹,这是存放生成的字体文件的地方;

使用

制作字体文件

首先第一步,我们要制作字体文件,因为不能直接输入中文,所以我们要把我们用到的文字制作成一个字体文件。

  1. 导入一个字体,将其放入到TextMesh Pro文件夹下的Fonts中;
  2. 点击Unity菜单Window->TextMesh Pro->Font Asset Creator,打开字体制作窗口;
  3. 点击Generate Font Atlas生成字体,如果所选字体没有全部包含在图中,或者生成的字特别小,导出之后字的边缘模糊,则把Atlas Resolution改大一点,重新打包,直到达到想要的效果;
  4. 字体生成完毕后点击Save as生成字体文件到Fonts & Materials文件夹。

image.png
上图中,

  1. SourceFontFile放入字体资源,.ttf格式
  2. CharacterSet里面有多种格式,我一般习惯使用后两种:
    • CharactersFromFile:将所有用到的字体放到一个txt文本中,然后放到CharacterFile中
    • Custom Characters:直接将用到的文字填入下方的框中

生成后的样子

image.png
点击保存,会生成一个如下文件

image.png

组件参数

组件和普通的Text差不多,但还是多了一些新功能:

image.png

  • Font Asset:通过Font Asset Creator创建的字体,上面已经创建的字体
  • Material Preset:创建的字体的材质
  • Color Gradient:勾选可以做颜色渐变效果,比上篇文章方便许多

image.png
渐变有三个参数:

  • ColorPreset:创建好的颜色材质
    • 具体创建方法和创建材质球差不多,在Fonts & Materials文件夹里右键->Create->TextMeshPro->Color Gradient,设置好颜色把文件拖动到文字组件的Color Gradient处
  • ColorModel:渐变方式
    • 单色
    • 横向渐变(双色)
    • 纵向渐变(双色)
    • 四色渐变
  • Colors:设置颜色

材质球

TextMeshPro大多动能还是击中在shader里的参数调节,让我们一起来看一下

image.png
Face:字体颜色设置
这是最基本的字体颜色设置,可以添加图片给字体添加纹理。
Outline:给字体加描边
调整Thickness参数可以设置描边的宽度,可以添加图片给字体的描边添加纹理。
Underlay:给字体加阴影
给字体加阴影,可以调整OffsetX,OffsetY设置阴影的位置,Dilate设置阴影厚度,Softness设置阴影的虚化程度。
Bevel,Lighting,BumpMap,EnvMap:勾选其中一个,另外几个都会被勾选,主要是调节文字斜角的颜色,灯光,个人觉得适合浮雕效果
Lighting:光照(需要先设置描边)
当字体有描边时,加上光照,字体立即就感觉出有3d效果,调整参数可以设置光照的角度,位置,强度等等。
Glow:发光
分为内发光和外发光,自行调整参数即可查看效果。

效果展示

下面的图片是随便调了一下的效果。可以看到最后两个字符是两个□□,而在Inspector面板中分明是“哈哈”两个字,这是因为这两个字没有被写进字体资源中,所以显示不出来,只能显示两个方框
image.png

写在最后

所有分享的内容均为作者在日常开发过程中使用过的各种小功能点,分享出来也变相的回顾一下,如有写的不好的地方还请多多指教。欢迎大家相互学习进步。本片文章就先写到这里,希望对你能够有所帮助

© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享