Summer’s over — what’s your move? Join Pro for 50% off using code [MAKEITHAPPEN](https://www.codecademy.com/checkout?periods=year&plan_id=proGoldAnnualV2&discountCode=MAKEITHAPPEN)


Learn how to add animations and tweens to a Phaser game and bring the characters to life on screen! 

Learn Phaser: Animations and Tweens

A static image can only convey so much information. Imagine using a static image for a Sprite and moving it around the game. Will players really get a sense of when it's walking? or running? Does it stay the same when it's jumping? Maybe just standing idly by waiting for the player to take control? Instead, we can opt to use animations to distinguish between the many actions our Sprites can do. 

In this lesson, we'll learn how to take a _sprite sheet_ (a single image file that has a Sprite in different poses) and animate it using Phaser. We'll also introduce another visual tool, _tweens_, into our games. We'll take this newfound knowledge and add another dimension to how sprites look, move, and interact inside our Phaser games.

The game we're developing here is a simple platformer that will help us visualize animations and tweens. As the game develops, you'll notice we provide for you additional code that builds out the game. When you see our provided code, take some time to read through the comments and refresh yourself on what the code is doing &mdash; after all, it's all concepts we've gone over before! 

Now, let's breathe some life into our sprites!


Introduction to Animations and Tweens in Phaser

Learning how to start an animation is one thing, pausing it is another. When it's game over, or if we decide to include a pause option, we might opt to pause one or all of our animations. 

In Phaser, we can call `exampleSprite.anims.pause()` on the sprite to put a pause on its animation. 

We can also call `this.anims.pauseAll()` to pause all animations in a Scene. 

Let's try out these convenient methods in our own game.


Pausing Animations

✓ Load in sprite sheet     
✓ Create the sprite object  
✓ Create animation from sprite sheet  
☐ Animate sprite 

We have everything else set up, now let's bring our sprite to life! 

Inside `update()`,  we can include our logic for controlling our sprite and animating it however we want.

```js
class ExampleScene extends Phaser.Scene {
  // … Previous code
  update() {
    if (gameState.cursors.right.isDown) {
      gameState.exampleSprite.setVelocityX(100);
      gameState.exampleSprite.anims.play('movement', true);
    }
  }
}
```

In the code above, if the right arrow key is pressed `gameState.exampleSprite` moves to the right. Then we play the animation by calling `gameState.exampleSprite.anims.play('movement', true)`: 
* `gameState.exampleSprite.anims` allows us to access all the animations we created. 
* `anims.play()` will play all the animations, or a single animation if passed an argument.
* We provide `.anims.play()` with two arguments:
  * the first is an animation key, in this case it's the  `movement` animation. 
  * the second is a boolean, which won't play the animation from the start, if it's already in progress. 

Let's animate Codey!


Animating 

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:
```js
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](https://gamemechanicexplorer.com/#easing-11). 
* `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!


Tweens

With our sprite sheet loaded in, we can now create our sprite object and the animation sequence. 

This logic goes inside our `create()` method:

```js
class ExampleScene extends Phaser.Scene {
  // … Previous code
  create() {
    gameState.exampleSprite = this.physics.add.sprite(100, 600, 'spriteKey');
  }
} 
```

The code above should look familiar, it's the same way we create a sprite object from a single image. When our sprite loads in game, it'll show the first frame of our sprite sheet. 

We can now use `this.anims.create()` to create our animations:
```js
class ExampleScene extends Phaser.Scene {
  create() {
    gameState.exampleSprite = this.physics.add.sprite(100, 600, 'spriteKey');

    this.anims.create({
      key: 'movement',
      frames: this.anims.generateFrameNumbers('spriteKey', { start: 0, end: 5 }),
      frameRate: 10,
      repeat: -1
    });
  }
} 
```

`this.anims.create()` takes an object as an argument that has several properties. In the example above we included:
* `key` - how this animation will be referenced.
* `frames` - which frames of the sprite sheet we're using
  * `this.anims.generateFrameNumbers('spriteKey', { start: 0, end: 5 })` is a Phaser method that returns an array of a sprite sheet's frames from `start` up to (and including) `end`. 
* `frameRate` - how many frames play per second (it will default to `24` if `frameRate` is not provided). 
* `repeat` - how many times the animation repeats, use `-1` to continuously repeat the animation.

To see what other properties we could include check out [RexRainbow's Phaser animation documentation](https://rexrainbow.github.io/phaser3-rex-notes/docs/site/sprite/#create-animation)

Let's see how this looks in our own code! 


Creating the Animation

Codey's animation looks great moving to the right. But if we apply the exact same logic to move left, Codey looks like they're being blown back by some wind or doing the moonwalk. (While it's cool, it isn't exactly what we're going for). 

As a fix, we need to set the `.flipX` property of the animation to be `true` or `false` depending on which direction we want our sprite to turn. 
```js
class ExampleScene extends Phaser.Scene {
  // … Previous code
  update() {
    if (gameState.cursors.right.isDown) {
      gameState.exampleSprite.setVelocityX(100);
      gameState.exampleSprite.anims.play('movement', true);
      // The sprite is facing its original direction
      gameState.exampleSprite.flipX = false;
    } else if ( gameState.cursors.left.isDown) {
      gameState.exampleSprite.setVelocityX(-100);
      gameState.exampleSprite.anims.play('movement', true);
      // The sprite is facing its flipped direction
      gameState.exampleSprite.flipX = true;
    }
  }
}
```
When our Sprite is moving to the right, we assign `.flipX` to false, since our sprite sheet original has the sprite facing the right. Otherwise, when moving left, we assign `.flipX` to true so that the sprite flips horizontally and will face left.

By manipulating `.flipX` we can animate our sprite with a sprite sheet that faces one direction! 

Let's now add this into our game! 

Flipping an Animation

You did wonderful work with animations and tweens! 

In this lesson, you learned how about:
* The difference between an image and a sprite sheet.
* Loading in sprite sheets.
* Creating animations.
* Playing animations.
* Flipping animations.
* Pausing animations
* Using and creating tweens.
* Adding a callback to a tween. 

Using these techniques, you can make your games even more visually appealing! 


Review

What if we wanted something to happen after a tween finished playing? Or while it's looping? How about before it starts playing? Conveniently, Phaser allows us to provide the tween with callback functions.

To use these callbacks, inside the object we passed to `this.tweens.add()`, we assign the following keys callback functions:
* `onStart` - if we want a function to execute when the tween starts.
* `onYoyo` - if we want a function to execute when the tween starts going back to the original position.
* `onRepeat` - if we want a function to execute each time the tween plays.
* `onComplete` - if we want a function to execute when the tween finishes.

If we wanted to remove our sprite after its tween finished playing, we could call: 
```js
class ExampleScene extends Phaser.Scene {
  // … Previous code
  create () {
    gameState.moveTween = this.tweens.add({
      targets: gameState.exampleSprite,
      x: 300,
      ease: 'Linear',
      duration: 3000,
      repeat: 1,
      yoyo: true,
      // Will execute after the tween finishes playing:
      onComplete: function() {
        gameState.exampleSprite.destroy();
      }
    });

    gameState.moveTween.play();
  }
}
```
With our tween in place, after our tween plays, the callback for `onComplete` executes, and destroys `gameState.exampleSprite`! 

Let's incorporate a tween callback in our code. 


Tween Callbacks

One common tool used to create animations is a sprite sheet that contains all the images that depict how a sprite can move. Take for instance: 

<img src="https://content.codecademy.com/courses/learn-phaser/Cave%20Crisis/codey_frames.gif" alt="sprite sheet of four frames showing Codey walking" >

As we move through the _frames_ (individual images) of the sprite sheet, Codey starts walking!

To implement an animation in our game we need to:
1. Load in the sprite sheet.
2. Create the sprite object. 
3. Create the animation by selecting specific frames from the sprite sheet.
4. Play the animation.

Let's focus first on loading in our sprite sheet:

```js
class ExampleScene extends Phaser.Scene {
  preload() {
    this.load.spritesheet( 'spriteKey' , 'spriteSheet.png', { frameWidth: 100, frameHeight: 100 });
  }
}
```
`this.load.spritesheet()` takes three arguments: the sprite's key as a string, the location of the sprite sheet, and an object with the properties `frameWidth` and `frameHeight` these properties indicate how many pixels wide and tall the individual frames are. Be sure to use accurate values since inaccurate `frameWidth` or `frameHeight` values will result in a misshaped sprite or a nonfunctioning animation! 

Now, let's load in Codey's sprite sheet!
