キャンバスでスプライトフレームをアニメーション化する

Question

私はキャンバス要素で小さなプラットフォームゲームを作っていますが、スプライトを使用する最善の方法を試すのに問題があります。

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

、私は定義していますアイドルスプライトともそのフレームの幅とフレーム数：http://i.imgur.com/wDX5R.png

ここに関連するコードです。次に私の描画メソッドでは、drawImageメソッドに描画するフレームを伝えるためにこれらのプロパティを使用しています。すべて正常に動作しますが、私はdrawメソッドの前に定義されたframeCount変数に不満です。それは...ハッキーと醜いようです。ドロー法以外のフレームを追跡せずに同じ効果を達成する方法を人々が知っているでしょうか？アニメーション化されたスプライトをキャンバスに描画するより優れた方法でも良いでしょう。

ありがとうございました。

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

これは、1秒の周期でアニメーションを表示します（1000はミリ秒の値です）。フレームレートとアニメーションによっては、これはぎくんまに見えるかもしれませんが、永続的なカウンタに依存しません。