游戏开发中经常遇到需要以美术字(而非字库)做数字显示的情况,通常美术会提供一组包含单个数字(也会有其它字符)的图片,可能是一张整图,也可能是每个数字分开的散图。
在此我以一张整图这种情况为例,来说明美术字体的具体制作流程。整图如下:
整个制作过程需要用到三样工具:
这里选择下载64位运行版(单体文件,无需安装)
图片切割工具是Unity中运行的一个工具类,类名为ImageSlicer,放在Editor目录下即可,代码如下:
字体生成工具也是Unity3d中一个第三方插件,名字也是BMFont(不知道和第一个软件有什么关联)。原本是NGUI中的一个字体制作工具,现被大佬剥离出来,在UGUI中也可以使用。
解压到Assets目录下即可,编译完成后,会在Unity编辑器上生成一个Tools/BMFontMaker菜单。
BMFont插件是源码形式的,共包括6个文件:
a)把图片导入Unity,SpriteMode选择Multiple模式,勾选Read/WriteEnable选项。见下图:
然后点击SpriteEditor进行多图区域编辑,如下图。可以先按给定的三种方式进行划分,自己再做细微调整。注意每个字符边距不要太大,不然做成字体后显示起来就会很离散。
分割完成后,点击Apply保存操作。
b)选中图片右键,执行ImageSlicer/ProcesstoSprites菜单,会生成一个与图片同名的目录,里边放着切割好的散图。见下图,
a)打开BMFont64软件,点击Edit下的OpenImageManager菜单。
在打开的ImageManager窗口有一个Image菜单,可以进行图片导入、编辑和删除操作。
操作方式:这里以逗号字符为例,鼠标放在主窗口逗号方格的位置,右下会显示其编号,记住这个编号。
然后在ImageManager窗口中选择导入图片,选中切割成散图的逗号图片,在IconImage弹窗的Id中填入逗号方格的编号:44,点击Ok。
依样导入其它的图片,并填入Id值,最后的完成图如下:每个字符方格的编号,对应一个相应的图片。
b)点击Options/Exportoptions菜单,
打开导出选项窗口,这里边主要设置一个合成图片的宽和高,以及导出格式。
这个软件的最后一步操作是导出字体数据,包括一个字体数据文件(.fnt格式)和一张纹理图。这个纹理图会把所有的单图又合成一张。
这里的Width是指这张合成纹理的总宽度(最好比所有图片加起来的数值要大一点,因为每个数字图片合成时会有一个px的间隔),
Height是单个图片的高度(最好比图片高1像素以上)。
不能一次设置准确也没关系,可以点击Options/Visualize菜单预览合成效果,再微调高宽值,最终让所有图片都能刚刚显示为好。
导出格式格式设置为png。(如果图片有模糊可把Bitdepth设置为32位试试,瞎猜的,不一定有用)
合成图预览如下:
c)点击Options/Savebitmapfontas..菜单,选择位置后进行保存操作,最终会得到两个文件(ArtNum.fnt和ArtNum_0.png),如下图:
字体名字可以自由定义,导出的时候,每个方格要处在选中状态(浅灰色)。
a)将上述两个文件导入到Unity中,在资源面板中鼠标右键,选择Create/Material和Create/CustomFont菜单,
创建一个空的材质ArtNum_mat和一个空的自定义字体ArtNum(后缀为.fontsettings,在Unity中不显示),如下图:
b)点击Tools/BMFontMaker菜单,在打开的窗口中,选择相应的文件进行赋值,如下图,
最后点击CreateBMFont按钮,这样一个美术字体就生成了。
点击字体文件,能在Inspector面板的CharacterRects中看到字体的映射信息。
c)创建一个Text,输入一些数字字母和符号,字体选择为ArtNum,颜色选为白色,就能看到实际的效果。
美术字体制作完成。
使用这种字体的一些小问题1、字体不会换行,超出宽度的字体将会重叠显示,需要预留出宽度。
2、字体不受FontSize的影响,无法动态调整大小,如有需要,可通过设置Scale来解决。
3、如遇到字体信息在重启Unity后丢失的情况,可在BMFontEditor.cs脚本中的最后添加EditorUtility.SetDirty(targetFont);来解决。