Javascript 在画布中设置精灵帧的动画

我正在用canvas元素制作一个小的平台游戏，我很难找到使用精灵的最佳方法

Canvas不支持动画GIF，所以我不能这样做，所以我为我的动画精灵制作了一个电影长条，给人一种角色正在移动的错觉。像这样：

以下是相关代码：

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();

函数播放器（）{
this.idleSprite=新图像（）；
this.idleSprite.src=“/game/images/idleSprite.png”；
this.idleSprite.frameWidth=28；
this.idleSprite.frameHeight=40；
this.idleSprite.frameCount=12；
this.runningSprite=新图像（）；
this.runningSprite.src=“/game/images/runningSprite.png”；
this.runningSprite.frameWidth=34；
this.update=函数（）{
}
var frameCount=1；
this.draw=函数（）{
c、 drawImage（this.idleSprite，this.idleSprite.frameWidth*frameCount，0，this.idleSprite.frameWidth，this.idleSprite.frameHeight，0，0，this.idleSprite.frameWidth，this.idleSprite.frameHeight）；
如果（frameCount

如您所见，我正在定义空闲精灵及其帧宽度和帧计数。然后在我的draw方法中，我使用这些属性告诉drawImage方法要绘制什么帧。一切正常，但我对draw方法之前定义的

frameCount

变量不满意。似乎。。。又黑又丑。人们知道有没有一种方法可以在不跟踪画图方法之外的帧的情况下实现相同的效果？或者，甚至是一个更好的替代方案，以绘制动画精灵的画布将是好的

---

谢谢。

您可以根据当前时间的某一部分选择帧，例如：

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是毫秒值）。根据您的帧速率和动画，这可能看起来不稳定，但它不依赖于持续计数器。

您可以根据当前时间的某一部分选择帧，例如

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是毫秒值）。根据您的帧速率和动画，这可能看起来不稳定，但它不依赖于持久计数器。

您可以通过使用像Slick2D（/）这样的2D游戏库放弃自己构建这一切。它将为您节省大量时间，而且大多数问题都已经解决。@normalcity Slick是Java，而不是JavaScript。您可以通过使用像Slick2D（/）这样的2D游戏库放弃自己构建这些问题。它将为您节省大量时间，而且大多数问题都已经解决了。@normalcity Slick是Java，而不是JavaScript。