Cocos Creator开发游戏消灭星星——星星消除

上一篇文章写了星星生成的逻辑，详情请看Cocos Creator开发游戏消灭星星——星星生成

写在消除星星之前

星星消除是发生在用户点击之后，所以需要处理用户触摸操作。在上一篇制作星星预制时有提及，在脚本组件starCtr.js的start函数里监听触摸。

start () {
    this.node.on(cc.Node.EventType.TOUCH_START, function (event) {
        //TODO:触摸处理
    }, this);
},

消除星星是消除上下左右相连的星星，所以需要根据用户点击的星星找到其他相连的星星。在Utils中增加方法needRemoveList：

//Utils.js
//检测数组array中是否坐标p
function indexOfV2 (array, p) {
    return array.some(function (elem, index, arr) {
        return elem.x == p.x && elem.y == p.y
    });
};

//根据矩阵数据查找消除的星星
function needRemoveList (data, p) {
    var list = [];
    var travelList = [];
    travelList.push(p);

    var tag = data[p.x][p.y];
    do {
        var any = travelList.pop();
        //左
        if (any.y - 1 >= 0 && tag == data[any.x][any.y-1]) {
            var tp = cc.v2(any.x, any.y-1);
            if (!this.indexOfV2(list, tp) && !this.indexOfV2(travelList, tp)) {
                travelList.push(tp);
            }
        }
        //右
        if (any.y + 1 < Config.matrixCol && tag == data[any.x][any.y+1]) {
            var tp = cc.v2(any.x, any.y+1);
            if (!this.indexOfV2(list, tp) && !this.indexOfV2(travelList, tp)) {
                travelList.push(tp);
            }
        }
        //下
        if (any.x - 1 >= 0 && tag == data[any.x-1][any.y]) {
            var tp = cc.v2(any.x-1, any.y);
            if (!this.indexOfV2(list, tp) && !this.indexOfV2(travelList, tp)) {
                travelList.push(tp);
            }
        } 
        //上
        if (any.x + 1 < Config.matrixRow && tag == data[any.x+1][any.y]) {
            var tp = cc.v2(any.x+1, any.y);
            if (!this.indexOfV2(list, tp) && !this.indexOfV2(travelList, tp)) {
                travelList.push(tp);
            }
        }
        list.push(any);
    } while (travelList.length > 0);
    return list;
};

消除星星

现在来完成触摸处理逻辑：

//starCtr.js
//触摸处理
var list = Utils.needRemoveList(GameData.starMatrix, cc.v2(this._gx, this._gy));
if (list.length >= 2) {
    var event = new cc.Event.EventCustom("delete_stars", true);
    event.detail = list;
    this.node.dispatchEvent(event);
}

通过用户点击的星星坐标找到与其相连的星星们，然后发射delete_stars事件，通知地图消除星星。关于监听和发射时间参考官方文档监听和发射事件。

在matrixCtr.js的onLoad方法中添加事件监听

//matrixCtr.js
onLoad () {
    this.node.on("delete_stars", this.deleteSprites, this);
    //其他无关代码这里省略
},
onDestroy () {
    this._starPool.clear();
    this.node.off("delete_stars", this.deleteSprites, this); //移除监听
},

先添加几个属性来记录消除数据

//matrixCtr.js
properties: {
    //其他无关属性这里省略
    _totalCounts: 0, //总的消除星星个数
    _currCount: 0, //已经消除的星星个数
    _bombList: [], //存储待消除的星星的坐标
    _tamping: false, //夯实数组的标记，就是消除星星后的地图处理（星星下落动画、整列星星左移动画等）
},

在回调函数中处理消除逻辑

//matrixCtr.js
// 监听回调函数
deleteSprites (event) {
    if (this._tamping) {
        return;
    }
    var bombList = event.detail;
    //防止重复消除
    if (Utils.indexOfV2(this._bombList, bombList[0])) {
        return;
    }
    this._totalCounts += bombList.length;
    this._bombList = this._bombList.concat(bombList);
    this.showComboEffect(bombList.length);
    GameData.cleanStarData(bombList);
    this.bomb(bombList, bombList.length);
}

播放combo特效

上一篇说过，动画和特效主要放在节点ActionRoot中处理。如图，combo特效就在combNode节点中播放。

ActionRoot
特效是用骨骼动画制作的，所以在combNode上添加dragonBones的渲染组件，同时，再添加脚本组件dragonBonesCtr来控制逻辑。

