Анимация спрайтов в холсте

Question

Я делаю небольшую платформенную игру с элементом canvas, и мне трудно найти лучший способ использовать спрайты.

Canvas не поддерживает анимированные GIF-изображения, поэтому я не могу сделатьпоэтому вместо этого я сделал кинопленку для своих анимированных спрайтов, чтобы создать иллюзию движения персонажа.Вот так: http://i.imgur.com/wDX5R.png

Вот соответствующий код:

function player() {

    this.idleSprite = new Image();
    this.idleSprite.src = "/game/images/idleSprite.png";
    this.idleSprite.frameWidth = 28;
    this.idleSprite.frameHeight = 40;
    this.idleSprite.frameCount = 12;

    this.runningSprite = new Image();
    this.runningSprite.src = "/game/images/runningSprite.png";
    this.runningSprite.frameWidth = 34;

    this.update = function() {

    }

    var frameCount = 1;
    this.draw = function() {
        c.drawImage(this.idleSprite, this.idleSprite.frameWidth * frameCount, 0, this.idleSprite.frameWidth, this.idleSprite.frameHeight, 0, 0, this.idleSprite.frameWidth, this.idleSprite.frameHeight);
        if(frameCount < this.idleSprite.frameCount - 1) { frameCount++; } else { frameCount = 0; }
    }
}

var player = new player();

Как видите, я определяю неработающий спрайт, а также его ширину и количество кадров.Затем в моем методе рисования я использую эти свойства, чтобы сообщить методу drawImage, какую рамку рисовать.Все работает нормально, но я недоволен переменной frameCount, определенной перед методом draw.Кажется ... хаки и уродливые.Был бы способ, которым люди знают, чтобы достигнуть того же самого эффекта, не отслеживая рамки вне метода рисования?Или даже лучшая альтернатива рисованию анимированных спрайтов на холсте.

Спасибо.

Answer 1

Вы можете выбрать кадр в зависимости от некоторой доли текущего времени, например,

this.draw = function() {
    var fc = this.idleSprite.frameCount;
    var currentFrame = 0 | (((new Date()).getTime()) * (fc/1000)) % fc;
    c.drawImage(this.idleSprite, this.idleSprite.frameWidth * currentFrame, 0, this.idleSprite.frameWidth, this.idleSprite.frameHeight, 0, 0, this.idleSprite.frameWidth, this.idleSprite.frameHeight);
}

Это даст вам анимацию с периодом в одну секунду (1000 - это значение в миллисекундах).В зависимости от частоты кадров и анимации это может выглядеть прерывисто, но не зависит от постоянных счетчиков.