While animations allow us to play through the frames of a sprite sheet, tweens help refine the transition from frame to frame. By creating in-between frames, sprites undergoing changes like their size and positions appear smoother.

One common usage of tweens is to convey movement, for instance:

class ExampleScene extends Phaser.Scene {
  // … Previous code
  create () {
    gameState.exampleSprite = this.physics.sprite.add(0, 100, 'example');

    gameState.moveTween = this.tweens.add({
      targets: gameState.exampleSprite,
      x: 300,
      ease: 'Linear',
      duration: 3000,
      repeat: -1,
      yoyo: true
    });

    gameState.moveTween.play();

    // Later on … 
    gameState.moveTween.stop();
  }
}

In the code above we called this.tweens.add() to create a tween saved to gameState.moveTween. The object that we provided as an argument:

• targets determines which Sprites are affected (we could’ve also used an array)
• x determines the final x-coordinate of gameState.exampleSprite.
• ease describes how the tween plays.
  • We provided a value of Linear which means it plays at a constant speed. But if we wanted some variation, we could have provided another easing function.
• duration determines how long the tween lasts (in milliseconds).
• repeat is how many times the tween runs (use -1 to continuously play).
• yoyo is a true or false value, if it’s true, the tween plays in reverse for the Sprite to return back to its original state (size, position, angle, etc.) before the tween started. If it’s false, then the Sprite will remain as is after the tween finishes.
• To play the tween, we call .play() on gameState.moveTween.
• To stop playing the tween, we call .stop() on gameState.moveTween.

Let’s see this for ourselves!