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 '）
代替粒子动画精灵动画应该通过使用接收纹理的补间函数来实现并将这些纹理作为函数补间的参数传递任何折射都是受欢迎的。

Answer 1

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

但不管怎样，您可以创建一个自定义粒子类，其中包含粒子动画的代码（使用补间，动画，定时器等），然后将该自定义类设置为emitter.particleClass，请参阅代码示例在以下链接中：

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

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

1 个答案: