CocosCreator之KUOKUO带你用粒子组件放烟花

本次引擎2.0.5

编辑工具VSCode

如遇不会某个步骤可以先过一遍之前教程，或者下方评论，感谢支持！

 

目标：学会使用粒子组件

今天教大家学习粒子系统，放烟花；

好，为了让粒子看的容易，我们这次弄黑色背景：

加入一个粒子：

好了，让我们把鼠标放上去了解一下面板上的属性值都是干什么的：

然后把开始就运行关掉，点开Custom（自定义）。

这里有很多属性，小伙伴们可以自己去尝试，我们今天放烟花就用4个：

Duration(发射器存在时间),我们定为2秒；

Life（粒子生存时间），我们定为2秒，随机偏差归零。

Total Particles（粒子总数），我们定为200吧。

然后我们把发射器类型改为圆形（Emitter Mode）,因为是烟花；

开始半径为0，结束为100；

好，我们看看效果：

有点密集，怎么办呢，有这个属性，每秒发射量：

我们改为150，这样一共200个粒子会在1.5秒内发射完。

我们看一下效果，嗯，真不错。

进阶：

让我们把粒子做成预制资源，多放几个烟花：

然后，用到了上上个教程所教的对象池的使用：

我给了Canvas根节点脚本main.js

声明了预制体：

给出代码：

cc.Class({
    extends: cc.Component,

    properties: {
        // 声明一个预制体
        yanhua : cc.Prefab,
    },

    start() {
        // 烟花对象池
        this.yanhuaPool = new cc.NodePool();
        // 预先放20个烟花进去
        var initCount = 20;
        for(var i = 0;i < initCount;i ++){
            var yanhua = cc.instantiate(this.yanhua);
            this.yanhuaPool.put(yanhua);
        }
        // 计时器，从第0秒开始，每隔1秒放一个，放15+1=16次
        this.schedule(this.createYanhua,1,15,0);
    },

    // 制造烟花
    createYanhua(){
        // 防止对象池为空
        if(this.yanhuaPool.size() > 0) {
            var yanhua = this.yanhuaPool.get();
        }
        else {
            var yanhua = cc.instantiate(this.yanhua);
        }
        // 设置父节点
        yanhua.parent = this.node;
        // 随机位置（960 * 640）
        yanhua.x = -480 + 960 * Math.random();
        yanhua.y = -320 + 640 * Math.random();
        // resetSystem()函数重置发射器，开始发射粒子;
        yanhua.getComponent(cc.ParticleSystem).resetSystem();
        // 4秒后自动回收
        this.scheduleOnce(function(){
            // 回收之前stopSystem();
            yanhua.getComponent(cc.ParticleSystem).stopSystem();
            this.yanhuaPool.put(yanhua);
        },4);

    },
});

运行一下：

怎么样，是不是很好看！

O(∩_∩)O~~