0
\$\begingroup\$

How to do in HTML5 canvas Image animating?

I am have this code now: http://jsfiddle.net/WnjB6/1/

In here I am can add animations something like -> Animation.add('stand', [0, 1, 2, 3, 4, 5]);

But how to play this animation? My image drawing function is -> drawTile(canvasX, canvasY, tile, tileWidth, tileHeight);

Animation['stand']; return 0, 1, 2, 3, 4, 5

I am need something like when I am run Animation.play('stand') run animation from 'stand' array.

I am try to do this something like one day, but no have more idea how. :(

Thanks and sorry for my bad English language.

\$\endgroup\$

1 Answer 1

0
\$\begingroup\$
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');

// Constructor for an animation object
// image: graphics source
// x, y: position to draw the animation
// width, height: size of each tile
// htiles: number of tiles horizontally in the image source
var Animation = function(image, x, y, width, height, htiles) {
    this.image = image;
    this.x = x;
    this.y = y;
    this.width = width;
    this.height = height;
    this.htiles = htiles;
    this.animations = {};
    this.currentAnimation = [0];
    this.currentFrame = 0;
}

// Add animation to the object
Animation.prototype.add = function(name, frames) {
    this.animations[name] = frames;
};

// Select animation by name
Animation.prototype.play = function(name) {
    this.currentAnimation = this.animations[name];
    this.currentFrame = 0;
};

// Advance animation, and draw the tile
Animation.prototype.nextFrame = function() {
    // Move to next frame in current animation
    this.currentFrame = (this.currentFrame + 1) % this.currentAnimation.length;
    // Extract which image tile that is
    var tile = this.currentAnimation[this.currentFrame];
    this.drawTile(tile);
};

// Draw the given tile at the current position
Animation.prototype.drawTile = function(tile) {
    // Clear region we are going to draw on
    context.clearRect(this.x,this.y,this.width,this.height);
    context.drawImage(this.image,
        (tile % this.htiles) * this.width,
        Math.floor(tile / this.htiles) * this.height,
        this.width, this.height,
        this.x, this.y, this.width, this.height);
};

// Initialize the animation
var image = new Image();
image.src = 'http://flashpunk.net/img/tut/swordguy.png';

var player1 = new Animation(image, 0, 0, 48, 32, 6);
player1.add('stand', [0, 1, 2, 3, 4, 5]);
player1.add('walk', [6, 7, 8, 9, 10, 11]);

var player2 = new Animation(image, 60, 60, 48, 32, 6);
player2.add('stand', [0, 1, 2, 3, 4, 5]);
player2.add('walk', [6, 7, 8, 9, 10, 11]);

// Start with the walking animation, and start animating
player1.play('walk');
player2.play('stand');
var interval = setInterval(function() {
    player1.nextFrame();
    player2.nextFrame();
}, 200);

// Toggle animation between standing and walking every 3 seconds
var mode = 0;
setInterval(function() {
    if (mode == 0) {
        mode = 1;
        player1.play('stand');
    }
    else {
        mode = 0;
        player1.play('walk');
    }
}, 3000);

You can see the result here: http://jsfiddle.net/WnjB6/7/

\$\endgroup\$
0

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .