CocosCreator + nodeJs 课程12 艺术数字资源

前言： 开发过程中，难免用到艺术字体来代替纯文本。接下来我们了解一下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。接下来我们运行一下，即可实现每次点击艺术字体，就会自动显示下一数字。