引擎版本3.2.6
教程目录
一 为什么要使用位图字体
二 如何使用位图字体
2.1 TextureMerger制作位图字体
2.2 exml中使用位图字体
三 Demo源码
一 为什么要使用位图字体
egret在手机端发布的h5,一般显示的都是手机自带默认字体。
要显示特殊字体的话,一般会用到位图字体。例如下图中的伤害数字。
二 如何使用位图字体
2.1 TextureMerger制作位图字体
首先打开Texturemerger。(https://www.egret.com/products/others.html#egret-texture)
选择Bitmap Font
新建字体,我随意新建的test
选择添加字符
添加如下图片。字体图片一般是美工提供,我这里自己随意制作的。
注意左边栏的图片名要和数字一致。比如左边栏“1”就对应着图片数字1。
如果是图片是“啊”,则左边栏图片名也应该是“啊”。
导出字体
得到两个文件。一张位图字体的png图,和一个fnt字体配置文件。
将两个文件导入default.res.json中加载。
任意新建一个exml皮肤文件,拖动一个BitmapLabel控件到exml上。
选中BitmapLabel,设置位图字体为我们的test_fnt。
如果没有,看看是不是没有将test.fnt和test.png导入default.res.json。
设置BitmapLabel的文本为“123”,则可以看到位图字体可以正常显示了。
三 Demo下载
https://files-cdn.cnblogs.com/files/gamedaybyday/Egret3.2.6_BitmapFontExample.7z