Tutorial zur JavaScript-Verbesserung – Integriertes Partikelsystem

Dieser Artikel ist das offizielle HTML5-Schulungs-Tutorial der H5EDU-Organisation. Er stellt hauptsächlich vor: JavaScript-Erweiterungs-Tutorial – integriertes Partikelsystem

Aus dem Klassendiagramm können wir ersehen, dass es 11 Arten von integrierten Partikeln gibt. in Partikeln in Cocos2d-JS Die Eigenschaften der Partikel sind alle vordefiniert, und wir können bestimmte Eigenschaften auch einzeln im Programmcode ändern. Die Einstellungen dieser Eigenschaften haben wir bereits in den Beispielen im vorherigen Abschnitt implementiert.


Eingebautes Partikelsystem

Die 11 eingebauten Partikelsysteme werden wie folgt beschrieben:

ParticleExplosion. Explodierender Partikeleffekt, der zum Radiusmodus gehört.

Partikelfeuer. Der Flammenpartikeleffekt gehört zum Schwerkraftpfadmodus.

Partikelfeuerwerk. Feuerwerkspartikeleffekte gehören zum Schwerkraftmodus.

PartikelBlume. Der Blumenpartikeleffekt gehört zum Schwerkraftmodus.

ParticleGalaxy. Galaxienpartikeleffekt, der zum Radiusmodus gehört.

ParticleMeteor. Der Meteorpartikeleffekt gehört zum Schwerkraftmodus.

PartikelSpirale. Wirbelpartikeleffekt, der zum Radiusmodus gehört.

PartikelSchnee. Der Schneepartikeleffekt gehört zum Schwerkraftmodus.

PartikelRauch. Der Rauchpartikeleffekt gehört zum Schwerkraftmodus.

PartikelSonne. Der Sonnenpartikeleffekt gehört zum Schwerkraftmodus.

PartikelRegen. Der Regenpartikeleffekt gehört zum Schwerkraftmodus.

Die Eigenschaften dieser 11 Partikelarten haben je nach Emissionsmodus unterschiedliche Auswirkungen.


Beispiel: Eingebautes Partikelsystem

Im Folgenden demonstrieren wir diese 11 eingebauten Partikelsysteme anhand eines Beispiels. Dieses Beispiel ist in der Abbildung dargestellt. Durch Auswählen des Menüs kann die Aktionsszene im Bild oben angezeigt werden. Klicken Sie auf die Schaltfläche „Zurück“ in der unteren rechten Ecke, um zur Menüszene zurückzukehren.

2.jpg

Beispiel für ein integriertes Partikelsystem

Konzentrieren wir uns auf die Szene MyActionScene. Der Code von MyActionScene.js lautet wie folgt:

var MyActionLayer = cc.Layer.extend({
flagTag: 0,                                                                    ① ① > ctor: function (flagTag) {
                                              > This.flagtag = flagtag;


cc.log ("MyActionLayer Init Flagtag" + this.flagtag);


var backMenuItem = new cc.LabelBMFont(" backMenuItem.x = size.width - 100;
backMenuItem.y = 100;


var mn = cc.Menu. create(backMenuItem);
       mn.x = 0;
mn.anchorX = 0,5;
this.addChild(mn) ;


this.pLabel = new cc.LabelBMFont("", res.fnt_fnt);
this.pLabel.x = size.width /2; = 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:  
             cc.ParticleExplosion();  
                this.pLabel.setString("Explosion");  
                Pause;  
            case ActionTypes.kFire:  
                system = new cc.ParticleFire();  
                            system.texture = cc.textureCache.addImage(res.s_fire);              ③  
                this.pLabel.setString("Fire");  
                Pause;  
            case ActionTypes.kFireworks:  
                system = new cc.ParticleFireworks();  
                this.pLabel.setString("Feuerwerk");  
                Pause;  
            case ActionTypes.kFlower:  
                system = new cc.ParticleFlower();  
                this.pLabel.setString("Flower");  
                Pause;  
            case ActionTypes.kGalaxy:  
                system = new cc.ParticleGalaxy();  
                this.pLabel.setString("Galaxy");  
                Pause;  
            case ActionTypes.kMeteor:  
                system = new cc.ParticleMeteor();  
                this.pLabel.setString("Meteor");  
                Pause;  
            case ActionTypes.kRain:  
                system = new cc.ParticleRain();  
                this.pLabel.setString("Rain");  
                Pause;  
            case ActionTypes.kSmoke:  
                system = new cc.ParticleSmoke();  
                this.pLabel.setString("Smoke");  
                Pause;  
            case ActionTypes.kSnow:  
                system = new cc.ParticleSnow();  
                this.pLabel.setString("Snow");  
                Pause;  
            case ActionTypes.kSpiral:  
                system = new cc.ParticleSpiral();  
                this.pLabel.setString("Spiral");  
                Pause;  
            case ActionTypes.kSun:  
                system = new cc.ParticleSun();  
                this.pLabel.setString("Sun");  
                Pause;                                                  ④  
        }  
  
  
        system.x = size.width /2;  
        system.y = size.height /2;  
  
  
        this.addChild(system);  
    }  
});  
  
  
var MyActionScene = cc.Scene.extend({  
    onEnter: function () {  
        this._super();  
    }  
}); 
在头文件中第①行代码定义了LabelBMFont类型的成员变量pLabel，用来在场景中显示粒子系统的名称。 

Die Funktion „MyActionLayer“ bei „OnEnterTransitionDidFinish“ ist eine weitere Möglichkeit不是在MyActionLayer的onEnter函数创建, 这是在MyActionLayer的onEnter函数调用时, 场景还没有显示, 如果在该函数中创建爆炸等显示一次的粒子系统, 等到场景显示的时候, 爆炸已经结束了, 我们会看不到效果Sie können dies tun.pLabel.setString("XXX") wird angezeigt是为场景中标签设置内容，这样在进入场景后可以看到粒子系统的名称。 

另外，如果在Web浏览器中运行还需要为粒子系统添加纹理,我们只在代码第③行添加了火粒子纹理，其它的粒子纹理添加类似.