EUI组件之BitmapLabel 位图字体

 

一、制作文图字体文件

使用TextureMerger制作位图字体，具体查看 官方教程。

我们这里制作了一组位图字体。

 

二、导入位图字体

位图字体素材放入资源配置文件default.res.json

 

 三、EXML中使用位图字体

 拖动一个bitmaplabel组件到exml上

设置右侧属性栏“位图字体”为countdown_fnt

标签为“123”，如下图所示，可正常显示位图字体了

 

 

 其他：

 1. 位图字体文件fnt配置

fnt内保存了图片名，以及各个数字图片的坐标、高宽等信息

 

2. 位图字体居中

位图字体没有普通Label的居中、居右、居左等设置

 

如果要位图字体居中，则需要增加一个定位用的Group容器，并将位图字体的width自动扩展，如下图所示：

 

3. 怎么在代码中创建BitmapLabel？

/**
 * 主页场景
 * @author chenkai 2018/5/26
 */
class HomeScene extends eui.Component{
	private bmFont:eui.BitmapLabel;

	public constructor() {
		super();
		this.skinName = "HomeSceneSkin";
	}

	protected childrenCreated(){
		this.bmFont = new eui.BitmapLabel();
		this.bmFont.font = "countdown_fnt";  //设置字体配置文件
		this.bmFont.text = "123";
		this.addChild(this.bmFont);
	}
}