Cocos2d-JS内置粒子系统

标签：

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

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

[html] view plaincopy

 

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浏览器中运行还需要为粒子系统添加纹理，我们只在代码第③行添加了火粒子纹理，其它的粒子纹理添加类似。

本书交流讨论网站：http://www.cocoagame.net

更多精彩视频课程请关注智捷课堂Cocos课程：http://v.51work6.com

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

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

欢迎关注智捷iOS课堂微信公共平台，了解最新技术文章、图书、教程信息

Cocos2d-JS内置粒子系统

标签：

原文地址：http://www.cnblogs.com/iOS-Blog/p/4396379.html