技术美术|创建你自己的UE4字体

发表于2016-03-25
评论2 8k浏览

 

在UI制作过程中,除了一些复杂的特殊字体形状需要通过图片来制作外,大部分情况我们要使用字体输入的形式来进行文字修改。但是UE4引擎自带的默认字体很难满足我们的不同游戏的画面需求,这时需要我们自己来创建和修改自己的字体。

 

UE4支持TTF和OTF两种格式的字体格式导入。网路上很多网站上面有大量的字体库可以下载,例如:

http://font.niutuku.com/

http://www.zhaozi.cn/s/all/ttf/

http://www.daimg.com/list.php?tid=85&ext=9&pdi=0&size=0&free=0

                                         

或者你可以自己创作自己的字体,下面我们来学习一下自己制作TTF字体的方法:

1.草稿。这一部我是在纸上完成的,用的是黑色的马克笔。这一步必须有清晰的思路,设计字体的时候要有目标,也就是说希望的风格,字体适合应用在哪些场合,必须清楚,要对英文字体有一定的认识和见解。有了清晰的思路,才能制定出字体的风格。
建议开始之前先研究一下Arial,Batang,Impact,Vrinda,Tahoma,Times New RoMAN这些字型比较正规的经典字体。 

英文字体需要设计的元素包括:二十六个大写英文字母,二十六个小些英文字母,十个数字,和常用的符号及标点。(如下)

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
, . : ; ( ) [ ] < > < > / | @ & $ % ÷ + & - * = _ ` ~ ^ ' " ! ? ® © ™

  2.整理草稿。在A4纸上画好参考线,然后把草稿上的字体,逐个画下来。如图。

 

 

3.把字体整理到电脑里。用什么软件随意PS,CD都可以。我比较习惯PS的钢笔,所以用PS,不过我建议用矢量软件。这一步要注意的问题很多。因为涉及到字体最终效果,所以要使用很多参考线。根据字体的风格,我制定了两种参考线,硬参考线和软参考线。分别如图。

 

 

  在录入的过程中,我对字体进行了一定程度的修改,尤其是小写字母和几个符号的大小及相对位置。

  需要注意的是,字体的相对位置和绝对位置,一定要把握好。这些要在脑子里事先想好,不然会一塌糊涂,出现很多矛盾的问题,更难解决。录入的时候要多对自己进行比较,字体的相对位置,字体相对高度,绝对高度,字体的宽度。按照上面的几个要点,把相同的归类,进行比较。

  因为每款字体都有自己的特征,所以就不举例了。有时候需要把字体叠在一起比较。

  所有构成字体的笔划,都单独列出来。比如在这款字体里,BDHIK等字体的竖笔划,其实是相同的。省事,也更标准。 录入的最终效果如下图。

 

4.制作TTF。如果想做TTF,需要一个名为Font Creator的软件,版本 5.0,目前好像没有汉化和教程。 这个步骤花了整个字体设计80%的时间。

 

 

5.字体编码的前期工作。我用的是比较省事的方法,用PS里的切片功能,把字符导出为单独的图片。然后把单独的图片按照字符命名为:A,a,B,b,C,c……需要注意的是,导出的图片分辨率要高一些,自己把握。切片要准确。如图。

 

 

6.新建一个True Type Font,把刚才导出的字符图片一个一个拖拽到相应的位置,软件会自动把图片转换为矢量的路径。必须逐个调整字体的边缘,因为软件自动生成的路径,会有缺陷。字体的上下左右间距要注意,不多说了。软件也不多说了,很简单。

 

 

下面是调整字体相对位置的过程,可见其重要性。

 

 

最终效果

 

  制作完TTF字体后,并把这个字体导入到系统的字体库中。首先打开控制面板点击字体然后把TTF或OTF字体安装到系统字库中。


 

  下一步我们需要开始把字体文件导入到UE4引擎了。首先,在“内容浏览器”中找到放置字体的文件夹,或自己创建一个字体文件夹,然后点击右键,鼠标移动到User Interface菜单栏,弹出Font选项点击这个选项。

 

 

  点击完成后会创建一个新的字体,你可以自己根据TA提供的命名规则来命名。



输入完成后,双击字体,进入字体窗口:



  点击右侧Font选项卡下面Font Cache Type的下拉菜单,修改Runtime为Offine,然后点击Yes。



  弹出“字体”窗口:



  选择我们预先设计好的字体,字号尽量要大一些,否则导入到UE4中会非常模糊。然后点击确定按钮。我们在引擎中的字体图集就生成完了。


 

  Preview中显示没有问题的话,点击上面的Save按钮进行下一步制作。



  在场景中使用时,我们还要创建一个字体专用的Material。字体文件夹中创建一个Material,双击进入Material窗口注意Details中的Blend Mode选择为Masked(模式)或Translucent(半透明模式)



选择完混合模式后在节点菜单中右键创建3个节点,分别为:

      Constant3Vector

      FontSampleParameter

LinearInterPolate

如图:



上图中用的通道是红通道,因为这个字库没有Alpha通道。有的字库在预览窗口显示为白色,但是具有Alpha通道,我们就要把A通道连接到Lerp中的Alpha节点上。到这里我们的字体材质就制作完成

 

  下面我们来让文字在游戏中显示出来,首先进入UI界面的Actor蓝图中,并且在Component菜单栏中点击+AddComponent按钮创建一个TextRender。创建完成并且修改完名称后,调节这个文字到指定的位置。

 

  然后查看Details菜单,找到Text选项,点击Font下拉菜单,并选中你事先设定好的字体。找到TextMaterial选项选中你事先设定好的材质。

 

 

大功告成。

 

  如果你要实现更加复杂的动态效果,你需要在字体的材质节点中创建可以控制的属性,然后在蓝图中或者通过Martinee来制作字体动画。

比如:


如社区发表内容存在侵权行为,您可以点击这里查看侵权投诉指引