Egret partilce粒子系统 使用心得

通过粒子系统实现摇钱树：

方法一：使用Egret自带的粒子系统，需导入第三方库

1，使用粒子系统前，将相关particle第三方库导入，直接打开白鹭引擎，到点击第三方库，直接下载，解压即可；

2，如果要实现类似摇钱树的钱币雨，则可以使用Egret Feather工具，实现钱币雨的动画，然后导出相应png 和json文件，并将其放到项目的资源配置文件中，如 default.d.ts文件；

3，

private texture:any;

private config:any

private textureType:string;
private configTupe:string;

this.texture = null;
this.config = null;
this.textureType = "newIronParticle_png";
this.configTupe = "newIronParticle_json";
RES.getResAsync(this.textureType, this.loadPNGDone, this);
RES.getResAsync(this.configTupe , this.loadJsonDone, this);           //注意使用正常的RES.getRes()导入资源的方法的前提是 资源已经加载完毕，否则会报错；所以此处用来异步加载资源的方法；

 private _rainParticle: particle.GravityParticleSystem;

private loadPNGDone(args:any)//RES.getResAsync异步加载的要有参数，而且onBuy方法此处调用时回调，要有bind.this，
{
this.texture = RES.getRes(this.textureType);
this.rainStart();
}
private loadJsonDone(args:any)
{
this.config = RES.getRes(this.configTupe);
this.rainStart();

}
private rainStart()
{
if(!this.texture || !this.config)
return;
// if(assist.UIAssist.getInstance().m_money.numChildren > 0){ //清除方法加在了主板上，后加，用于清除留在屏幕上的钱币，木材，豆子等
// assist.UIAssist.getInstance().m_money.removeChildren();
// }
this._rainParticle = new particle.GravityParticleSystem(this.texture, this.config);
// var popup:view.SacrificePopUp = new view.SacrificePopUp();//不能重新new对象，因为重新new的是新开辟内存的，没有数据了
// popup.addChild(this._rainParticle);
//this.parent.getChildByName("mSprite");
//this.addChild(this._rainParticle);

assist.UIAssist.getInstance().m_money.addChild(this._rainParticle); //通过使用主UI即MainUI的 控制文件UIAssist文件的实例在舞台上添加一个节点，从而来添加该钱币雨
this._rainParticle.start(1500);   //数字是用来 设置雨的降落时间 

}

//下面这个方法是用来加在主板上，来清除残留在板上的遗留图片

if(assist.UIAssist.getInstance().m_money.numChildren > 0){ //后加，用于清除留在屏幕上的钱币，木材，豆子等

assist.UIAssist.getInstance().m_money.removeChildren();
}

方法2：实现钱币雨（手写，不使用Egret自带的，因此不用导入第三方库）

ParticleManager.ts:

module ParticleManager
{
    export var MAX_PARTICLE_OBJECT_POOL_LENGTH: number = 50;
    export var particleObjPool: Array<Particle>;
    export function init(): void
    {
        particleObjPool = new Array<Particle>();

        for (var i: number = 0; i < MAX_PARTICLE_OBJECT_POOL_LENGTH; i++)
        {
            particleObjPool.push(new Particle());
        }
    }
    export function getParticle(): Particle
    {
        var _par: Particle;
        if (particleObjPool.length > 0)
        {
            _par = particleObjPool.shift();
        }
        else
        {
            _par = new Particle();
        }
        return _par;
    }
    export function particleObjPoolPush(particle: Particle): void
    {
        if (particle.parent)
        {
            particle.parent.removeChild(particle);
        }
        if (particleObjPool.length < MAX_PARTICLE_OBJECT_POOL_LENGTH)
            particleObjPool.push(particle)
    }
    //撒钱币雨
    export function showMoneyRain(count: number = 20, scale: number = 1, point: egret.Point = null): void
    {
        var _par: Particle;
        var _pt: egret.Point = point;
        if (_pt == null)
            _pt = new egret.Point(Math.floor(GameConfig.curWidth() / 2), Math.floor(GameConfig.curHeight() / 2));
        var _key: number;
        var _scaleR: number;
        for (var i: number = 0; i < count; i++)
        {
            _scaleR = scale;
            _key = Math.random();
            if (_key <= 0.7)
            {
                _key = 1 + Math.round(Math.random() * 2);
            }
            else
            {
                _key = 4 + Math.round(Math.random() * 2);
                _scaleR = _scaleR * 0.7;
            }
            _par = getParticle();
            _par.reset(
                'd_lgb_money0' + _key,
                _scaleR * (0.45 + Math.random() * 0.2),
                0.7 + Math.random(),
                Math.random() * 360,
                50 + Math.random() * 600 * Math.pow((-1), Math.round(Math.random() * 10)),
                -1500 + Math.random() * -200,
                0,
                _pt,
                1,
                1000 + Math.random() * 500);
            MainScene.instance.effectLayer.addChild(_par);
        }
    }
    //显示彩带礼花
    export function showRibbon(count: number, point: egret.Point = null): void
    {
        var _pt: egret.Point = point;
        if (_pt == null)
            _pt = new egret.Point(Math.floor(GameConfig.curWidth() / 2), Math.floor(GameConfig.curHeight() / 2));
        var _par: Particle;
        var _key: number;
        for (var i: number = 0; i < count; i++)
        {
            _key = Math.round(Math.random() * 6);
            _par = getParticle();
            _par.reset(
                'ribbon_' + _key,
                0.5 + Math.random() * 0.5,
                0.5 + Math.random(),
                Math.random() * 360,
                50 + Math.random() * 800 * Math.pow((-1), Math.round(Math.random() * 10)),
                -800 + Math.random() * -600,
                0,
                _pt,
                1,
                1200 + Math.random() * 500);
            MainScene.instance.effectLayer.addChild(_par);
        }
    }
 } 

