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

小微助手

微信推出的一款专注于提升桌面效率的助手型AI工具

下载