O'Reilly logo

Instant HTML5 2D Platformer by Aidan Temple

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Animating the player (Must know)

For this task, we will focus on enhancing the visual appeal of the game by introducing and demonstrating the necessary steps required to animate the player sprite. These steps will involve adjusting the game framework to handle the loading and updating animated sprite sheets.

How to do it...

  1. To begin with, we must introduce a new object to the games framework. This object will be responsible for animating the player sprite through means of a sprite sheet.
  2. Create a new object called AnimationManager. With the animation object open, copy the following code in it:
    function AnimationManager() { this.currentFrame = 0; this.frameRate = 0; this.frameTime = 0; this.frameWidth = 0; this.frameHeight = 0; this.InitAnimationManager ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required