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程式碼如下： 
                 // 操作標誌
    pLabel: null,                              ①  
    ctor: function (flagTag) {  
       
        
  
        cc.log("MyActionLayer init flagTag " + this.flagTag);  
  
  
var size = cc.director.getWinSize();  
  
  
        var backMenuItem = new cc.LabelBM new cc.MenuItemLabel(backMenuItem, this.backMenu, this);
        backMenuItem.x = size.width - 100;  
        backMenuItem.y = 100 .create(backMenuItem);  
        mn.x = 0;  
        mn.y = 0;  anchorX = 0.5;  
        mn.anchorY = 0.5;  
         new cc.LabelBMFont("", res.fnt_fnt);  
        this.pLabel.x = size.width / 2;  
        this.pLabel.y = size.height  - 50;  
         return true;  
    },  
    backMenu: function (sender) {  
        cc.director.popScene ();  
    },  
    onEnterTransitionDidFinish: function () {  
        cc.log("標籤 = " + this.flagTag);  
        var sprite = this.getChildByTag(SP_TAG);  
        var size = cc.director.getWinSize();  
  
  
       var 系統；  
        switch (this.flagTag)                            ②  
            case ActionTypes.kExplosion losion( ）；  
                this.pLabel.setString("爆炸");  
         case ActionTypes 。 ure = cc.textureCache.addImage(res.s_fire);              ③  
                   休息時間；  
            case ActionTypes. kFireworks:
               system = new cc.ParticleFireworks();  
                   休息；  
            case ActionTypes.kFlower:    
                this.pLabel.setString( "花");  
                休息；  
            case ActionTypes.kGalaxy:  
               system = new cc.ParticleGalaxy();  
                this.pLabel.setString("Galaxy");  
                休息；  
            case ActionTypes.kMeteor:  
                system = new cc .ParticleMeteor ();  
                this.pLabel.setString("流星");  
                休息；  
            case 的cc.ParticleRain();  
                this.pLabel.setString("雨");  
                休息；  
             cc.ParticleSmoke();  
this.pLabel.setString("煙霧");  
                休息中；  
             system = new cc.ParticleSnow();  
                   
            case ActionTypes.kSpiral :  
                system = new cc.ParticleSpiral();  
                  休息；  
            case ActionTypes.kSun:  
                this.pLabel.setString("太陽");  
                休息；                                                  ④  
        }  
  
  
        system.x = size.width /2;  
        system.y = size.height /2;  
  
  
        this.addChild(system);  
    }  
}）；
  
  
var MyActionScene = cc.Scene.extend({  
    onEnter: function () {  
   
在頭檔中第①行程式碼定義了LabelBMFont類型的成員變數pLabel ，用於在場景中顯示藥劑系統的名稱。

我們在MyActionLayer的onEnterTransitionDidFinish函數中創建藥劑系統對象，而不是在MyActionLayer的onEnter函數創建，這是因為MyActionLayer的onEnter函數調用時，場景還沒有顯示，如果在該函數中創建爆炸等顯示一次的效果系統，等到場景顯示的時候，爆炸已經結束了，我們會看不到效果。

代碼第②~④行創建了11種消費系統，這裡創建消費系統的時候都採用了它們的預設屬性值。其中this.pLabel.setString("XXX")函數是為場景中標籤設定內容，這樣在進入場景後可以看到粒子系統的名稱。

另外，如果在Web瀏覽器中運行還需要為粒子系統添加紋理，我們只在代碼第③行添加了粒子系統，其他的粒子添加類似。