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

Posted 2023-03-28

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

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

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

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

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

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

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

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

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

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

playComb即是播放特效的方法。

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

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

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

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

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

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

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

分数动画有几种：

动画在actionCtr.js中处理：

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

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

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

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

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