文章中心 -> 软件使用

文章正文

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



具体操作过程如下:

1.将需要的字写在一个txt文内



2.选择文件->另存为Unicode编码的txt文件



3.下载windows下免费的位图字体制作工具Bitmap Font Generator
(绿盟绿色版下载:http://www.xdowns.com/soft/4/108/2016/Soft_158623.html

4.打开软件,选择Opotion->FontSetting,来设定需要导出的字体
这里用方正琥珀
Size可以设定字体大小,最好需要多大就设定多大,这里是32
Height可以设定字体的拉伸高度,保持默认100%就可以了



4.5 在选择菜单内点击:Selecting text from file...
选中刚才创建的txt文件,如果有提示失败,请检查txt文件是不是unicode或者utf-8编码的文件以及字体是否包含文本内的字体



5.Option->ExportOptions来设定导出的样式等



这里解释一下几个重要的地方

Padding,文字的内边框,或者理解为文字的周边留空要多大
做后期样式时这个属性很重要,需要预留空间来给描边、发光等特效使用
比如我预计我的样式要加一个2px的边框,然后加一个右下角2px的投影效果,所以我设定了padding:2px 4px 4px 2px

BitDepth,必须32位,否则没有透明层

Presets,字体初始化的预设的颜色通道设定,也就是说字体的初始颜色设定是什么样的,建议都用白色字,可以直接设定为White text with alpha,即白色字透明底。

Font descript,字体描述文件,果断xml

Textures,纹理图片格式,png。

6.option->Save bitmap font as...
导出成一个文理文件+一个描述文件,如果按照上面的配置,会有一个.png和一个.fnt

7.改名,把文件放到H5目录下
1,把test_0.png名字改为test.png,保证跟fnt文件同名
2,再把test.png和test.fnt文件放到H5目录下

8.在layaAir中使用!!(后面有详细代码)
1,创建位图字体对象
var mBitmapFont: BitmapFont = new BitmapFont();
2,加载位图字体,并侦听是否完成
mBitmapFont.loadFont("res/bitmapFont/test.fnt",new Handler(this,回调的函数));
3,注册位图字体
Text.registerBitmapFont("字体名称", mBitmapFont);
4,使用字体
var txt:Text = new Text();
txt.text = "这是layabox测试文件";
txt.font = this.mFontName;

下面是运行的效果



项目中的测试代码:

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新增接口
/**
* 注册位图字体
* @param name 位图字体的名称
* @param bitmapFont 位图字体文件
*/
public static function registerBitmapFont(name:String,bitmapFont:BitmapFont):void

/**
* 取消注册的位图字体文件
* @param name 位图字体的名称
* @param destory 是否销毁当前字体文件
*/
public static function unregisterBitmapFont(name:String, destory:Boolean = true):void

BitmapFont类
/**
* 通过指定位图字体文件路径,加载位图字体文件
* @param path 位图字体文件的路径,不含扩展名(需要.fnt跟.png文件同名)
* @param callHandler 加载完成的回调,通知上层字体文件已经完成加载并解析
*/
public function loadFont(path:String,callHandler:Handler):void

/**
* 解析字体文件
* @param xml 字体文件XML
* @param texture 字体的纹理
*/
public function parseFont(xml:XmlDom,texture:Texture):void

/**
* 销毁位图字体,调用Text.unregisterBitmapFont时,默认会销毁
*/
public function destory():void
/**
* 设置空格的宽(如果有字体库有空格,这里就可以不用设置了)
* @param spaceWidth
*/
public function setSpaceWidth(spaceWidth:Number):void

文章来自绿盟(xDowns.com)转载请注明来路。



上一篇文章:LayaAir引擎鼠标事件API有什么特点?LayaAir鼠标事件详解 []