Adding game animations is easy to do in Phaser. Animation brings video game characters to life. One way you can incorporate animation into your game is to animate your character’s movements. You can even give them an idle state animation that will run when the player is not moving at all. This will give your characters more personality.
Game Setup
You will need 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 get started, create a game with a movable character. In our example, we will begin with a block that is moved with the arrow keys. Below is the starting code:
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.image('gamePiece', 'img/gamePiece.png');
}
function create(){
gamePiece = this.physics.add.sprite(270, 450, 'gamePiece');
keyInputs = this.input.keyboard.createCursorKeys();
}
function update(){
if(keyInputs.left.isDown){
gamePiece.x = gamePiece.x - 2;
}
if(keyInputs.right.isDown){
gamePiece.x = gamePiece.x + 2;
}
if(keyInputs.up.isDown){
gamePiece.y = gamePiece.y - 2;
}
if(keyInputs.down.isDown){
gamePiece.y = gamePiece.y + 2;
}
}This code will create a game piece that can move around a blue background. For simplicity, the example just uses an orange block for the game character. It looks like this:
Creating a Sprite Sheet
The first step is creating the animation. There are many ways to create animations, but that is beyond what we can cover here. For our purposes, it is just important that you save 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. Animation programs will cut up the image into individual frames based on the dimensions of a single frame.
The images are stored in an array. Like all arrays, this means that the first image is in the zero position. So, in the example above, the down animation starts at zero and ends at three. The left animation begins at four and ends at seven.
Adding a Spritesheet to Phaser
Loading a sprite sheet is similar to loading an image in Phaser. However, your program will require a bit more information about the image file. Previously, we loaded our image with this text:
this.load.image('gamePiece', 'img/gamePiece.png');Sprite sheets, however, need a few more parameters. We also have to specify the dimensions of a frame. So, to load a sprite sheet, we need to adjust the code as follows:
this.load.spritesheet('gamePiece', 'img/spriteSheet.png', {
frameWidth: 60,
frameHeight: 60
});The code is very similar. The big difference is that we added a third parameter that specifies the width and height of our animation frames. In this case, the frames are 60 pixels by 60 pixels.
This example will use a simple sprite sheet. We have 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 will cycle through all of the frames.
Creating Animations
Before we can animate our character, we have to create the animation. We have already uploaded the sprite sheet, now we have to say which frames are in an animation. To create an animation, add the following code to the create function:
this.anims.create({
key: "up",
frameRate: 2,
frames: this.anims.generateFrameNumbers("gamePiece", {start: 0, end:2}),
repeat: -1
});Above is the animation for the up direction.
- The keyword anims is short for animations. Earlier versions used the full keyword animations, but the current release uses this shortcut.
- The key is the name of the animation. You will use the key to call the animation.
- FrameRate controls how many frames are shown in a second. This example will only have two frames per second.
- The next line points to which image and frames are used in the animation. The up animation uses the gamePiece image and starts on frame 0 and ends on frame 2.
- If you want the animation to loop continuously, set repeat to -1. Otherwise, you can enter how many times the animation should repeat before stopping.
You will need to create an animation for each direction and the idle state.
How to Animate Your Character
It is pretty easy to add an animation to a character. The tricky part is transitioning between animations. You can set a starting animation in the create function.
gamePiece = this.add.sprite(270, 450, 'gamePiece');
gamePiece.anims.play("spin");The first line creates the player. It is the same as creating a sprite with a single image as we did before. The second line sets the animation to spin. Spin is an idle animation that will loop through all of the frames zero to eleven.
Now, when you reload your game, the idle animation will begin to play. But, you will notice that it continues to play even after you move your character. Setting up the animations based on movement is a little trickier.
The temptation is to change the animation when the player presses the button like we did to set the movement. The problem with this approach is that we check if the player is pressing a key in the update function. The update function runs every frame. If we put an animation there, the animation would restart every frame the player is pressing the key down.
To solve this, we need to use a different method. Instead of checking if a key isDown, we want to know if a key is JustDown. JustDown is only true when the key is first pressed. If the key is held, it is not true. If we set the animation with JustDown, the animation will not reset each frame.
You will need to create a variable for the key input you want to monitor in the create function:
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.UP);
downKey = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.DOWN);Then, you 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 up key is first pressed. You will need to write a similar if-statement for each direction key.
We still have one final modification to make. Right now, when the player stops pressing a key, the last animation continues to play. We want it to go back to our idle animation. To do this, we use the JustUp method. Similar to JustDown, it will fire when the player releases a key.
if(Phaser.Input.Keyboard.JustUp(upKey)){
gamePiece.anims.play("spin");
}Once the player stops pressing the up key, it will set the animation back to our idle spin animation. You will need to write a similar statement for each direction key.
To see the final code go to pastebin.
Next Step: Create Your Own Animation
Creating animations in Phaser is not that much different from using a static image. But it will bring your game development to the next level! Phaser makes adding animations easy so you can concentrate on the difficult part: making the animation!
When creating your own sprite sheet, 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 often require different triggers than the triggers that set movement.