如何通过补间动画从粒子动画创建精灵动画？

Question

这是一个代码片段：

var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create });

var emitter;

function preload() {
    game.load.image('wasp', 'assets/glass.png');
    game.load.image('glass', 'assets/glass.png');
    game.load.image('water', 'assets/blue-raster-floor.png');

}

function create() {

    game.physics.startSystem(Phaser.Physics.ARCADE);

    game.add.tileSprite(0, 344, 800, 256, 'water');

    emitter = game.add.emitter(game.world.centerX, 200);

    emitter.makeParticles('glass');

    emitter.setXSpeed(-200, 200);
    emitter.setYSpeed(-150, -250);

    emitter.bringToTop = true;
    emitter.setAlpha(0.1, 1, 500);
    emitter.setScale(-2, 2, 1, 1, 3000, Phaser.Easing.Sinusoidal.InOut, true);
    emitter.gravity = 300;


    emitter.start(false, 5000, 700, 50);

    game.time.events.add(3000, destroyEmitter, this);
}

function tweens(cash) {
    var bugs;
    var index = 0;
    var data;
    var pos = [];
    var tween;

    var tweenData = { x: 0, y: 0 };

    tween = game.make.tween(tweenData).to( { x: 100, y: 400 }, 2000, "Sine.easeInOut");

    tween.yoyo(true);

    data = tween.generateData(60);

    bugs = game.add.group();
    pos.push(new Phaser.Point(32, 0));
    pos.push(new Phaser.Point(300, 100));
    pos.push(new Phaser.Point(600, 70));

    bugs.create(pos[0].x, pos[0].y, 'wasp');
    bugs.create(pos[1].x, pos[1].y, 'wasp');
    bugs.create(pos[2].x, pos[2].y, 'wasp');

    tween.onUpdateCallback(function () {
        bugs.getAt(0).x = pos[0].x + data[index].x;
        bugs.getAt(0).y = pos[0].y + data[index].y;
        bugs.getAt(1).x = pos[1].x + (data[index].x / 2);
        bugs.getAt(1).y = pos[1].y + data[index].y;

        //  Inverse one of the values
        bugs.getAt(2).x = pos[2].x - data[index].x;
        bugs.getAt(2).y = pos[2].y + data[index].y;

        index++;

        if (index === data.length)
        {
            index = 0;
        }
    });

    tween.start();
}

function destroyEmitter() {
    console.log(emitter);
    emitter.destroy();
    tweens();
}

如您所见，我进行了粒子动画 。 需要采取以下步骤：

1. 粒子动画应以一组镜头（纹理）的形式进行缓存
2. 应当删除粒子动画 。 我已经做到了（通过' destroy '）
3. 代替粒子动画的是，应该通过使用接收到的纹理的补间动画并将这些纹理作为补间函数的参数传递，来实现精灵动画 。欢迎使用任何折射。

Answer 1

在Phaser中，发射器粒子属于相对简单的DisplayObject类，不像Phaser.Sprite支持动画那样。 顺便说一句，我不知道使用补间动画是否是对粒子进行动画处理的最佳方法，因为我怀疑这会占用大量CPU资源，而使用Sprite动画则更“轻巧”。

但是，无论哪种方式，您都可以创建一个自定义粒子类，其中包含您的粒子动画的代码（使用补间，动画，计时器等），然后将该自定义类设置为emitter.particleClass ，请参见下面链接中的代码示例：

http://codetuto.com/2016/02/phaser-animated-particles/