CocosCreator项目实战（03）：背景块设置

---

一、背景块节点

1. 在bg节点下创建Sprite(单色)节点命名为block，在block节点下创建Label节点命名为numberLabel，可预先设置numberLabel的String为2048，字体大小为60，行高为64，字体颜色为#000000。

---

二、预制资源

1. 因为需要动态创建多个block，所以将它从层级管理器拖到资源管理器的prefabs目录下，删除层级管理器下的block节点。

2. 在scripts目录下创建game脚本，选中层级管理器的Canvas节点，将game脚本拖到右侧属性管理器中，会自动在Canvas添加该game脚本。

3. 双击game进行脚本编写（需要关联外部编辑器，个人推荐使用VS Code），可删除如图注释部分。

4. 首先在属性properties中添加五个属性并保存game.js文件，并回到Cocos点击Canvas将scoreLabel、block和bg拖过去与右侧属性绑定。
   scoreLabel：分数标签；
   score：分数值；
   blockPrefab：预制的数字块资源；
   gap：数字块的间隔。
   bg：背景，根节点。

    properties: {
        scoreLabel: cc.Label,
        score: 0,
        blockPrefab: cc.Prefab,
        gap: 20,
        bg: cc.Node,
    },

---

三、绘制第一个背景块

1. 绘制第一个背景块。设置常量ROWS为4，方便之后更改。在start()中调用drawBgBlocks()方法。
   编写drawBgBlocks()方法，首先获取背景块的边长，可通过(屏幕宽度 - 间隔 * (ROWS + 1)) / ROWS得到，定义第一个背景块的位置，x为(间隔+半个边长)，y为边长，实例一个block，宽和高为边长，在bg节点添加这个block，设置block位置为(x,y)。预览后可看到第一个背景块。

const ROWS = 4;

cc.Class({

    extends: cc.Component,

    properties: {
        scoreLabel: cc.Label,
        score: 0,
        blockPrefab: cc.Prefab,
        gap: 20,
        bg: cc.Node,
    },

    // LIFE-CYCLE CALLBACKS:

    // onLoad () {},

    start() {
        this.drawBgBlocks();
    },

    drawBgBlocks() {
        this.blockSize = (cc.winSize.width - this.gap * (ROWS + 1)) / ROWS;
        let x = this.gap + this.blockSize / 2;
        let y = this.blockSize;
        let block = cc.instantiate(this.blockPrefab);
        block.width = this.blockSize;
        block.height = this.blockSize;
        this.bg.addChild(block);
        block.setPosition(cc.v2(x, y));
    },

    // update (dt) {},
});

2. 在scripts目录下新建colors脚本，双击编辑，定义一个colors数组，在相应索引存储不同颜色值。

var colors = [];

colors[0] = cc.color(198, 184, 172);
colors[2] = cc.color(235, 224, 213);
colors[4] = cc.color(234, 219, 193);
colors[8] = cc.color(240, 167, 110);
colors[16] = cc.color(244, 138, 89);
colors[32] = cc.color(245, 112, 85);
colors[64] = cc.color(245, 83, 52);
colors[128] = cc.color(234, 200, 103);
colors[256] = cc.color(234, 197, 87);
colors[512] = cc.color(234, 192, 71);
colors[1024] = cc.color(146, 208, 80);
colors[2048] = cc.color(0, 176, 240);

module.exports = colors;

3. 在scripts目录下新建block脚本，双击block预制资源，将block脚本拖到右侧属性中与资源绑定。

4. 双击block脚本进行编辑，先引入colors，在属性添加numberLabel，在Cocos中block中绑定numberLabel，编写setNum()方法。
   传入参数number，如果number为0，则文字标签不可见，设置文字标签值为number，如果number在colors这个稀疏数组中，则赋予block节点相应的颜色。保存block节点。

import colors from 'colors';

cc.Class({
    extends: cc.Component,

    properties: {
        numberLabel: cc.Label,
    },

    // LIFE-CYCLE CALLBACKS:

    // onLoad () {},

    start() {

    },

    setNumber(number) {
        if (number == 0) {
            this.numberLabel.node.active = false;
        }
        this.numberLabel.string = number;
        if (number in colors) {
            this.node.color = colors[number];
        }
    }

    // update (dt) {},
});

5. 在game.js中添加相关代码设置block。在drawBgBlocks()添加最后一行，调用block脚本设置number为8。预览可得数字块为设置的颜色与相应文字标签。

    drawBgBlocks() {
		...
        block.getComponent('block').setNumber(8);
    },

---

四、绘制所有背景块

1. 修改drawBgBlocks()，将数字块的绘制放入一个双层for循环中，将setNumber()传入值改为0。并定义一个positions数组用于存放每个数字块的位置。预览可得ROWS * ROWS的所有背景块。

    drawBgBlocks() {
        this.blockSize = (cc.winSize.width - this.gap * (ROWS + 1)) / ROWS;
        let x = this.gap + this.blockSize / 2;
        let y = this.blockSize;
        this.positions = [];
        for (let i = 0; i < ROWS; ++i) {
            this.positions.push([]);
            for (let j = 0; j < ROWS; ++j) {
                let block = cc.instantiate(this.blockPrefab);
                block.width = this.blockSize;
                block.height = this.blockSize;
                this.bg.addChild(block);
                block.setPosition(cc.v2(x, y));
                this.positions[i][j] = cc.v2(x, y);
                x += this.gap + this.blockSize;
                block.getComponent('block').setNumber(0);
            }
            y += this.gap + this.blockSize;
            x = this.gap + this.blockSize / 2;
        }
    },

2. 至此，所有背景块的设置已完成。

---