Cocos2d-JS內置粒子系統

時間 2019-11-05

原文原文鏈接

從類圖中咱們能夠看到，Cocos2d-JS中有內置的11種粒子，這些粒子的屬性都是預先定義好的，咱們也能夠在程序代碼中單獨修改某些屬性，咱們在上一節的實例中都已經實現了這些屬性的設置。
內置粒子系統
內置的11種粒子系統說明以下：
ParticleExplosion。爆炸粒子效果，屬於半徑模式。
ParticleFire。火焰粒子效果，屬於重力徑模式。
ParticleFireworks。煙花粒子效果，屬於重力模式。
ParticleFlower。花粒子效果，屬於重力模式。
ParticleGalaxy。星系粒子效果，屬於半徑模式。
ParticleMeteor。流星粒子效果，屬於重力模式。
ParticleSpiral。漩渦粒子效果，屬於半徑模式。
ParticleSnow。雪粒子效果，屬於重力模式。
ParticleSmoke。煙粒子效果，屬於重力模式。
ParticleSun。太陽粒子效果，屬於重力模式。
ParticleRain。雨粒子效果，屬於重力模式。
這11種粒子的屬性，根據它的發射模式不一樣,效果不一樣。
實例：內置粒子系統
下面咱們經過一個實例演示一下這11種內置粒子系統。這個實例如圖所示，左圖是一個操做菜單場景，選擇菜單能夠進入到上圖動做場景，在下圖動做場景中演示選擇的粒子系統效果，點擊右下角返回按鈕能夠返回到菜單場景。

html

內置粒子系統實例瀏覽器

下面咱們重點介紹一下場景MyActionScene，它的MyActionScene.js代碼以下：
微信

[html] view plain copy 函數

var MyActionLayer = cc.Layer.extend({ 網站
flagTag: 0, // 操做標誌 this
pLabel: null, ① spa
ctor: function (flagTag) { .net
this._super(); code
this.flagTag = flagTag; orm
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課堂微信公共平臺，瞭解最新技術文章、圖書、教程信息