title: How to create sprite animation from particles animation by means of tweens?
body: <p>Here is such a code snippet:</p>
  
  <pre class="lang-js prettyprint-override"><code>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();
  }
  </code></pre>
  
  
  
  <p>As you can see, I have made the <em>particle-animation</em>. Such steps need to be taken:</p>
  
  <ol>
  <li><em>Particle-animation</em> should be cached in the form of a set of shots (textures)</li>
  <li><em>Particle-animation</em> should be deleted. I have already done it (by means of ‘<em>destroy</em>‘)</li>
  <li>Instead of the particle animation <em>sprite animation</em> should be realized by means of the function tweens using received textures 
  and passing these textures as the argument of the function tweens
  Any refractoring is welcome.</li>
  </ol>