Laya的位图字体bitmapFont字体用法

 

一 效果

Laya的位图字体bitmapFont字体用法_第1张图片
 

二 工具

BMFont (下载地址:http://www.angelcode.com/products/bmfont/)
Laya的位图字体bitmapFont字体用法_第2张图片
建议下载第三个,不需要安装,双击打开直接使用

 

三 准备图片

制作需要的文字,以数字为例:
Laya的位图字体bitmapFont字体用法_第3张图片

以这十个数字为例制作位图。
切图,每个数字单独切成一个图片。
在这里插入图片描述
 

四 制作位图字体

Laya的位图字体bitmapFont字体用法_第4张图片

选择Edit -> Open Image Manager,打开界面:
Laya的位图字体bitmapFont字体用法_第5张图片
在这个界面导入图片,选择上面切出的文字图片。
Laya的位图字体bitmapFont字体用法_第6张图片
导入图片是数字0的图片,然后Id这里设置为0对应的数字,右下角位置。
依次导入十个数字。导入完成之后,界面如下:
Laya的位图字体bitmapFont字体用法_第7张图片
 

五 设置导出位图字体

Options-> Export Optons
Laya的位图字体bitmapFont字体用法_第8张图片
Width是导出的图片的宽度
Height是导出的图片的高度
bit depth 设置32位。保留透明度

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

六 导出字体

Laya的位图字体bitmapFont字体用法_第9张图片
导出位图字体,设置位图字体的名称,不要设置后缀名。我这里设置为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属性是上面注册的字体名称

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

Laya的位图字体bitmapFont字体用法_第10张图片

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

 

八 使用FontClip和Clip

效果图:
在这里插入图片描述
准备一个图片
在这里插入图片描述

场景添加FontClip

Laya的位图字体bitmapFont字体用法_第11张图片

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,多多指教!


你可能感兴趣的:(微信小程序小游戏)