Basic animation

In most 2D games, animation is done using spritesheets. We will look at how this works with Phaser

Creating a spritesheet
A spritesheet is basically a collection of individual frames of an animation packed into one image.

You, or the artist on your team, would either animate using software like Adobe Flash, or draw the images individually. Programs such as Texture Packer can help you create spritesheets out of individual images.

Example spritesheet:



Adding our animation
The first thing we need to do is load our spritesheet. There's a special method in Phaser for this:

game.load.spritesheet('mummy', 'metalslug_mummy37x45.png', 37, 45, 18);

The first and second arguments are just like before, the name and the filepath. The next two are the width and height of each frame in our spritesheet, and the last is how many frames in total in our animation.

We then add the sprite as we normally would. The new part we need, is adding an animation object through the AnimationManager.

We access the animation manager through '''mummy.animations. '''We then add the animation object through mummy.animations.add

We can name it whatever we like, this is just for our reference. The second argument allows us to specify which frames we want to use (in case we have multiple animations in one sheet). Finally, we tell the animation to play:

The play method takes the number of frames per second, and then whether or not we want this animation to loop.

Using uneven frame dimensions
What if not all of our frames were the same width and height? We'd need something to tell us the dimensions of each frame.

Phaser has an example of how this works. Using data from a JSON.

Challenges

 * Can you make the character animation when you press left or right, and stop animating when you release the keys?