Cocos2d-JS内置粒子系统，cocos2d-js内置粒子
从类图中我们可以看到，Cocos2d-JS中有内置的11种粒子，这些粒子的属性都是预先定义好的，我们也可以在程序代码中单独修改某些属性，我们在上一节的实例中都已经实现了这些属性的设置。内置粒子系统内置的11种粒子系统说明如下： ParticleExplosion。爆炸粒子效果，属于半径模式。ParticleFire。火焰粒子效果，属于重力径模式。ParticleFireworks。烟花粒子效果，属于重力模式。ParticleFlower。花粒子效果，属于重力模式。ParticleGalaxy。星系粒子效果，属于半径模式。ParticleMeteor。流星粒子效果，属于重力模式。ParticleSpiral。漩涡粒子效果，属于半径模式。ParticleSnow。雪粒子效果，属于重力模式。ParticleSmoke。烟粒子效果，属于重力模式。ParticleSun。太阳粒子效果，属于重力模式。ParticleRain。雨粒子效果，属于重力模式。这11种粒子的属性，根据它的发射模式不同,效果不同。实例：内置粒子系统下面我们通过一个实例演示一下这11种内置粒子系统。这个实例如图所示，左图是一个操作菜单场景，选择菜单可以进入到上图动作场景，在下图动作场景中演示选择的粒子系统效果，点击右下角返回按钮可以返回到菜单场景。
内置粒子系统实例下面我们重点介绍一下场景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("<Back", res.fnt_fnt);
var backMenuItem = new cc.MenuItemLabel(backMenuItem, this.backMenu, this);
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浏览器中运行还需要为粒子系统添加纹理，我们只在代码第③行添加了火粒子纹理，其它的粒子纹理添加类似。
更多内容请关注最新Cocos图书《Cocos2d-x实战：JS卷——Cocos2d-JS开发》本书交流讨论网站：http://www.cocoagame.net欢迎加入Cocos2d-x技术讨论群：257760386更多精彩视频课程请关注智捷课堂Cocos课程：http://v.51work6.com智捷课堂现推出Cocos会员，敬请关注：http://v.51work6.com/courseInfoRedirect.do?action=netDetialInfo&courseId=844465 categoryId=0
《Cocos2d-x实战 JS卷》现已上线，各大商店均已开售：
京东：http://item.jd.com/11659698.html
欢迎关注智捷iOS课堂微信公共平台，了解最新技术文章、图书、教程信息
http://www.bkjia.com/Androidjc/979475.htmlwww.bkjia.comtruehttp://www.bkjia.com/Androidjc/979475.htmlTechArticleCocos2d-JS内置粒子系统，cocos2d-js内置粒子 从类图中我们可以看到，Cocos2d-JS中有内置的11种粒子，这些粒子的属性都是预先定义好的，我们也...
