✓ Load in sprite sheet
✓ Create the sprite object
✓ Create animation from sprite sheet
☐ Animate sprite
We have everything else set up, now let’s bring our sprite to life!
Inside update()
, we can include our logic for controlling our sprite and animating it however we want.
class ExampleScene extends Phaser.Scene { // … Previous code update() { if (gameState.cursors.right.isDown) { gameState.exampleSprite.setVelocityX(100); gameState.exampleSprite.anims.play('movement', true); } } }
In the code above, if the right arrow key is pressed gameState.exampleSprite
moves to the right. Then we play the animation by calling gameState.exampleSprite.anims.play('movement', true)
:
gameState.exampleSprite.anims
allows us to access all the animations we created.anims.play()
will play all the animations, or a single animation if passed an argument.- We provide
.anims.play()
with two arguments:- the first is an animation key, in this case it’s the
movement
animation. - the second is a boolean, which won’t play the animation from the start, if it’s already in progress.
- the first is an animation key, in this case it’s the
Let’s animate Codey!
Instructions
In update()
, there is an if
statement already set up that moves Codey to the right.
Inside that if
statement, call anims.play()
on gameState.player
. Pass the arguments 'run'
and true
to .play()
.
After passing this checkpoint, while in game, press your right arrow key to move Codey and see the current state of animation.