Creating Animations In Phaser Using Spritesheets

 

Getting Started

How to preload different assets in in Phaser

What We Will Cover:

-How to create an animations and have them looped
-How to call a stop to the animation
-How to destroy animation

Creating The Animation

In this section we will go over what it takes to create an animation from a spritesheet.


preload() {
    this.game.load.spritesheet('player', './assetsDirectory/player.png, 32, 32, 8');
}

create() {
    this.player = this.game.add.sprite(300, 300, 'player');
    let walk = this.player.animations.add('walk');
    this.player.animations.play('walk', 30, true);
}

The Breakdown:

Okay so lets take a look at what exactly we are doing here.

-Alright so first off we create a preload with our spritesheet to be loaded, if you want more information on this be sure to check
our one of our previous posts about preloading different assets.

-Next we want to go ahead and create our sprite, we will keep it simple and call it player

-Then we will go ahead and create a variable called ‘walk’, this variable will store our aniamtion we add this animation by
calling the Phaser animations.add function and we pass it the keyword we would like this animation to be called, in this case we
will simply call it ‘walk’ to match our variable name

-After this has been completed we will go ahead and play this animation, we do this by calling animations.play on the sprite we
want the animation which is this.player. This function will have three parameters passed to it, the first being the keyword
walk which tells it we will be using the animation previously added and called ‘walk’. The next parameter is 30 which is stating
how many frames per second we would like the animation speed to be. The last parameter is set to true which lets the animations.play
function know we would like this animation looped.

  • Just to note if you do not want the animation to be looped you can simply set the third parameter to false.

Stopping Your Animation:

Here we are going to quickly run through a couple different methods on how to stop your animation from playing


preload() {
    this.game.load.spritesheet('player', './assetsDirectory/player.png, 32, 32, 8');
}

create() {
    this.player = this.game.add.sprite(300, 300, 'player');
    let walk = this.player.animations.add('walk');
    this.player.animations.play('walk', 30, true);
    this.game.events.onInputDown(this.click, this)
}

//We will go over two different methods of animation stopping inside our click function
click() {
    //Method one
    this.player.animations.stop();
    //Method two
    this.player.animations.stop(null, true)
}

The Breakdown:

Okay so stopping an animation is not rocket science, but lets go ahead and run through what is going on and touch on the
two methods for stopping the animation

-Firstly here in this example we create an on input down event in the game to call our click function

-Inside of our click function is where we are going to call our animations.stop functionality. Method one
listed above is probably the most commonly used method, or atleast the one I personally have used the most ofter
this is going to just stop the animation, freezing it at its current frame.

-Our second method listed in the click function, is the same animations.stop function except this time we will be passing
two parameters the first parameter we have set to null, this means that it will stop the current animation from playing,
please note you can also pass in the name of the animation you wish to stop. The second parameter here is the resetFrame
parameter and we set this to true, to reset our frame back to 1 when stopped

Destroying All Animations On Your Sprite

In this quick section I will cover how to destroy all animations on a specific sprite.


create() {
    this.player = this.game.add.sprite(300, 300, 'player');
    let walk = this.player.animations.add('walk');
    this.player.animations.play('walk', 30, true);
    this.game.events.onInputDown(this.click, this)
}

click() {
    this.player.animations.destroy();
}

The Breakdown:

-We are doing exactly the same here as we did in the animations.stop functionality.

-Here in the click function, when the game world is clicked, we call animations.destroy() on our player sprite,
this will completed destroy all animations on this sprite.

Conclusion:

-Ran through how to create an animation from a sprite sheet and covered quickly how to have it looped
-Showed two different methods on how to call a stop to an animation
-Discussed how to call destroy to all animations on a specific sprite

Twitter

Error code 89: Invalid or expired token.

Stay Updated