在畫布中設置動畫精靈幀

我正在用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不滿意。看起來......哈克和醜陋。有沒有一種方法可以讓人們知道在不跟蹤繪製方法之外的框架的情況下達到相同的效果？或者甚至是將動畫精靈畫成畫布的更好選擇也是不錯的。

謝謝。

來源

2011-10-27 James Dawson

你可以通過使用像Slick2D（http://slick.cokeandcode.com/wiki/doku.php/ http://slick.cokeandcode.com/）這樣的2D遊戲庫來建立這一切。它會爲你節省大量的時間，而且大部分的問題都已經解決了。 – jefflunt

@normalcity Slick是一個Java，而不是JavaScript。 – helpermethod

您可以根據當前時間的某個分數來選擇框架，例如，

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是毫秒值）的動畫。根據幀速率和動畫的不同，這可能看起來不穩定，但不依賴持久性計數器。

來源

2011-11-22 13:19:07 andrewmu

在畫布中設置動畫精靈幀

回答

相關問題