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

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

如您所见，我制作了粒子动画。需要采取这样的步骤：

粒子动画应该以一组镜头（纹理）的形式缓存
粒子动画 应该删除。我已经完成了（通过‘destroy‘）
代替粒子动画精灵动画应该通过函数tweens使用接收到的纹理来实现并将这些纹理作为函数 tweens 的参数传递欢迎任何折射。

Answer 1

在 Phaser 中，发射器粒子是相对简单的 DisplayObject class，不像 Phaser.Sprite 那样支持动画。顺便说一句，我不知道使用补间动画是否是制作粒子动画的最佳方式，因为我怀疑它会占用 CPU 的使用量，另一方面使用 Sprite 动画会更 "light weight"。

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

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

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

How to create sprite animation from particles animation by means of tweens?

javascript

animation

phaser-framework