combNode节点需要播放不同的动画，所以组件中没有指定资源，这个在脚本中控制。看一下dragonBonesCtr.js的属性：

//dragonBonesCtr.js
properties: {
    asset: {
        default: [],
        type: dragonBones.DragonBonesAsset,
    },
    atlasAsset: {
        default: [],
        type: dragonBones.DragonBonesAtlasAsset,
    },
    combName: {
        default: [],
        type: cc.String,
    },
    _anim: dragonBones.ArmatureDisplay,
},

asset、atlasAsset分别存储骨骼动画资源，combName中存储骨骼动画的名字，和资源数组一一对应，_anim是dragonBones组件。

//dragonBonesCtr.js
onLoad () {
    this._anim = this.node.getComponent(dragonBones.ArmatureDisplay);
},
playComb (type) {
    var i = this.combName.indexOf(type);
    if (i >= 0) {
        this._anim.dragonAsset = this.asset[I];
        this._anim.dragonAtlasAsset = this.atlasAsset[I];
        this._anim.armatureName = "armatureName";
        this._anim.playAnimation("Animation1");
    }
},

playComb即是播放特效的方法。

//matrixCtr.js
showComboEffect (count) {
    if (count == 5) {
        this.combCtr.playComb("GOOD");
    }
    else if (count >= 6 && count <= 7) {
        this.combCtr.playComb("NICE");
    }
    else if (count >= 8 && count <= 9) {
        this.combCtr.playComb("EXCELLENT");
    }
    else if (count >= 10) {
        this.combCtr.playComb("UNBELIEVABLE");
    }
},

combCtr是脚本组件matrixCtr中的属性，即是场景中ActionRoot节点的脚本组件。

//matrixCtr.js
properties: {
    //省略其他属性
    combCtr: cc.Node,
},
onLoad () {
    //其他无关代码这里省略
    this.combCtr = this.combCtr.getComponent("dragonBonesCtr");
},

数据处理

将需要消除的星星对应的坐标清空（赋值-1）

//gamedata.js
//清除星星
function cleanStarData (list) {
    list.forEach(function (elem, index, arr) {
        this.starMatrix[elem.x][elem.y] = -1;
    }, this);
};

消除星星

按规则星星是一个一个消除的，所以bomb会递归调用，直到所有星星都消除。在消除星星的同时，有分数计算和动画逻辑。

//matrixCtr.js
bomb (list, count) {
    if (list.length > 0) {
        var gridPos = list.shift();
        var index = Utils.indexValue(gridPos.x, gridPos.y);
        this.bombStar(GameData.starSprite[index]);
        GameData.starSprite[index] = null;
        ++this._currCount;
        //单个方块的分数动画
        var wp = this.convertGridPositionToWorldSpaceAR(gridPos);
        var starScore = Utils.getOneScore(count-list.length);
        this.actCtr.playSingleScoreAction(starScore, wp);
        
        this.scheduleOnce(function () {
            this.bomb(list, count);
        }, 0.1);
        
        if (list.length == 0) {
            //消除总得分动画
            var wp = this.convertGridPositionToWorldSpaceAR(gridPos);
            this.actCtr.showScoreAction(Utils.getScore(count), wp);
            this.uiCtr.updateScoreSchedule(starScore); //当前总分滚动累计效果
        }
        else {
            this.uiCtr.updateScore(starScore);
        }
        this.checkIsSuccessed(); //检测是否达到目标分
    }
    else {
        //TODO: 星星消除完的逻辑处理
    }
},

星星的移除是在方法bombStar中处理的，在创建星星的时候使用了对象池，所以移除时把它重新放入对象池。

//matrixCtr.js
bombStar (node) {
    if (node) {
        var p = node.getPosition();
        var type = node.getComponent("starCtr")._starType;
        this._starPool.put(node); //移除星星，把它放入对象池中
        // 星星爆炸动画
        var particle = cc.instantiate(this.starParticle);
        particle.setPosition(p);
        this.node.addChild(particle);
        particle.getComponent("particleCtr").init(type);
    }
},

在移除星星的同时，伴随有星星爆炸的特效。starParticle是一个预制，层级很简单，在一个空节点中，添加Particle System组件和脚本组件particleCtr。

particleCtr
starSpriteFrames中存储了粒子系统使用的纹理资源，对应每一种星星。

