Laya的位图字体bitmapFont字体用法

一效果

二工具

BMFont (下载地址：http://www.angelcode.com/products/bmfont/)

建议下载第三个，不需要安装，双击打开直接使用

三准备图片

制作需要的文字，以数字为例：

以这十个数字为例制作位图。
切图，每个数字单独切成一个图片。

四制作位图字体

选择Edit -> Open Image Manager，打开界面：

在这个界面导入图片，选择上面切出的文字图片。

导入图片是数字0的图片，然后Id这里设置为0对应的数字，右下角位置。
依次导入十个数字。导入完成之后，界面如下：

五设置导出位图字体

Options-> Export Optons

Width是导出的图片的宽度
Height是导出的图片的高度
bit depth 设置32位。保留透明度

最下面的File format中，Font descriptor必须设置为XML。否则Laya无法识别字体。
Textures设置为png图片。
Compression设置为Deflate。
点击OK。

六导出字体

导出位图字体，设置位图字体的名称，不要设置后缀名。我这里设置为font_num
导出的字体文件为：

七使用位图字体

把上面导出的位图字体放在bin目录下的res目录下的子目录font_add下。
建议将字体直接放在bin目录的res目录下，由代码加载，不要放在项目的assets目录下。原因这个后面再提。

代码中如下：

 private mFontName:string = "diyFont";private bitmapFont: Laya.BitmapFont;private setBitmapFont(): void {this.bitmapFont = new Laya.BitmapFont();this.bitmapFont.loadFont("res/font_add/font_num.fnt",new Laya.Handler(this,this.onLoaded));}private onLoaded(): void {this.bitmapFont.autoScaleSize = true;Laya.Text.registerBitmapFont(this.mFontName, this.bitmapFont);var txt = this.mText;txt.text = "09876652134";//设置宽度，高度自动匹配txt.width = 750;//自动换行txt.wordWrap = true;txt.align = "left";//使用我们注册的字体txt.font = this.mFontName;txt.fontSize = 10;txt.leading = 5;this.mLabel.font = this.mFontName;this.mLabel.fontSize = 24;}

1
mFontName为位图字体设置一个名字，随便起名即可
2
创建Laya.BitmapFont对象，并加载字体
3
加载完成之后，执行onLoaded方法，注册mFontName名字的字体
4
this.mText和this.mLabel分别是Laya.Text和Laya.Label组件对象，可在IDE的场景中设置
字体加载完成，代码中设置mText和mLabel对象的属性。
最主要的是设置font属性是上面注册的字体名称

以上完成之后，就可以看到位图字体了。效果如下：

位图字体当然不止这样的数字文字的设置了，也可以设置中文字体，可以参考官网的设置（http://ldc.layabox.com/doc/?nav=zh-ts-1-2-5）

八使用FontClip和Clip

效果图：

准备一个图片

场景添加FontClip

skin属性设置为准备好的图片
sheet属性设置为图片中的文字，与图中文字一一对应，可以有中文
value值设置为图中文字的随意组合
spaceX代表字符间水平间距
spaceY代表字符间垂直间距
direction代表图中文字方向，默认水平

至于Laya.Clip组件的使用与之类似。
这两个组件组件特别适合游戏开发当中‘第几关’、‘第几级’等等，也适合文案固定组合的字体的设置。

九注意事项

位图字体的导出文件格式必须是XML格式，否则Laya不能识别，位图设置无效。（这一点与Cocos中使用位图字体的导出格式不同，Cocos中导出的格式Text即可使用）

位图字体的使用，如果需要设置位图大小，则需设置

this.bitmapFont.autoScaleSize = true;

如果不设置为true，则设置字体文字大小无效。

欢迎关注公众号：技术印象

更新：2019年6月16日

完整的github代码地址：
https://github.com/longyinzaitian/WxLayaGame

欢迎各位朋友star，多多指教！