Adding game animations is easy to do in Phaser. Animation brings video game characters to life. Ane way you can incorporate animation into your game is to animate your grapheme's movements. You can even give them an idle state animation that volition run when the player is not moving at all. This will give your characters more personality.

Game Setup

You will demand a basic understanding of Phaser to work with animations. If you are not familiar with Phaser, start with a basic game tutorial before continuing. This tutorial will build upon those foundations.

To go started, create a game with a movable character. In our example, we will begin with a cake that is moved with the arrow keys. Below is the starting lawmaking:

          var config = {
            type: Phaser.AUTO,
            backgroundColor: 0xCCFFFF ,
            width: 600,
            height: 600,
            physics: {
            default: 'arcade'
            },
            scene: {
            preload: preload,
            create: create,
            update: update
            }
};
              var gamePiece;
var keyInputs;
var game = new Phaser.Game(config);
            
              function preload(){
              this.load.paradigm('gamePiece', 'img/gamePiece.png');
}
            
              function create(){
              gamePiece = this.physics.add.sprite(270, 450, 'gamePiece');
              keyInputs = this.input.keyboard.createCursorKeys();
}
            
              part update(){
              if(keyInputs.left.isDown){
              gamePiece.ten = gamePiece.ten - 2;
              }
              if(keyInputs.right.isDown){
              gamePiece.ten = gamePiece.10 + 2;
              }
              if(keyInputs.up.isDown){
              gamePiece.y = gamePiece.y - ii;
              }
              if(keyInputs.downwardly.isDown){
              gamePiece.y = gamePiece.y + 2;
              }
}

This code will create a game piece that tin move effectually a blue background. For simplicity, the example just uses an orange block for the game grapheme. It looks like this:

basic phaser game

Creating a Sprite Sheet

The showtime step is creating the animation. There are many ways to create animations, merely that is across what nosotros can cover here. For our purposes, it is just important that you salve your animation as a sprite sheet.

A sprite sheet is a single image file that contains a set of animation frames. Every frame in the animation is placed next to the one it follows. Each frame must be the same size. Blitheness programs will cutting upward the epitome into individual frames based on the dimensions of a single frame.

spritesheet
Image Credit: isaiah658/Open Clipart

The images are stored in an array. Similar all arrays, this ways that the first image is in the zero position. So, in the example above, the downwardly blitheness starts at zero and ends at three. The left animation begins at four and ends at 7.

Adding a Spritesheet to Phaser

Loading a sprite sheet is similar to loading an image in Phaser. Withal, your program will require a bit more information about the image file. Previously, we loaded our epitome with this text:

          this.load.paradigm('gamePiece', 'img/gamePiece.png');

Sprite sheets, however, need a few more parameters. We likewise have to specify the dimensions of a frame. So, to load a sprite canvass, we need to conform the code equally follows:

          this.load.spritesheet('gamePiece', 'img/spriteSheet.png', {
            frameWidth: 60,
            frameHeight: 60
});

The code is very similar. The large difference is that nosotros added a third parameter that specifies the width and superlative of our animation frames. In this case, the frames are lx pixels by 60 pixels.

spritesheet
Paradigm Credit: isaiah658/Open Clipart

This instance volition utilize a simple sprite sheet. We take added an arrow and flashing indicators to the game sprite. The arrow will point in the direction that our sprite moves as an indicator flashes in that direction. If the character isn't moving, the animation volition bicycle through all of the frames.

Creating Animations

Earlier we can animate our character, we have to create the animation. We take already uploaded the sprite sail, now we take to say which frames are in an animation. To create an animation, add together the following code to the create role:

          this.anims.create({
            cardinal: "up",
            frameRate: two,
            frames: this.anims.generateFrameNumbers("gamePiece", {start: 0, end:2}),
            repeat: -ane
});

Higher up is the animation for the up management.

  • The keyword anims is brusk for animations. Earlier versions used the full keyword animations, just the current release uses this shortcut.
  • The primal is the proper noun of the animation. You will use the primal to call the animation.
  • FrameRate controls how many frames are shown in a second. This instance will only take two frames per second.
  • The next line points to which paradigm and frames are used in the blitheness. The up blitheness uses the gamePiece paradigm and starts on frame 0 and ends on frame 2.
  • If you want the animation to loop continuously, set repeat to -1. Otherwise, you tin enter how many times the animation should repeat before stopping.

You volition demand to create an animation for each direction and the idle state.

How to Animate Your Grapheme

It is pretty piece of cake to add an animation to a graphic symbol. The tricky role is transitioning between animations. You can set a starting blitheness in the create role.

          gamePiece = this.add.sprite(270, 450, 'gamePiece');
gamePiece.anims.play("spin");

The first line creates the player. It is the aforementioned every bit creating a sprite with a single paradigm every bit we did earlier. The second line sets the blitheness to spin. Spin is an idle animation that will loop through all of the frames zero to xi.

Now, when you reload your game, the idle blitheness will brainstorm to play. But, you will find that information technology continues to play even afterward you move your character. Setting up the animations based on movement is a little trickier.

The temptation is to change the animation when the histrion presses the push like we did to set the movement. The problem with this arroyo is that we bank check if the histrion is pressing a key in the update office. The update role runs every frame. If we put an animation in that location, the animation would restart every frame the player is pressing the fundamental down.

To solve this, we demand to utilize a different method. Instead of checking if a key isDown, we want to know if a key is JustDown. JustDown is simply true when the central is first pressed. If the key is held, information technology is not true. If we set the animation with JustDown, the animation will not reset each frame.

You volition need to create a variable for the cardinal input you desire to monitor in the create role:

          leftKey = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.LEFT);
rightKey = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.Right);
upKey = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.Upwardly);
downKey = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.DOWN);

So, you lot will want to check if the key is pressed in the update function:

          if(Phaser.Input.Keyboard.JustDown(upKey)){
            gamePiece.anims.play("up");
}

Now, the game will change to the up animation once the upward key is starting time pressed. You will need to write a similar if-statement for each direction key.

We nonetheless have i final modification to brand. Right at present, when the player stops pressing a fundamental, the last animation continues to play. Nosotros desire information technology to become back to our idle animation. To exercise this, nosotros use the JustUp method. Like to JustDown, it will burn down when the actor releases a key.

          if(Phaser.Input.Keyboard.JustUp(upKey)){
            gamePiece.anims.play("spin");
}

In one case the role player stops pressing the up central, it will ready the blitheness back to our idle spin animation. You will need to write a similar statement for each direction key.

To see the concluding code get to pastebin.

Adjacent Step: Create Your Own Animation

Creating animations in Phaser is non that much different from using a static image. Just it will bring your game development to the adjacent level! Phaser makes adding animations like shooting fish in a barrel so you can concentrate on the hard part: making the animation!

When creating your own sprite sail, don't forget these pointers:

  • The animation frames must all have the same dimensions
  • The frames will be stored in an array that begins at zero
  • Animations oftentimes require different triggers than the triggers that set motility.