Skip to content

Phaser: Animations

New Course Coming Soon:

Get Really Good at Git

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():

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.ship1.play('ship1_anim')

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.

Are you intimidated by Git? Can’t figure out merge vs rebase? Are you afraid of screwing up something any time you have to do something in Git? Do you rely on ChatGPT or random people’s answer on StackOverflow to fix your problems? Your coworkers are tired of explaining Git to you all the time? Git is something we all need to use, but few of us really master it. I created this course to improve your Git (and GitHub) knowledge at a radical level. A course that helps you feel less frustrated with Git. Launching May 21, 2024. Join the waiting list!

Here is how can I help you: