cocos creator从零开发2048(03)-格子预设

Canvas/grid节点下新建空节点并重命名为root，宽高设置为730x730。

Canvas/grid/root节点下新建Sprite (单色)，宽高设置为170x170。在新建的节点下新建Label (文字)，Font Size和Line Height都设置为50。

新建scripts/Grid.ts，内容如下，并把它挂载到上面新建的Sprite (单色)节点上。这个脚本的作用就是在格子上显示数字和根据不同的数字设置不同的文字颜色和背景颜色。

const { ccclass } = cc._decorator


const COLORS = ['#ECE0D5', '#EBDCC2', '#F4A873', '#F18151', '#F1654D', '#F0462D', '#9A8032', '#F4CD50', '#78C93A', '#C9963A', '#C2BC2F', '#E64AA4', '#37C377', '#0CF694', '#35B8B5', '#984DD9']


@ccclass
export default class Grid extends cc.Component {
    private lblNum: cc.Label

    private _num: number = 0
    public get num(): number { return this._num }
    public set num(val: number) {
        this._num = val
        this.lblNum.string = val.toString()

        this.setColor()
    }

    private _pos: cc.Vec2
    public get pos(): cc.Vec2 { return this._pos }


    public init(pos: cc.Vec2) {
        this.lblNum = this.node.getComponentInChildren(cc.Label)
        this._pos = pos

        this.node.active = false
        this.node.setPosition(pos)
    }

    public reset() {
        this._num = 0

        this.node.active = false
        this.node.setPosition(this._pos)
    }

    public stopTween() {
        this.node.stopAllActions()
        this.node.scale = 1
    }


    private setColor() {
        if (!this.node.active) {
            this.node.active = true
        }

        this.lblNum.node.color = this._num <= 4 ? cc.Color.BLACK : cc.Color.WHITE

        let idx = Math.log2(this._num)
        idx = idx == COLORS.length ? COLORS.length - 1 : idx - 1

        this.node.color = new cc.Color().fromHEX(COLORS[idx])
    }
}