UGUI中CustomFont字体使用与制作

前言：

如何在UGUI中使用自定义的数字图片。在开发过程中，美术同学会给出类似艺术数字图片

那在UGUI系统中如何使用呢？

UGUI中我们使用Text来显示内容。Text中支持使用ttf字体，那数字图片文字如何使用呢？unity已经给我们提供了解决方案，即Custom Font字体。下面给出如何制作Custom Font字体及在UGUI中使用。

解决方案

一、 CustomFont字体制作

1：在unity中资源目录下右键create->Custom Font

2：创建材质,shader选择GUI/TextShader将图片指定为我们前面说到的数字图片

3：设置CustomFont参数，如下图所示

主要说明CharacterRects内参数：

Size: 即字体要包含多少个符号

Element 0:第一个符号参数说明

Index:符号对应的ASSII码数值

备注：width：单个字符宽度 height：单个字符高度

Uv

x:（width/图宽）*（该字符在图片中的列数-1）

y: height/图高）*（该字符在图片中的行数-1）

w=(width/图宽)

h=（height/图高）

Vert

x=offsetX

y=offsetY

w=width

h=height

Advance：width

Flipped:是否翻转

二、 CustomFont在UGUI中的使用

1：在unity中新建一个Text；如下图所示，将制作好的字体文件托给Font。

看一下显示效果：

出现问题了！

1：字体是倒的。

2：字体颜色不对。

解决字体倒置问题：

1：将图片进行垂直翻转，保存；

翻转后图片如下图所示

2：unity中可以正常显示：如下图

解决字体颜色问题：

1：将Text中的color属性进行修改；

2：修改后，可正常显示图片原始颜色；

以上问题解决，但使用过程中发现个问题，图片文字无法换行！如下图所示

解决图片数字无法换行：

1：找到我们制作的字体文件，将Line Spacing属性值修改成我们的图片中单个数字字符的高度，保存一下。

2：回到界面，这时数字显示就可以换行了！

这个问题有点鸡肋了！一般情况下，使用数字显示的时候好像没有什么地方要换行使用的。