JavaScript 拡張チュートリアル—組み込みパーティクル システム

この記事は、H5EDU 組織の公式 HTML5 トレーニング チュートリアルであり、主に以下を紹介します: JavaScript 拡張チュートリアル - 組み込みパーティクル システム

クラス図から、Cocos2d-JS には 11 種類の組み込みパーティクルがあることがわかります。 、これらのパーティクルのプロパティは事前に設定されています。定義したら、プログラム コードで特定のプロパティを個別に変更することもできます。これらのプロパティの設定は、前のセクションの例ですでに実装されています。


組み込みパーティクル システム

11 の組み込みパーティクル システムは次のように説明されます:

ParticleExplosion。爆発するパーティクル エフェクト。半径モードに属します。

パーティクルファイア。火炎粒子エフェクトは重力パス モードに属します。

パーティクル花火。花火のパーティクル エフェクトは重力モードに属します。

パーティクルフラワー。花のパーティクル エフェクトは重力モードに属します。

パーティクルギャラクシー。ギャラクシー パーティクル エフェクト、radius モードに属します。

パーティクルメテオール。流星粒子エフェクト、重力モードに属します。

パーティクルスパイラル。半径モードに属する渦巻き粒子エフェクト。

パーティクルスノー。雪のパーティクル エフェクトは重力モードに属します。

粒子煙。煙のパーティクル エフェクトは重力モードに属します。

粒子太陽。太陽粒子効果は重力モードに属します。

パーティクルレイン。雨のパーティクル エフェクトは重力モードに属します。

これら11種類のパーティクルの特性は、その放出モードに応じて異なる効果をもたらします。


例: 組み込みパーティクル システム

これら 11 個の組み込みパーティクル システムを例を通して説明しましょう。この例を図に示します。 メニューを選択すると、選択したパーティクル システムの効果が下の図のアクション シーンに表示されます。右下の戻るボタンをクリックするとメニュー画面に戻ります。 // 操作フラグ
pLabel: null, This.flagTag = flagTag;


cc.log("MyActionLayer init flagTag " + this.flagTag);


var size = cc.director.getwinsize () ; Mlabel (BackMenuitem、this.Backmenu、this) ; 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.
},
onEnterTransitionDidFinish: function ()        cc.log("タグ = " + this.flagTag);  
var sprite = this.getChildByTag(SP_TAG);  
var size = cc.director.getWinSize();  


var システム。  
switch (this.flagTag) { ②
case ActionTypes.kExplosion:
system = new cc.ParticleExplosion( );  
this.pLabel.setString("爆発");  
休憩。  
case ActionTypes.kFire:
system = new cc.ParticleFire();  
system.texture = cc.textureCache.addImage(res.s_fire);              ③
this.pLabel.setString("Fire");  
休憩。  
case ActionTypes.kFireworks:
system = new cc.ParticleFireworks();  
this.pLabel.setString("花火");  
休憩。  
case ActionTypes.kFflower:
system = new cc.ParticleFflower();  
this.pLabel.setString("花");  
休憩。  
case ActionTypes.kGalaxy:
system = new cc.ParticleGalaxy();  
this.pLabel.setString("Galaxy");  
休憩。  
case ActionTypes.kMeteor:
system = new cc.ParticleMeteor();  
this.pLabel.setString("Meteor");  
休憩。  
case ActionTypes.kRain:
system = new cc.ParticleRain();  
this.pLabel.setString("雨");  
休憩。  
case ActionTypes.kSmoke:
system = new cc.ParticleSmoke();  
                this.pLabel.setString("スモーク");  
休憩。  
case ActionTypes.kSnow:
system = new cc.ParticleSnow();  
this.pLabel.setString("Snow");  
休憩。  
case ActionTypes.kSpiral:
system = new cc.ParticleSpiral();  
this.pLabel.setString("スパイラル");  
休憩。  
case ActionTypes.kSun:
system = new cc.ParticleSun();  
this.pLabel.setString("Sun");  
休憩。                                                  ④
}


system.x = size.width /2;  
system.y = size.height /2;  


this.addChild(システム);  
}
});  


var MyActionScene = cc.Scene.extend({
onEnter: function () {
this._super();
}
}); 
私たちは、MyActionLayer の onEnter ではなく、MyActionLayer の onEnterTransitionDidFinish 関数で粒子システム オブジェクトを作成します。関数数つまり、これは MyActionLayer の onEnter 関数が使用されているため、フィールドシーンも表示されず、この関数内で爆発などが表示される粒子システムが一度作成され、フィールドバックが表示される時点まで爆発が終了した場合、効果は見られません。
コードの②~④では 11 個のパーティクル システムが構築されており、ここではパーティクル システムの構築時に常にそれらの承認されたプロパティ値が採用されています。さらに、ウェブブラウザで粒子システムの追加処理を実行する必要がある場合、コードの 3 番目にのみ火の粒子処理を追加します。他の粒子処理の追加も同様です。