JavaScript强化教程—— 内置粒子系统

阅读更多

本文为 H5EDU 机构官方 HTML5培训 教程，主要介绍：JavaScript强化教程 —— 内置粒子系统

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