← flaviocopes.com

Phaser: Animations

Published Apr 23 2021

This post is part of a Phaser series. Click here to see the first post of the series.

To play an animation on a sprite after you create it:

function preload() {
  this.load.sprite('dog', 'dog.png')

function create() {
  this.add.sprite(400, 200, 'dog')

You first have to load a Sprite sheet.

A sprite sheet is a set of different sprites included in a single image.

You load a sprite sheet telling Phaser what are the width and height of each image contained in the sheet. in this case 20x20 pixels:

this.load.spritesheet('dog', 'dog.png', {
  frameWidth: 20,
  frameHeight: 20

Once you do so, you can generate an animation using this.anims.create():

  key: 'animate_dog',
  frames: this.anims.generateFrameNames('dog'),
  frameRate: 20,
  repeat: -1

Here we say to use the frames from the sprite sheet, animate at 20 frames per second, and repeat forever.

To start the animation we must call


This animation will repeat forever.

You can also perform an animation just once, and make the sprite sheet disappear after the animation is done, by adding those options:

repeat: 0,
hideOnComplete: true

and instead of running through all the frames in a sprite sheet, you can iterate through a fraction of them:

frames: this.anims.generateFrameNames('dog', {
  start: 0,
  end: 2

This is useful especially when you have a big sprite sheet that contains multiple objects.

Check out my books

© 2023 Flavio Copes Flavio Copes using Notion to Site Notion to Site. Follow on Twitter

Solopreneur? Wannabe? Adventure awaits