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

上一篇文章写了星星生成的逻辑，详情请看 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动画的事件回调方法。

点击出现金币是Cocos Creator支持的一项功能，可以用来让玩家在游戏过程中获得金币奖励。这个功能可以通过设置游戏中的特定条件来触发，比如当玩家完成一个任务时、进入到一个新的场景时或者获得一定数量的分数时。点击出现金币功能可以让游戏更加有趣，也可以激励玩家继续游戏。

在正式开始之前，我们可能还需要完成一个前置步骤，也是很重要的一步—— 设置各种各样的分辨率去验证我们当前方案是否能完美适配

Cocos Creator 已经帮我们内置了部分手机的分辨率设置，比如我们运行游戏在网页上进行调试时，可以在浏览器左上角上可以选择不同机型以作为预览的分辨率

但是，内置的部分机型的分辨率并不足以完成我们多分辨率适配的测试，既然我们要做多分辨率测试，那么我们可能需要极端一点的，比如：100x100，200x400等诸如此类分辨率的作为测试用例参考，那么我们应该怎么设置呢？

Cocos Creator 网页预览模板在运行前会加载 boot.js 文件，在这份文件中，我们可以定义我们期望的设计分辨率，以下为 boot.js 文件在不同平台上的路径

打开上述路径的 boot.js 文件，在 devices 中添加下面我们期望的分辨率内容即可：

比如，填入下面这份参考的分辨率

填好后，大概这样子

然后刷新我们的游戏在浏览器中的页面，就可以在左上角的机型选择中找到我们刚刚添加的几个机型了

了解和上面这些 *** 作之后，我们以后就可以随时添加不同分辨率了。

可以自行上该机型官网查询该机型参数，得到实际分辨率

相当于分辨率比率，比如： 1080x1920 的分辨率可以写成

以上写法都是等价的，皆都代表实际分辨率为 1080x1920 。那么既然都是表示一样的分辨率，那么为什么还存在ratio这个参数呢，这个参数的意义在哪里呢？

我们先来看一组直观的实际运行结果，同一个场景对应上面3个分辨率设置：

可以看到 ratio 1 预览分辨率太大，右方和下方都出现滚动条了，而 radio 2 和 radio 3 则不会。到这里，相信大家已经对 ratio 有一定概念

配合width，height参数，我们整理一下，用文字解释归纳一下：

当前设备的宽高如下：

完成上一节的阅读之后，相信你已经了解如何设置多分辨率预览模式。

为了支持我们的多分辨率完美适配，我们将以 720x1280(9:16) 的分辨率作为设计分辨率，同时设置下面4组分辨率去作为我们的测试分辨率，去模拟实际情况下，有可能出现的不同宽高比。

至此，本章完毕。

---