UGUI中CustomFont字体使用与制作

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：回到界面，这时数字显示就可以换行了！

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