Cocos2d-JS内置粒子系统

从类图中我们可以看到,Cocos2d-JS中有内置的11种粒子,这些粒子的属性都是预先定义好的,我们也可以在程序代码中单独修改某些属性,我们在上一节的实例中都已经实现了这些属性的设置。
内置粒子系统
内置的11种粒子系统说明如下: 
ParticleExplosion。爆炸粒子效果,属于半径模式。
ParticleFire。火焰粒子效果,属于重力径模式。
ParticleFireworks。烟花粒子效果,属于重力模式。
ParticleFlower。花粒子效果,属于重力模式。
ParticleGalaxy。星系粒子效果,属于半径模式。
ParticleMeteor。流星粒子效果,属于重力模式。
ParticleSpiral。漩涡粒子效果,属于半径模式。
ParticleSnow。雪粒子效果,属于重力模式。
ParticleSmoke。烟粒子效果,属于重力模式。
ParticleSun。太阳粒子效果,属于重力模式。
ParticleRain。雨粒子效果,属于重力模式。
这11种粒子的属性,根据它的发射模式不同,效果不同。
实例:内置粒子系统
下面我们通过一个实例演示一下这11种内置粒子系统。这个实例如图所示,左图是一个操作菜单场景,选择菜单可以进入到上图动作场景,在下图动作场景中演示选择的粒子系统效果,点击右下角返回按钮可以返回到菜单场景。

Cocos2d-JS内置粒子系统_第1张图片

内置粒子系统实例

下面我们重点介绍一下场景MyActionScene,它的MyActionScene.js代码如下:

[html] view plaincopy在CODE上查看代码片

  1. var MyActionLayer = cc.Layer.extend({  

  2.     flagTag: 0,                         // 操作标志  

  3.     pLabel: null,                                                       ①  

  4.     ctor: function (flagTag) {  

  5.        

  6.         this._super();  

  7.         this.flagTag = flagTag;  

  8.   

  9.   

  10.         cc.log("MyActionLayer init flagTag " + this.flagTag);  

  11.   

  12.   

  13.         var size = cc.director.getWinSize();  

  14.   

  15.   

  16.         var backMenuItem = new cc.LabelBMFont("<Back", res.fnt_fnt);  

  17.         var backMenuItem = new cc.MenuItemLabel(backMenuItem, this.backMenu, this);  

  18.         backMenuItem.x = size.width - 100;  

  19.         backMenuItem.y = 100;  

  20.   

  21.   

  22.         var mn = cc.Menu.create(backMenuItem);  

  23.         mn.x = 0;  

  24.         mn.y = 0;  

  25.         mn.anchorX = 0.5;  

  26.         mn.anchorY = 0.5;  

  27.         this.addChild(mn);  

  28.   

  29.   

  30.         this.pLabel =  new cc.LabelBMFont("", res.fnt_fnt);  

  31.         this.pLabel.x = size.width /2;  

  32.         this.pLabel.y = size.height  - 50;  

  33.         this.addChild(this.pLabel, 3);  

  34.   

  35.   

  36.         return true;  

  37.     },  

  38.     backMenu: function (sender) {  

  39.         cc.director.popScene();  

  40.     },  

  41.     onEnterTransitionDidFinish: function () {  

  42.         cc.log("Tag = " + this.flagTag);  

  43.         var sprite = this.getChildByTag(SP_TAG);  

  44.         var size = cc.director.getWinSize();  

  45.   

  46.   

  47.        var system;  

  48.         switch (this.flagTag) {                                         ②  

  49.             case ActionTypes.kExplosion:  

  50.                 system = new cc.ParticleExplosion();  

  51.                 this.pLabel.setString("Explosion");  

  52.                 break;  

  53.             case ActionTypes.kFire:  

  54.                 system = new cc.ParticleFire();  

  55.                             system.texture = cc.textureCache.addImage(res.s_fire);              ③  

  56.                 this.pLabel.setString("Fire");  

  57.                 break;  

  58.             case ActionTypes.kFireworks:  

  59.                 system = new cc.ParticleFireworks();  

  60.                 this.pLabel.setString("Fireworks");  

  61.                 break;  

  62.             case ActionTypes.kFlower:  

  63.                 system = new cc.ParticleFlower();  

  64.                 this.pLabel.setString("Flower");  

  65.                 break;  

  66.             case ActionTypes.kGalaxy:  

  67.                 system = new cc.ParticleGalaxy();  

  68.                 this.pLabel.setString("Galaxy");  

  69.                 break;  

  70.             case ActionTypes.kMeteor:  

  71.                 system = new cc.ParticleMeteor();  

  72.                 this.pLabel.setString("Meteor");  

  73.                 break;  

  74.             case ActionTypes.kRain:  

  75.                 system = new cc.ParticleRain();  

  76.                 this.pLabel.setString("Rain");  

  77.                 break;  

  78.             case ActionTypes.kSmoke:  

  79.                 system = new cc.ParticleSmoke();  

  80.                 this.pLabel.setString("Smoke");  

  81.                 break;  

  82.             case ActionTypes.kSnow:  

  83.                 system = new cc.ParticleSnow();  

  84.                 this.pLabel.setString("Snow");  

  85.                 break;  

  86.             case ActionTypes.kSpiral:  

  87.                 system = new cc.ParticleSpiral();  

  88.                 this.pLabel.setString("Spiral");  

  89.                 break;  

  90.             case ActionTypes.kSun:  

  91.                 system = new cc.ParticleSun();  

  92.                 this.pLabel.setString("Sun");  

  93.                 break;                                                  ④  

  94.         }  

  95.   

  96.   

  97.         system.x = size.width /2;  

  98.         system.y = size.height /2;  

  99.   

  100.   

  101.         this.addChild(system);  

  102.     }  

  103. });  

  104.   

  105.   

  106. var MyActionScene = cc.Scene.extend({  

  107.     onEnter: function () {  

  108.         this._super();  

  109.     }  

  110. });  



在头文件中第①行代码定义了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&amp;categoryId=0

《Cocos2d-x实战 JS卷》现已上线,各大商店均已开售:

京东:http://item.jd.com/11659698.html

欢迎关注智捷iOS课堂微信公共平台,了解最新技术文章、图书、教程信息
Cocos2d-JS内置粒子系统_第2张图片


你可能感兴趣的:(cocos2d-js)