//particleCtr.js
properties: {
    particle: cc.ParticleSystem,
    starSpriteFrames: {
        default: [],
        type: cc.SpriteFrame,
    },
},
init (type) {
    this.particle.spriteFrame = this.starSpriteFrames[type];
    this.particle.resetSystem();
},

Particle System组件设置自动移除，在属性检查器中勾选Auto Remove On Finish选项。

分数计算

我们知道一次消除星星方块越多，得分越高。

//Utils.js
//消除得分计算
function getScore (count) {
    var score = 0;
    for(var i = 0; i < count; i++) {
        score += this.getOneScore(i);
    }
    return score;
};
//消除第i个方块的分数
function getOneScore (i) {
    return 10 + (i-1) * 5;
};

分数动画有几种：

• 单个方块的分数动画
• 消除总得分动画
• 当前总分有滚动累计的效果

//matrixCtr.js
//格子的世界坐标
convertGridPositionToWorldSpaceAR (gp) {
    var p = Utils.grid2Pos(gp.x, gp.y);
    var wp = this.node.convertToWorldSpaceAR(p);
    return wp;
},

动画在actionCtr.js中处理：

//actionCtr.js
//单个方块的分数动画
playSingleScoreAction (score, wp) {
    var label = null;
    if (this._pScorePool.size() > 0) {
        label = this._pScorePool.get();
    }
    else {
        label = cc.instantiate(this.partScore);
    }
    label.getComponent("partScore").setScore(score);
    this.node.addChild(label);
    label.setPosition(this.convertPosition(wp));

    var action = cc.spawn(cc.scaleTo(0.5, 0.4), cc.moveTo(0.5, this.refrencePoint.getPosition()));
    label.runAction(cc.sequence(action, cc.delayTime(0.2), cc.callFunc(function(){
        this._pScorePool.put(label);
    }, this)));
},
// 世界坐标转成当前节点中的坐标
convertPosition (wp) {
    return this.node.convertToNodeSpaceAR(wp);
},

因为分数也会被频繁的创建和移除，所以也使用了对象池，分数的预制制作后面介绍。

//actionCtr.js
properties: {
    // 省略其他无关属性
    totalScore: cc.Prefab,
    _tScorePool: null,
    
    partScore: cc.Prefab,
    _pScorePool: null,
    poolCapacity: 30,
},
onLoad () {
    this._pScorePool = new cc.NodePool();
    for (var i = 0; i < this.poolCapacity; ++i) {
        var partscore = cc.instantiate(this.partScore);
        this._pScorePool.put(partscore);
    }
    this._tScorePool = new cc.NodePool();
    for (var i = 0; i < 3; ++i) {
        var totalscore = cc.instantiate(this.totalScore);
        this._tScorePool.put(totalscore);
    }
},

与单个方块的分数动画一样，消除总得分动画：

//actionCtr.js
//消除总得分动画
showScoreAction (score, wp) {
    var node = null;
    if (this._tScorePool.size() > 0) {
        node = this._tScorePool.get();
    }
    else {
        node = cc.instantiate(this.totalScore);
    }
    this.node.addChild(node);

    node.getComponent("totalScore").setScore(score);
    var lw = node.getComponent("totalScore").scoreLabel.node.width;
    var ddd = lw * 0.5 * 1.2;
    var eddd = ddd - cc.winSize.width*0.5;
    var p = this.convertPosition(wp);
    if (p.x < eddd) {
        p.x = eddd;
    }
    if (p.x > cc.winSize.width*0.5 - ddd) {
        p.x = cc.winSize.width*0.5 - ddd;
    }
    node.setPosition(p);
},

分数预制

分数预制

层级结构很简单，都是空节点下加一个Label节点。父节点上都有一个脚本组件partScore、totalScore。

//partScore.js
properties: {
    scoreLabel: cc.Label,
},
setScore (score) {
    this.scoreLabel.string = score;
},

脚本也很简单，setScore方法给Label赋值。

//totalScore.js
properties: {
    scoreLabel: cc.Label,
},
setScore (score) {
    this.scoreLabel.string = "+"+score;
    this.playAnim();
},
playAnim () {
    var anim = this.scoreLabel.getComponent(cc.Animation);
    anim.play();
},

与单个分数不同的，总得分的Label动画使用Creator的Animation编辑器制作。所以，预制中需要在节点label中添加Animation组件，在这里我们在添加一个脚本组件totalScoreLabel，这个脚本主要处理Animation动画的事件回调方法。