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组件的使用与之类似。
这两个组件组件特别适合游戏开发当中‘第几关’、‘第几级’等等，也适合文案固定组合的字体的设置。

 

九 注意事项

• 1

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

• 2

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

this.bitmapFont.autoScaleSize = true;

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

---

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

---

更新：2019年6月16日

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

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

---