JavaScript Enhancement Tutorial——Built-in Particle System

This article is the official HTML5 training tutorial of H5EDU organization. It mainly introduces: JavaScript enhancement tutorial - built-in particle system

From the class diagram, we can see that there are 11 kinds of built-in particles in Cocos2d-JS, and the properties of these particles are pre-set Once defined, we can also modify certain properties individually in the program code. We have already implemented the setting of these properties in the examples in the previous section.


Built-in particle system

The 11 built-in particle systems are described as follows:

ParticleExplosion. Exploding particle effect, belonging to radius mode.

ParticleFire. The flame particle effect belongs to the gravity path mode.

Particle Fireworks. Fireworks particle effects belong to gravity mode.

ParticleFlower. The flower particle effect belongs to the gravity mode.

ParticleGalaxy. Galaxy particle effect, belonging to radius mode.

ParticleMeteor. Meteor particle effect, belongs to gravity mode.

ParticleSpiral. Swirl particle effect, belonging to radius mode.

ParticleSnow. The snow particle effect belongs to the gravity mode.

ParticleSmoke. The smoke particle effect belongs to the gravity mode.

ParticleSun. The solar particle effect belongs to the gravity mode.

ParticleRain. The rain particle effect belongs to the gravity mode.

The properties of these 11 types of particles have different effects depending on their emission modes.


Example: Built-in particle system

Let’s demonstrate these 11 built-in particle systems through an example. This example is shown in the figure. The picture on the left is an operation menu scene. Selecting the menu can enter the action scene in the picture above. The effect of the selected particle system is demonstrated in the action scene in the picture below. Click the return button in the lower right corner to return to the menu scene. ​​​​// Operation flag
pLabel: null,                                             
         this.flagTag = flagTag;                                                                                                                                                                                          . var size = cc.director.getwinsize (); Mlabel (BackMenuitem, this.Backmenu, this) ;
                                                                                                                                                                         ’’’’ backMenuItem. 0;
                                                               .nchor 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浏览器中运行还需要为粒子系统添加纹理，我们只在代码第③行添加了火粒子纹理，其它的粒子纹理添加类似。