Laya BitmapFont

位图字体（Bitmap Fonts）又叫点阵字体或像素字体（Pixel Fonts），区别于矢量字体，指的是在类似九宫格有限像素空间内以一个一个点组合描述的字体外观样式。

位图字体由fnt格式的字体和一张png图片组成，fnt文件提供了对每个字符小图的索引，这种格式的字体可以由专门的软件生成，比如位图字体制作工具。

工具

位图字体制作工具

• Bitmap Font Generator
  http://www.angelcode.com/products/bmfont/
• Glyph Designer 一种商业位图字体工具，可用于阴影，渐变，笔触等各种选项。
  https://www.71squared.com/glyphdesigner
• Hiero 用于将系统字体转换为位图的实用程序
  https://github.com/libgdx/libgdx/wiki/Hiero

使用Bitmap Font Generator制作位图字体

image.png

文档

Laya中的BitmapFont类是位图字体类，用于定义位图字体信息。

结构	描述
Package	laya.display
Class	Laya.BitmapFont

属性	类型	默认值	描述
autoScaleSize	boolean	false	是否根据时机使用的字体大小缩放位图字体大小
fontSize	number	12	当前位图字号
letterSpacing	number	0	字符间距 单位像素

方法	参数	返回值	描述
destroy		void	销毁位图字体
getCharTexture	char:string	Texture	获取指定字符的字体纹理对象
getCharWidth	char:string	number	获取指定字符的宽度
getMaxHeight		number	获取最大字符高度
getMaxWidth		number	获取最大字符宽度
getTextWidth	text:string	number	获取指定文本内容的宽度
loadFont	path:string, complete:Handler	void	指定位图字体文件路径并加载，加载后自动解析。
parseFont	xml:XMLDocument, texture:Texture	void	解析字体文件
parseFont2	xml:XMLDocument, texture:Texture	void	解析字体文件
setSpaceWidth	spaceWidth:number	void	设置空格宽度，若字体库有空格则无需设置。

使用

Laya位图字体使用

1. 使用位图字体制作工具生成并导出位图字体文件，包括PNG图片和FNT格式的字体两个文件。
2. 使用资源加载器将PNG图片和FNT字体载入

let fntRes = Laya.Loader.getRes(fntUrl);
let pngRes = Laya.Loader.getRes(pngUrl);

3. 创建BitmapFont位图字体对象

let bitmapFont = new Laya.BitmapFont();

4. 使用BitmapFont位图字体对象解析图片和字体

bitmapFont.parseFont(fntRes, pngRes);

5. 为Text文本注册位图字体

Laya.Text.registerBitmapFont(fontName, bitmapFont);

核心方法解析

Laya加载器获取指定资源地址的文件

Laya.Loader.getRes(url:string):any

Laya 文本注册位图字体

Laya.Text.registerBitmapFont(name:string, bitmapFont:BitmapFont):void

参数	类型	描述
name	string	位图字体名称
bitmapFont	BitmapFont	位图字体对象

Laya 文本取消注册位图字体文件

Laya.Text.unregisterBitmapFont(name:string, destroy?:boolean):void

参数	类型	默认值	描述
name	string		位图字体名称
destroy	boolean	true	是否销毁指定的字体文件

封装

TypeScript封装位图字体管理器

/**
 * 字体工具管理类
 */
export default class FontManager{
    //单例对象
    private static instance:FontManager;
    public static getInstance():FontManager{
        if(!this.instance){
            this.instance = new FontManager();
        }
        return this.instance;
    }
    //缓存对象
    private _cache;
    //构造函数
    constructor(){
        this._cache = null;
    }
    /**
     * 注册位图字体
    */
    register(fontFntUrl, fontPngUrl, fontName){
        //判断缓存中是否存在
        if(this._cache && this._cache[fontName]){
            return;
        }
        //获取字体资源
        let fontFntData = Laya.Loader.getRes(fontFntUrl);
        let fontPngData = Laya.Loader.getRes(fontPngUrl);
        if(!fontFntData || !fontPngData){
            //todo
            //Logger.trace("注册纹理 字体文件或图片加载失败", fontFntUrl, fontPngUrl);
        }
        //创建位图字体
        let bitmap = new Laya.BitmapFont();
        //解析字体
        bitmap.parseFont(fontFntData, fontPngData);
        //文本注册位图字体
        Laya.Text.registerBitmapFont(fontName, bitmap);
        //缓存开关
        if(!this._cache){
            this._cache = {};
        }
        this._cache[fontName] = true;
    }
    /**
     * 注册位图字体
     * @param fontName 位图字体名称
     */
    unregister(fontName){
        if(this._cache && this._cache[fontName]){
            delete this._cache[fontName];
        }
    }
    /**
     * 是否注册位图字体
     * @param fontName 位图字体名称
     */
    isRegister(fontName){
        return this._cache && this._cache[fontName] ? true : false;
    }
}