MMORPG开发笔记（二）-- 使用字符图片自定义字体(Custom Font)

前言

在上一篇中，我们初步提到了UI的拼接，而由于在Unity的UI设计中，我们经常会遇到需要自定义字体的情况。毕竟Unity自带的字体只有Arial一种。虽然可导入字体给我们提供了更多选择的余地，但也可能遇到选择的字体和游戏整体不搭或者仅需少量特定字符的情况。这种情况下包含指定字符的Custom Font就为我们自定义字体提供了方便，而设计这样一套字体有一下必要条件：映射字符在ASCII码范围内，一张包括指定字符的图片，一个包含切分后图片的字体。

一、素材准备

和导入的字体不同，Custom Font并不是通用的 .ttf/.otf 文件，而是由用户指定的包含特定字符的图片生成的。以数字字体为例，我们的原始素材可以是下面这样的一张图片：

首先选择我们之前导入的字符图片，将它的Texture Type 改为 Sprite(2D and UI)，Sprite Mode改为 Multiple，点击Apply保存后我们就可以打开 Sprite Editor 对字符图进行编辑了：

在Sprite Editor窗口下，点击左上角的Slice按钮就可以对当前图片进行切分了，Unity会自动根据透明的背景识别每个字图片，即单个字符的图片。当然，我们这里的目的并不是使用这些被切分出来的字图片，而是使用每个字图片对应的参数来设置 Custom Font 中的 Character Rects 参数。

如上图所示, 其中每个字符的Position和 Border信息对于我们之后指定该图片每个字符的位置具有重要的作用。

二、创建字体材质

当你经过第一步的处理获得理想的素材之后，下一步就是使用该素材创建一个字体材质。之前也说过Custom Font和导入字体的不同之处就在于它是由字符图片生成的。而字体材质就是一种特殊的材质（Material），你可以把它看做是链接Custom Font和字符图的纽带。 它接受一张字符图的纹理并可以被赋予给一个Custom Font，这也是我们之前强调字符图只能有一张的原因。创建一个字体材质的过程非常简单，在Project视图中右键单击 Create - Material，然后将其使用的着色器改为 “GUI/Text Shader”即可。正常情况下Inspector窗口下你可以看到下面的样子：

直接将字符图片拖拽到Texture位置即可获得一个字体材质。

三、创建字体

我们可以在Project视图中右键单击 Create - Custom Font 来创建一个自定义字体，然后将之前得到的字体材质拖到Custom Font属性栏中的Material上就得到了一个Custom Font的雏形。显示效果如下图（根据Unity版本不同可能属性会有些许改变）：

四、进行字符映射

经过上述步骤我们得到的Custom Font还没有任何用处，因为它还没有进行最重要也是最麻烦的一个步骤，那就是将ASCII码与我们自定义的图片建立起对应的映射。
此时打开我们之前创建的Custom Font 文件，我们可以在参数一栏中找到 Character Rects 这一选项，这也是Custom Font识别每个字符的重要配置信息。作为示范，我们可以先设置Character Rects 的Size为14，表示该字符集一共包含14个字符。然而Unity并没有我们想象的那么高级，可以自动从图片中找出我们想要的字符图再映射到具体的ASCII码上，所以我们可以看到Unity希望我们为Element0-13设置参数列表，而我们必须每个参数都认真地设置才能看到效果。

其中的参数填写遵循如下规则：

参数名	换算公式	参数含义
Index	无	当前字符的索引, 用于确认该字符图对应的ASCII码，换算关系为 Ascii Start Offset + Index = Ascii实际值
Uv	无	该字符对应于图片中的哪个区域，四个参数取值范围均为[0,1],表示相对范围
Uv_X	Position_X/Sprite_Width	字符图的起始x坐标
Uv_Y	Postiion_Y/Sprite_Height	字符图的起始y坐标
Uv_W	Position_W/Sprite_Width	字符图的相对宽度
Uv_H	Position_H/Sprite_Height	字符图的相对高度
Vert	无	该字符对应于图片中的哪个区域，参数取值为实际像素值
Vert_X	一般为0	字符图在相对位置(即Uv_X基础上)的偏移, 以像素为单位
Vert_Y	一般为0	字符图在相对位置(即Uv_Y基础上)的偏移, 以像素为单位
Vert_W	Position_W	字符图的实际宽度, 以像素为单位
Vert_H	-Position_H	字符图的实际高度, 以像素为单位
Advanced(或Width)	Position_W	字符图的宽度

• 其中Sprite_Height为我们之前处理的图片高度
• 其中Sprite_Width为我们之前处理的图片宽度

至此，在填充完相应参数后，我们就完成了自定义字体的设置
我们创建文本测试一下结果：

成功。

Custom Font的缺点和不足

Custom Font虽然给了用户自定义字体的能力，但比起常规的Dynamic Font还是有很多缺点的，例如：

无法定义中文字体。这点是由于Custom Font使用Ascii字符集导致的，Ascii字符集并不包含汉字。
无法通过Size改变字体大小。 就像上一节的演示图一样，数字“1”显然比Text文本框的范围还要高，这是因为Custom Font本身无法改变字符大小，不过依然可以通过Scale来变相调节
无法得到理想的字体颜色。 当改变Color，会在原图片的基础上变化，所以为了得到最好的显示效果，最好保证 字体颜色是白色，背景为透明。

那么本篇的分享就结束了我们下篇再见