Phaser animations

Phaser animations

Phaser Animation Source Code

Hello I’m William Clarkson and I am going to show you how to setup Phaser animations.

First I copied my basic template which you can find on my website and you can also find it in the link
with the blog post that goes with this video and I renamed it animation and I’ve placed the images folder with one image
inside a call robot that will also be available on the blog post but I downloaded it from though I did modify into the
spritesheet and I made it basically the same way I made a sprite sheet in my last video so the first thing we need to do is add that into a preload statement to put it into Phaser’s library and you can find that under the snippets on my website toolbox phaser snippets and under sprite
snippets we need to add the


we need a reference name any unique name will do we’ll call it robot

and the path to the image and in this case it is


we have the sprite width plus any padding and it’s 80 wide and 111 high and the number of cells is 28

take out the console.log(“ready). we don’t need that debug statement. Go back to your snippets and you’ll find add image to stage which is the same as add sprite to stage for our purposes today they are identical and we will call it this robot and we just need an X and Y position a left and a top

100 px out and 150 down and then we put in that library key

now that will add it to the stage and I’ve set up a local server that I’m running this on you can use a local server or you can put it on your website

so let’s run that and there’s a robot and if you know from the last video you can say


and that will change the sprite

now to add Phaser animations there are four lines of code and we’ve done the first two already game.load.spritesheet and the game.add.sprite

to add animations I’ll go back to the snippets because it’s a little lengthy
add an animation
We get the name of the sprite just as robot.animations.add and then we give it a key such a
walk and since we’re are going to walk here anyway I’ll just leave that as it is, then we
give it a frame array and that can be a series of numbers like 0,1,2 in this case the walk cycle is 10 – 17
and we give it number of frames a second I usually use 12 of your animation might be will higher
and do we want to it to loop. In the walk animation one of the loop there might be times we don’t want it to loop like I don’t use the loop on
the jump and maybe doing an explosion or any one time animation you don’t want to loop, but for the walk we do
and the fourth and final piece of code is;

and then we give the key and that’s



great, walking along just fine, let’s add two more animations

and I’ll just copy this line

and one is idle when the robot is just standing around

and those numbers are 0 to 9

next is the jump

and that is

18 to 25

and we do not want that to joop

let’s check out the idle first will replace the walk key with the idle


now the jump

and that’s all there is to adding Phaser animations

I hope you found this useful, thank you for
watching, and please subscribe

Leave a Reply