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:

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:

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!