前言: 开发过程中,难免用到艺术字体来代替纯文本。接下来我们了解一下CCC中艺术字体的使用。
制作 LabelAtlas
1、准备一张包含所需字体样式的图片,如下图所示(示例资源大小为 1000 x 46, 每个艺术字像素为100 x 46)。
2、在 资源管理器 中,右键点击选择 新建 -> 艺术数字配置,并命名为numAtlas,选中该标签,我们可以在 属性检查器 中看到如图所示属性。
Ram Texture … :拖拽第1条提到的资源至此处。
Item width :指定每一个字符的宽度。
Item height :指定每一个字符的高度。
Start Char :指定艺术字体里面的第一个字符,如果字符是 Space,也需要在这个属性里面输入空格字符。
3、numAtlas制作完毕之后,我们创建一个节点,来显示一些数字。在 层级管理器 中新建 空节点labelNode,并设置其 Size大小; 再创建 文本numLabel。
4、选中numLabel,在 属性检查器 中配置参数。其中Font属性需要绑定第2条创建的numAtlas 资源。
显示艺术字体
创建完毕之后,我们来显示看一下。
1、新建一个showLabel.js文件,主要实现点击艺术字体时,艺术字体会加1的功能。
//该脚本要绑定在labelNode节点上
cc.Class({
extends: cc.Component,
properties: {
//显示艺术字体的Label
numLabel : cc.Label,
},
onLoad () {
var self = this
//点击当前节点
this.node.on(cc.Node.EventType.TOUCH_START, function (args){
var num = self.numLabel.getComponent(cc.Label).string
self.numLabel.string = ++num
})
},
start () {
},
});
上述代码 self.numLabel.getComponent(cc.Label).string 也可以换一种方式,直接用 self.numLabel.string
2、绑定脚本和文字属性
在labelNode节点中添加labelNode.js脚本,并配置numLabel。接下来我们运行一下,即可实现每次点击艺术字体,就会自动显示下一数字。