《从0到1上线微信小游戏》第五节 使用BMFont软件制作位图字体

第五节 使用BMFont软件制作位图字体

下载BMFont

确定字符

字体添加和导出设置

导入字符

导出位图字体

使用位图字体


好看的字体可以增加游戏的美观度或者趣味性,本节笔者就来带教大家如何使用BMFont来制作字体并添加到游戏中。

注:由于BMFont只有exe格式,所以本节笔者将在Windows系统上进行演示。

 

下载BMFont

大家可以点击这个BMFont官网链接去下载该软件。

网站一共提供了两种下载版本:安装版和免安装版。

《从0到1上线微信小游戏》第五节 使用BMFont软件制作位图字体

笔者建议就直接下载免安装版的,方便又快捷,而且版本较新,相对于安装版本(1.13)也修复了很多bug。

《从0到1上线微信小游戏》第五节 使用BMFont软件制作位图字体

下载完毕后双击运行就可以了:

《从0到1上线微信小游戏》第五节 使用BMFont软件制作位图字体

 

确定字符

新建一个txt文件(名称随意),输入你要修改(字体)的字符。按照我们前几节的游戏开发情况来看,需要用到的字符就是下面这些:

《从0到1上线微信小游戏》第五节 使用BMFont软件制作位图字体

不过我们也可以稍微多加一些以防后续开发会用到,这样可以少一次重新做位图字体的麻烦:

《从0到1上线微信小游戏》第五节 使用BMFont软件制作位图字体

 

确定好字符后,请点击保存->另存为,确保自己将文本编码方式设置为UTF-8

《从0到1上线微信小游戏》第五节 使用BMFont软件制作位图字体

注:为防止以后要添加新的字符,请不要删除这个txt文件。

 

字体添加和导出设置

点击Options->Font settings打开字体设置窗口。点击Font下拉框选择已经在系统中安装好的字体:

《从0到1上线微信小游戏》第五节 使用BMFont软件制作位图字体

注:通常要制作位图字体的话,我们会使用付费的或者已经获取版权的字体。如果是系统自带的字体,我们其实不需要制作,直接在Cocos引擎中进行选择就可以了。那笔者这里为了演示,就直接在BMFont中用系统自带的字体了。

《从0到1上线微信小游戏》第五节 使用BMFont软件制作位图字体

点击OK后,我们再通过Options->Export options打开导出设置窗口并进行如下设置:

《从0到1上线微信小游戏》第五节 使用BMFont软件制作位图字体

  1. 由于我们的字符数量不是特别多,所以可以让最后生成的字体图片小一些。如果字符数很多,而这里的图片大小又设置的很小的话,那BMFont为了把所有字符都包含进去,就会生成很多张同等大小的图片。
  2. 位数我们选择32位。
  3. 最后的格式选择png,也就是将字体放在图片上。

点击OK保存。

 

导入字符

点击Edit->Select chars from file,选择我们刚才保存好的txt文件导入字符。此时出现在txt文件中的字符就会在窗口中发亮显示:

《从0到1上线微信小游戏》第五节 使用BMFont软件制作位图字体

《从0到1上线微信小游戏》第五节 使用BMFont软件制作位图字体

 

导出位图字体

点击Options->Save bitmap font as导出位图字体:

《从0到1上线微信小游戏》第五节 使用BMFont软件制作位图字体

一共生成两个文件,分别是fnt格式和png格式。

接着我们打开Tetris.fnt文件查看下里面size的值:

《从0到1上线微信小游戏》第五节 使用BMFont软件制作位图字体

如果这个是负数,那么我们在使用该位图字体时,所有的字体将会倒着显示。所以为了正常显示,我们需要把这个负号给去掉:

《从0到1上线微信小游戏》第五节 使用BMFont软件制作位图字体

 

使用位图字体

接下来我们就在Cocos Creator中使用刚制作好的位图字体。

首先在资源管理器中添加位图字体:

《从0到1上线微信小游戏》第五节 使用BMFont软件制作位图字体

接着将上面图标为Bf的文件拖入score节点上的Label组件中就行了:

《从0到1上线微信小游戏》第五节 使用BMFont软件制作位图字体

《从0到1上线微信小游戏》第五节 使用BMFont软件制作位图字体

 

运行截图如下:

《从0到1上线微信小游戏》第五节 使用BMFont软件制作位图字体