LayaAir引擎位图字体的制作与使用
用过Starling或者Cocos,甚至Unity的，大家对位图字体肯定不会陌生，简单的一张图片，放入自定义的文本，就可以在项目中做出好看的文本显示效果。在LayaAir 同样支持位图字体的使用与显示。下面是位图字体在LayaAir中的使用效果。
制作位图字体
1.将需要导出使用的文字写在一个txt文内。
2.选择文件->另存为Unicode编码的txt文件。
3.下载安装 windows下免费的位图字体制作工具 Bitmap Font Generator。
下载地址：http://www.angelcode.com/products/bmfont/
4.打开软件，选择 Opotion->FontSetting，来设定需要导出的字体的常规设置，设置完毕后点击 OK 按钮保存。
重要参数说明：
Font：导出的位图字体使用的字体。
Size：设置导出的位图字体使用的字体大小。建议在使用时需要多大的字就在此处设置相同大小的字号。
Height：设置字体的拉伸高度，保持默认的100%就可以。
注意：Charset的值选择Unicode。
5.在选择菜单栏 Edit->Select chars from file，选中刚才创建的txt文件，如果有提示失败，请检查txt文件是不是unicode编码的文件以及字体是否包含文本内的字体。
6.设置导出样式，选择菜单栏的 Options->Export Options ，打开Export Options 设置导出选项，设置完毕后点击OK按钮保存。
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格式）。
在LayaAir项目中使用位图字体
1.把资源放在项目的输出目录下。
把制作导出的位图文件修改为同一名字（.fnt 文件和.png文件），然后放到LayaAir项目的bin/h5目录下。
如图：把test_0.png名字改为test.png,保证跟fnt文件同名。再把test.png和test.fnt文件放到H5目录下。
位图字体在 LayaAir项目中的常规使用方法：
1.创建位图字体对象。
1 | var mBitmapFont: BitmapFont = new BitmapFont(); |
2.加载位图字体，并侦听是否完成。
1 | mBitmapFont.loadFont("res/bitmapFont/test.fnt",new Handler(this,回调的函数)); |
3.注册位图字体。
1 | Text.registerBitmapFont("字体名称", mBitmapFont); |
4.使用字体。
1 2 3 | var txt:Text = new Text();txt.text = "这是layabox测试文件";txt.font = this.mFontName; |
下面是一个完整的示例运行的效果。
完整代码如下：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | package{ import laya.display.Stage; import laya.display.Text; import laya.resource.Texture; import laya.utils.Handler; import laya.display.BitmapFont; public class TestBitmapFont { //自定义文件名称 private var mFontName:String = "diyFont"; private var mBitmapFont:BitmapFont; public function TestBitmapFont() { Laya.init(550, 400); mBitmapFont = new BitmapFont(); //这里不需要扩展名，外部保证fnt与png文件同名 mBitmapFont.loadFont("res/bitmapFont/test.fnt",new Handler(this,onLoaded)); } private function onLoaded():void { init(); } private function init():void { //如果位图字体中，没放空格，最好设置一个空格宽度 mBitmapFont.setSpaceWidth(10); Text.registerBitmapFont(mFontName, mBitmapFont); var txt:Text = new Text(); txt.text = "这是layabox测试文件"; //设置宽度，高度自动匹配 txt.width = 250; //自动换行 txt.wordWrap = true; txt.align = "center"; //使用我们注册的字体 txt.font = this.mFontName; txt.fontSize = 50; txt.leading = 5; Laya.stage.addChild(txt); } }} |
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) — 是否销毁当前字体文件。
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 — 宽度，单位为像素。
在LayaAir IDE中使用位图字体
1.将字体文件放到 LayaAir IDE 项目的资源目录中（laya/assets/），要保证两个文件名相同，如 test.fnt、test.png，这样就自动注册了名为 test 的位图字体。
2.将要设置位图字体的文本组件的 font 属性值设置为已导入编辑器的位图字体的名称。
3.在程序代码里实例化使用了位图字体的页面之前，需要先创建并注册页面内使用到的位图字体。