Instant HTML5 2D Platformer - Instant HTML5 2D Platformer - page 14

3. The next step is to modify the call to initialize the drawing of the player sprite.

Inside of the Player object constructor replace the InitDrawableObject
call with the following:
this.InitAnimationManager(player_idle_left, 300, 300, 1, 6, 20);

4. Similarly replace the prototype property at the bottom of the player object with

the following:
Player.prototype = new AnimationManager;

5. The inal step is to replace the player sprite with the sprite sheet animation, which
can be found within the Chapter 1 Task 5 images folder provided with the
topic. If you run the application you should see an animated player sprite in the
top-left corner of the application.

How it works...

The animation manager is an extension of the drawable object we created previously and
as a result introduces an additional draw function that is able to output animated sprites.
The animation manager begins by declaring a number of variables that relate to the frame
rate of the given sprite, the time taken to animate the sprite as well as the width and height
of a given frame within a sprite sheet.

Each of these variables is initialized within the InitAnimationManager constructor.
The animation manager constructor also takes in a texture, that is, a sprite sheet, a 2D
position, and a depth variable used to determine the drawing order of objects.

The draw method within the animation manager is responsible for creating a source
rectangle, which is positioned above the irst cell in the sprite sheet. For each frame the
source rectangle is positioned above the next cell within the sprite sheet. Once the source
rectangle reaches the end of the sprite sheet its position is reset to the irst cell. By doing
this we are selectively picking out and displaying one cell at a time from the sprite sheet.
We then loop through each cell at a frame rate, which gives the illusion of animation, in
this case 12 frames per second.