引擎版本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

posted on 2018-06-24 11:27  gamedaybyday  阅读(1911)  评论(0编辑  收藏  举报