Particle.ts

class Particle extends egret.Bitmap
{
    private pname: string;
    private speed: number;
    private angle: number;
    private offsetX: number;
    private offsetY: number;
    private lifeTime: number;
    private startPt: egret.Point;
    private middlePt: egret.Point;
    private endPt: egret.Point;

    private timer: number;

    public constructor() 
    {
        super();
    }
    //name 资源名
    //scale 
    //speed
    //angle 旋转率
    //offsetX
    //offsetY
    //lifeTime 生存时间 0或负数永久生存 ms
    //startPt
    public reset(name: string, scale: number, speed: number, angle: number, offsetX: number, offsetY: number, lifeTime: number, startPt: egret.Point, alpha: number = 1, endY: number = 1300): void
    {
        this.pname = name;
        this.speed = speed;
        this.angle = angle;
        this.offsetX = offsetX;
        this.offsetY = offsetY;
        this.lifeTime = lifeTime;
        this.startPt = startPt;
        this.middlePt = new egret.Point(Math.floor(startPt.x + this.offsetX / 2), startPt.y + this.offsetY);
        this.endPt = new egret.Point(Math.floor(startPt.x + this.offsetX), endY);

        this.texture = Utils.createBitmapByName(name).texture;
        this.anchorOffsetX = Math.floor(this.width / 2);
        this.anchorOffsetY = Math.floor(this.height / 2);

        this.scaleX = this.scaleY = scale;
        this.alpha = alpha;

        this.play();
    }
    public play(): void
    {
        var _len: number = Utils.calcBezierLength(this.startPt, this.middlePt, this.endPt, 1);
        var dur: number = Math.floor(_len / this.speed);
        if (dur <= 0)
            dur = 1;
        egret.Tween.get(this).to({ factor: 1 }, dur).call(this.particleDone, this);

        if (this.lifeTime > 0)
        {
            this.timer = TimerManager.instance.register(this, this.particleDone, this.lifeTime);
        }
    }
    private _factorValue: number=0;
    public get factor(): number
    {
        return this._factorValue;
    }

    public set factor(value: number)
    {
        this._factorValue = value;
        this.x = (1 - value) * (1 - value) * this.startPt.x + 2 * value * (1 - value) * this.middlePt.x + value * value * this.endPt.x;
        this.y = (1 - value) * (1 - value) * this.startPt.y + 2 * value * (1 - value) * this.middlePt.y + value * value * this.endPt.y;

        var q0x: number = (1 - value) * this.startPt.x + value * (this.endPt.x / 2 + this.startPt.x / 2);
        var q0y: number = (1 - value) * this.startPt.y + value * (this.startPt.y + this.offsetY);
        var q1x: number = (1 - value) * (this.endPt.x / 2 + this.startPt.x / 2) + value * this.endPt.x;
        var q1y: number = (1 - value) * (this.startPt.y - 80) + value * this.endPt.y;
        var dx: number = q1x - q0x;
        var dy: number = q1y - q0y;
        var radians: number = Math.atan2(dy, dx);
        var degrees: number = radians * 180 / Math.PI;
        this.rotation = degrees + 90 + this.angle * value;
    }

    private particleDone(): void
    {
        if (this.lifeTime)
        {
            TimerManager.instance.remove(this.timer);
            this.timer = 0;
        }
        egret.Tween.removeTweens(this);
        this.rotation = 0;
        this.x = this.y = 0;
        this.scaleX = this.scaleY = 1;
        this._factorValue = 0;
        this.alpha = 1;
        ParticleManager.particleObjPoolPush(this);
    }
}