cocos2d-JS 3.0でパーティクルを実装する

cocos2d-JS 3.0シリーズの続きです。

cocos2d-JSの記事が続いてます。
APIに従ってパーティクルを実装してもシュミレーターでエラーになったので、現時点での回避方法を備忘録として残しておきます。

Particle Designerは値段の割に使わないので自分は無料のSpriteBuilderを利用しています。
パラメーターの意味が分かれば直接コードの数字を調整しても良いと思います。

好みのパーティクルを作成する

SpriteBuilderを立ち上げて新規にプロジェクトを作成します。

パーティクルファイルを追加しましょう。
新規にファイル追加を行います。

パーティクルの値を調整しましょう。

パラメータの調整やテクスチャの変更などを行って好みのパーティクルを作成します。

コードを記述する

cc.ParticleSystemをextendして拡張するサンプルが準備されていて実際に使うことも可能ですが、iOS用にビルドするとextendが定義されていない的なエラーに遭遇します。
おとなしくcc.ParticleSystem.createで作成する方法で対応しました。
＊テクスチャをプロジェクトにコピーするのを忘れないようして下さい。

var particle = cc.ParticleSystem.create(100);
particle.setEmitterMode(cc.PARTICLE_MODE_GRAVITY);
particle.setPosVar({x:100,y:100});
particle.setEmissionRate(120);
particle.setDuration(0.2);
particle.setLife(0.2);
particle.setLifeVar(0.2);
particle.setStartSize(50);
particle.setStartSizeVar(50);
particle.setEndSize(0);
particle.setEndSizeVar(0);
particle.setAngle(90);
particle.setAngleVar(10);
particle.setStartColor(cc.color(227, 104, 104, 255));
particle.setStartColorVar(cc.color(5, 5, 5, 0));
particle.setEndColor(cc.color(0, 0, 0, 255));
particle.setEndColorVar(cc.color(0, 0, 0, 0));
particle.setPosition(pos);
particle.setAutoRemoveOnFinish(true);
particle.setTexture( cc.Sprite.create(res.i_particle).getTexture() );
this.addChild(particle,10);

少し面倒ですが、一度作成するだけで他でも利用できるので試してみては如何でしょうか？
ちなみに自分はパーティクル管理用のオブジェクトを準備して利用するようにしています。

var Particle = (function(){
    return {
        //パーティクル1
        createOne  : function(pos){
            var particle = cc.ParticleSystem.create(100);
			・・
            particle.setPosition(pos);
            particle.setAutoRemoveOnFinish(true);
            particle.setTexture( cc.Sprite.create(res.i_particle).getTexture() );
            return particle;
        },
        //パーティクル2
        createTow : function(pos){
            var particle = cc.ParticleSystem.create(100);
			・・
            particle.setPosition(pos);
            particle.setAutoRemoveOnFinish(true);
            particle.setTexture( cc.Sprite.create(res.i_particle_star).getTexture() );
            return particle;
        }
    }
})();