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

时间:2016-12-06 15:34:43

标签: javascript animation phaser-framework

以下是这样的代码段:

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

1 个答案:

答案 0 :(得分:1)

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

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

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