本次引擎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~~