Instant HTML5 2D Platformer - Instant HTML5 2D Platformer - page 13

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 = function(texture, x, y, z,
frameCount, framesPerSec) {

this.InitDrawableObject(texture, x, y, z);
this.currentFrame = 0;
this.frameCount = frameCount;
this.frameRate = 1 / framesPerSec;
this.frameTime = this.frameRate;
this.frameWidth = this.texture.width / this.frameCount;
this.frameHeight = this.texture.height;

return this;
}

this.Draw = function(deltaTime, context, deltaX, deltaY) {

var sourceRect = this.frameWidth * this.currentFrame;
context.drawImage(this.texture, sourceRect, 0,
this.frameWidth, this.frameHeight, this.x - deltaX,
this.y - deltaY, this.frameWidth, this.frameHeight);

this.frameTime -= deltaTime;

if (this.frameTime <= 0)
{
this.frameTime = this.frameRate;
++this.currentFrame;
this.currentFrame %= this.frameCount;
}
}
}

AnimationManager.prototype = new DrawableObject;