Phaser 3 Tutorial Tutorial

Creating An Animated Sprite In Phaser3 Beta

Nicholas MordecaiDecember 22, 2017

1 1,513 3 minutes read

[vc_row][vc_column][vc_column_text]

Creating A Animated Sprite In Phaser 3 Beta!

-In this tutorial we will go over how to create a Phaser 3 animated sprite.

What we will cover:

How to load a spritesheet
How to create an animated sprite the preloaded spritesheet

To note this tutorial is being written based on a boilerplate project which can be found here https://github.com/photonstorm/phaser3-project-template
To keep things simple for these new tutorials in Phaser 3 Beta we will be keeping most everything in a single Scene file.
If you are unsure on how to setup a project in Phaser 3 Beta please take a look at this previous tutorial to get a good idea on how to set everything up https://sprite-storm.com/tutorial/creating-physics-sprite-phaser-3-beta/

Defining Our GameScene Class:


class GameScene extends Phaser.Scene {
    constructor() {
        super({
            key: 'GameScene',
        });
    }
}
export default GameScene;

Lets Break This Down:

Here we define a pretty standard ES6 class called GameScene that extends a Phaser Scene.
We build our constructor and super, our super contains an object with a key of GameScene.
Lastly we just export our GameScene

Setting Up Our Preload:


class GameScene extends Phaser.Scene {
    constructor() {
        super({
            key: 'GameScene',
        });
    }
    preload() {
        this.load.spritesheet('bird', './assets/images/bird.png', {
        frameWidth: 66, frameHeight: 56, endFrame: 4});
    }
}
export default GameScene;

Lets Break This Down:

First off we add our preload function inside of our GameScene class after our constructor.
Inside the preload function we call this.load.spritesheet() function which is built into Phaser 3 Beta.
Last we pass our parameters. We pass a key for reference in my case I called it ‘bird’, next we pass our path to our spritesheet in our project directory, last we pass an object which contains frameWidth, frameHeight, and endFrame. These are pretty self explanatory but I will cover them quickly.
frameWidth is the width of each frame in our spritesheet
frameHeight is the height of each frame in our spritesheet
endFrame is new to Phaser 3 Beta as far as I know, I believe however is the frame we want the loader to end on, therefore controlling however many frames in a sheet we want the loader to actually load. Don’t quote me on this its just my best guess.

Setting Up Our Create Function:


class GameScene extends Phaser.Scene {
    constructor() {
        super({
            key: 'GameScene',
        });
    }
    preload() {
        this.load.spritesheet('bird', './assets/images/bird.png', { frameWidth: 66, frameHeight: 56, endFrame: 4});
    }
    create() {
        var config = {
            key: 'birds',
            frames: this.anims.generateFrameNumbers('bird', {
                start: 1,
                end: 3
            }),
            repeat: -1,
            frameRate: 15
        };
        this.anims.create(config);
        this.bird = this.add.sprite(400, 300, 'birds');
        this.bird.anims.play('birds');
    }
}
export default GameScene;

Lets Break This Down:

For this example we will be creating an animation from a config, there are other ways to accomplish the same effect but we will be using a config.
We begin by defining a variable called config which houses our object with config parameters.
We begin by defining a key, in this case I called mine ‘birds’.
Next we define our frames, we call the built in function in Phaser 3 Beta this.anims.generateFrameNumbers as a function and pass it some parameters to use. The first parameter is the key to use to generate the frames from which in our case will be ‘bird’ from the key we gave the spritesheet preload. We then pass start and end, and pass it the frame to start from and to end on.
We then pass repeat and give it a value of -1 which will cause the animation to loop.
For our last parameter we pass a frame rate or speed at which we want the animation to be played at.
Next we create our animation from our config by calling this.anims.create(config) passing our config object to the animation create functionality in Phaser 3 Beta
Then we create a variable to hold our animated sprite in this case I named mine this.bird which accepts three parameters X position of our sprite, Y position of our sprite, as well as the key we want to create our sprite from in our case its the key we passed to our config which is ‘birds’
Lastly we tell our sprite to play our animation by calling this.bird.anims.play() and passing our key which is ‘birds’
If all was done correctly you should see something like this on your screen