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

本次引擎2.0.5

编辑工具VSCode

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

 

目标:学会使用粒子组件

今天教大家学习粒子系统,放烟花;

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

CocosCreator之KUOKUO带你用粒子组件放烟花_第1张图片

加入一个粒子:

CocosCreator之KUOKUO带你用粒子组件放烟花_第2张图片

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

CocosCreator之KUOKUO带你用粒子组件放烟花_第3张图片

然后把开始就运行关掉,点开Custom(自定义)。

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

CocosCreator之KUOKUO带你用粒子组件放烟花_第4张图片

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

Life(粒子生存时间),我们定为2秒,随机偏差归零。

Total Particles(粒子总数),我们定为200吧。

CocosCreator之KUOKUO带你用粒子组件放烟花_第5张图片

然后我们把发射器类型改为圆形(Emitter Mode),因为是烟花;

开始半径为0,结束为100;

好,我们看看效果:

CocosCreator之KUOKUO带你用粒子组件放烟花_第6张图片

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

CocosCreator之KUOKUO带你用粒子组件放烟花_第7张图片

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

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

CocosCreator之KUOKUO带你用粒子组件放烟花_第8张图片

进阶:

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

CocosCreator之KUOKUO带你用粒子组件放烟花_第9张图片

然后,用到了上上个教程所教的对象池的使用:

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

声明了预制体:

CocosCreator之KUOKUO带你用粒子组件放烟花_第10张图片

给出代码:

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);

    },
});

运行一下:

CocosCreator之KUOKUO带你用粒子组件放烟花_第11张图片

怎么样,是不是很好看!

O(∩_∩)O~~

你可能感兴趣的:(CocosCreator之KUOKUO带你用粒子组件放烟花)