Layabox 位图字体

Layabox 教程

Layabox 基础

Layabox 2D进阶

Layabox IDE教程

Layabox 3D基础

Layabox 小游戏适配

Layabox Native原生

Layabox 常见问题

用过Starling或者Cocos,甚至Unity的，大家对位图字体肯定不会陌生，简单的一张图片，放入自定义的文本，就可以在项目中做出好看的文本显示效果。
在LayaAir 同样支持位图字体的使用与显示。
下面是位图字体在LayaAir中的使用效果。

![layabox 位图字体的制作与使用](/static/img/1585477803472160600.png 'layabox 位图字体的制作与使用')

------------

####1.制作位图字体
1.将需要导出使用的文字写在一个txt文本内。

![Layabox位图字体](/static/img/1585490370087767400.png "Layabox位图字体")

2.另存为Unicode编码的txt文件。

![Layabox位图字体](/static/img/1585490391333982700.png "Layabox位图字体")

3.下载安装 windows下免费的位图字体制作工具 Bitmap Font Generator。

http://www.angelcode.com/products/bmfont/

4.打开软件，选择 Opotion->FontSetting，来设定需要导出的字体的常规设置，设置完毕后点击 OK 按钮保存。

![Layabox位图字体](/static/img/1585490423605828500.png "Layabox位图字体")

重要参数说明：
Font：导出的位图字体使用的字体。
Size：设置导出的位图字体使用的字体大小。建议在使用时需要多大的字就在此处设置相同大小的字号。
Height：设置字体的拉伸高度，保持默认的100%就可以。
注意：Charset的值选择Unicode。

![Layabox位图字体](/static/img/1585490445090057300.png "Layabox位图字体")

5.在选择菜单栏 Edit->Select chars from file，选中刚才创建的txt文件，如果有提示失败，请检查txt文件是不是unicode编码的文件以及字体是否包含文本内的字体。

![Layabox位图字体](/static/img/1585490455301641400.png "Layabox位图字体")

6.设置导出样式，选择菜单栏的 Options->Export Options ，打开Export Options 设置导出选项，设置完毕后点击OK按钮保存。

![Layabox位图字体](/static/img/1585490524251585100.png "Layabox位图字体")

Padding：文字的内边框，或者理解为文字的周边留空要多大。做后期样式时这个属性很重要，需要预留空间来给描边、发光等特效使用。比如预计要加一个2px的边框，然后加一个右下角2px的投影效果，所以设定了padding:2px 4px 4px 2px。
	
	Bit depth：必须32位，否则没有透明层。
	
	Presets：字体初始化预设的颜色通道设定，也就是说字体的初始颜色设定是什么样的，建议都用白色字，可以直接设定为White text with alpha，即白色字透明底。
	
	Font descriptor：字体描述文件，选择 xml。
	
	Textures：纹理图片格式，选择 png。

7.导出位图字体。选择菜单栏的 Options->Save bitmap font as…，导出生成的是一个字体描述文件（.fnt格式）和一个字体纹理图文件（.png格式）。

####2.在LayaAir项目中使用位图字体
1.把资源放在项目的输出目录下。
把制作导出的位图文件修改为同一名字（.fnt 文件和.png文件），然后放到LayaAir项目的bin/h5目录下。

![Layabox位图字体](/static/img/1585490581491859100.png "Layabox位图字体")

如图：把test_0.png名字改为test.png,保证跟fnt文件同名。再把test.png和test.fnt文件放到H5目录下。

------------

#####位图字体在 LayaAir项目中的常规使用方法：

1. 创建位图字体对象。
2. 加载位图字体，并侦听是否完成。
3. 注册位图字体。
4. 使用字体。

下面是一个完整的示例运行的效果:

![Layabox位图字体](/static/img/1585490623965288400.png "Layabox位图字体")

完整代码如下:
```javascript
module laya {
    import BitmapFont = Laya.BitmapFont;
    import Stage = Laya.Stage;
    import Text = Laya.Text;
    import Browser = Laya.Browser;
    import Handler = Laya.Handler;
    import WebGL = Laya.WebGL;
    export class Text_BitmapFont {
        private fontName: string = "diyFont";
        constructor()
        {
            // 不支持WebGL时自动切换至Canvas
            Laya.init(Browser.clientWidth, Browser.clientHeight, WebGL);
            Laya.stage.alignV = Stage.ALIGN_MIDDLE;
            Laya.stage.alignH = Stage.ALIGN_CENTER;
            Laya.stage.scaleMode = "showall";
            Laya.stage.bgColor = "#232628";
            this.loadFont();
        }
       private loadFont(): void {
            var bitmapFont: BitmapFont = new BitmapFont();
            bitmapFont.loadFont("test.fnt", new Handler(this, this.onFontLoaded, [bitmapFont]));
        }
        private onFontLoaded(bitmapFont: BitmapFont): void {
            bitmapFont.setSpaceWidth(10);
            Text.registerBitmapFont(this.fontName, bitmapFont);
            this.createText(this.fontName);
        }
        private createText(font: string): void {
            var txt: Text = new Text();
            txt.width = 250;
            txt.wordWrap = true;
            txt.text = "这是测试";
            txt.font = font;
            txt.leading = 5;
            txt.pos(Laya.stage.width - txt.width >> 1, Laya.stage.height - txt.height >> 1);
            Laya.stage.addChild(txt);
        }
    }
}
new laya.Text_BitmapFont();
```

------------

####3.Text 类中相关接口

#####registerBitmapFont () 方法
	public static function registerBitmapFont(name:String, 		bitmapFont:BitmapFont):void
注册位图字体。

参数

name:String — 位图字体的名称。
	bitmapFont:BitmapFont — 位图字体文件。

#####unregisterBitmapFont () 方法
	public static function unregisterBitmapFont(name:String, destory:Boolean = true):void

移除注册的位图字体文件。
参数

name:String — 位图字体的名称。
	destory:Boolean (default = true) — 是否销毁当前字体文件。

------------

####4.BitmapFont 类里的相关接口
#####loadFont () 方法

public function loadFont(path:String, complete:Handler):void
通过指定位图字体文件路径，加载位图字体文件。

参数

path:String — 位图字体文件的路径。
	complete:Handler — 加载完成的回调，通知上层字体文件已经完成加载并解析。

#####parseFont () 方法

public function parseFont(xml:XmlDom, texture:Texture):void

解析字体文件。
参数

xml:XmlDom — 字体文件XML。
	texture:Texture — 字体的纹理。

#####destory () 方法

public function destory():void

销毁位图字体，调用Text.unregisterBitmapFont 时，默认会销毁。

#####setSpaceWidth () 方法

public function setSpaceWidth(spaceWidth:Number):void

设置空格的宽（如果字体库有空格，这里就可以不用设置了）。
参数

spaceWidth:Number — 宽度，单位为像素。

------------

####5.在Laya编辑器中使用位图字体

1.将字体文件放到 LayaAir IDE 项目的资源目录中（laya/assets/），要保证两个文件名相同，如 test.fnt、test.png，这样就自动注册了名为 test 的位图字体。

![Layabox位图字体](/static/img/1585490942843527200.png "Layabox位图字体")

2.将要设置位图字体的文本组件的 font 属性值设置为已导入编辑器的位图字体的名称。

![Layabox位图字体](/static/img/1585490953216120500.png "Layabox位图字体")

3.在程序代码里实例化使用了位图字体的页面之前，需要先创建并注册页面内使用到的位图字体。