cheka.jp 超不定期で更新する写真達。お口直しにどうぞ。

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;
        }
    }
})();
3 Comments

Add a Comment

メールアドレスが公開されることはありません。