从类图中我们可以看到,cocos2d-js中有内置的11种粒子,这些粒子的属性都是预先定义好的,我们也可以在程序代码中单独修改某些属性,我们在上一节的实例中都已经实现了这些属性的设置。
内置粒子系统
内置的11种粒子系统说明如下:
particleexplosion。爆炸粒子效果,属于半径模式。
particlefire。火焰粒子效果,属于重力径模式。
particlefireworks。烟花粒子效果,属于重力模式。
particleflower。花粒子效果,属于重力模式。
particlegalaxy。星系粒子效果,属于半径模式。
particlemeteor。流星粒子效果,属于重力模式。
particlespiral。漩涡粒子效果,属于半径模式。
particlesnow。雪粒子效果,属于重力模式。
particlesmoke。烟粒子效果,属于重力模式。
particlesun。太阳粒子效果,属于重力模式。
particlerain。雨粒子效果,属于重力模式。
这11种粒子的属性,根据它的发射模式不同,效果不同。
实例:内置粒子系统
下面我们通过一个实例演示一下这11种内置粒子系统。这个实例如图所示,左图是一个操作菜单场景,选择菜单可以进入到上图动作场景,在下图动作场景中演示选择的粒子系统效果,点击右下角返回按钮可以返回到菜单场景。
2.jpg
内置粒子系统实例
下面我们重点介绍一下场景myactionscene,它的myactionscene.js代码如下:
var myactionlayer = cc.layer.extend({
flagtag: 0, // 操作标志
plabel: null, ①
ctor: function (flagtag) {
this._super();
this.flagtag = flagtag;
cc.log(myactionlayer init flagtag + this.flagtag);
var size = cc.director.getwinsize();
var backmenuitem = new cc.labelbmfont(
backmenuitem.x = size.width - 100;
backmenuitem.y = 100;
var mn = cc.menu.create(backmenuitem);
mn.x = 0;
mn.y = 0;
mn.anchorx = 0.5;
mn.anchory = 0.5;
this.addchild(mn);
this.plabel = new cc.labelbmfont(, res.fnt_fnt);
this.plabel.x = size.width /2;
this.plabel.y = size.height - 50;
this.addchild(this.plabel, 3);
return true;
},
backmenu: function (sender) {
cc.director.popscene();
},
onentertransitiondidfinish: function () {
cc.log(tag = + this.flagtag);
var sprite = this.getchildbytag(sp_tag);
var size = cc.director.getwinsize();
var system;
switch (this.flagtag) { ②
case actiontypes.kexplosion:
system = new cc.particleexplosion();
this.plabel.setstring(explosion);
break;
case actiontypes.kfire:
system = new cc.particlefire();
system.texture = cc.texturecache.addimage(res.s_fire); ③
this.plabel.setstring(fire);
break;
case actiontypes.kfireworks:
system = new cc.particlefireworks();
this.plabel.setstring(fireworks);
break;
case actiontypes.kflower:
system = new cc.particleflower();
this.plabel.setstring(flower);
break;
case actiontypes.kgalaxy:
system = new cc.particlegalaxy();
this.plabel.setstring(galaxy);
break;
case actiontypes.kmeteor:
system = new cc.particlemeteor();
this.plabel.setstring(meteor);
break;
case actiontypes.krain:
system = new cc.particlerain();
this.plabel.setstring(rain);
break;
case actiontypes.ksmoke:
system = new cc.particlesmoke();
this.plabel.setstring(smoke);
break;
case actiontypes.ksnow:
system = new cc.particlesnow();
this.plabel.setstring(snow);
break;
case actiontypes.kspiral:
system = new cc.particlespiral();
this.plabel.setstring(spiral);
break;
case actiontypes.ksun:
system = new cc.particlesun();
this.plabel.setstring(sun);
break; ④
}
system.x = size.width /2;
system.y = size.height /2;
this.addchild(system);
}
});
var myactionscene = cc.scene.extend({
onenter: function () {
this._super();
}
});
在头文件中第①行代码定义了labelbmfont类型的成员变量plabel,用来在场景中显示粒子系统的名称。
我们在myactionlayer的onentertransitiondidfinish函数中创建粒子系统对象,而不是在myactionlayer的onenter函数创建,这是因为myactionlayer的onenter函数调用时,场景还没有显示,如果在该函数中创建爆炸等显示一次的粒子系统,等到场景显示的时候,爆炸已经结束了,我们会看不到效果。
代码第②~④行创建了11种粒子系统,这里创建粒子系统时候都采用了它们的默认属性值。其中this.plabel.setstring(xxx)函数是为场景中标签设置内容,这样在进入场景后可以看到粒子系统的名称。
另外,如果在web浏览器中运行还需要为粒子系统添加纹理,我们只在代码第③行添加了火粒子纹理,其它的粒子纹理添加类似。
