帶遊戲循環的JavaScript流暢動畫

Question

我簡化了我的遊戲循環，只是一個在屏幕上移動的框，Click Here。出於某種原因，盒子似乎並不平穩。我做了一個video of it here。

遊戲循環被稱爲像這樣：

var game = function() { 
    var now = Date.now(); 
    var delta = now - then; 

    update(delta/1000); 
    draw(); 

    then = now; 
}; 

setInterval(game, 1000/50); 

我試圖分離主遊戲循環的draw電話，把他們在​​，但問題仍然存在。我看過一些看起來運行順利的教程。我甚至嘗試過使用fixed time-step game loop，但這讓我的遊戲運行速度難以控制。

我該如何改進上述邏輯，或許利用​​和維護deltaTime來調用update。

Answer 1

我相信在使用畫布時，您的位置變量應該是整數值，因爲它們表示像素和浮點值沒有意義。如果你打開控制檯並輸入sceneManager.currentScene.GameplayLayer.ball.position.x，那麼你會得到一個非常長的小數。我認爲對OP的評論表明，有時球移動2px而不是1px可能會對某事產生影響。當你更新你的位置時，你最終得到一個浮點值。

我相信它有時會舍入到下一個最高像素位置，有時會下降。我會嘗試採取在地面或天花板上，像這樣：

this.position.x += Math.floor(this.speed * 100 * deltaTime * Math.cos(directionInRadians)); 
this.position.y += Math.floor(this.speed * 100 * deltaTime * Math.sin(directionInRadians)); 

我會做這些改變的，看看它是如何工作。

編輯：由於你編輯你的問題來簡化邏輯。我可以建議一些嘗試，即使用我創建的Clock對象，這是我一直使用的。它給了我流暢的動畫，而且非常簡單。它基於clock that Three.JS uses，因此您可能也想檢查一下。即使你想使用你自己的代碼，你至少可以嘗試這個現成的解決方案，看看它是否給你相同的結果。它似乎對我來說工作得很好。另外，您嘗試使用墊片，因此您在遊戲功能中的呼叫應該是requestAnimFrame(game);？

var Clock = function() { 

    /** Member startTime will remain fixed at its integer 
     millisecond value returned by Date.now(). Will always 
     be equal to the time the clock was started */ 
    this.startTime = Date.now(); 

    /** Member ms is updated by tick() to a integer value reprsenting 
     the number of milliseconds between the epoch (January 1, 1970) 
     and the current date and time of the system. */ 
    this.ms = this.startTime; 
    this.last = this.startTime; /** millis at last call to tick() */ 
    this.time = 0;    /** ms in floating point seconds not millis */ 

    /** Member dt is updated by tick() to an integer value representing 
     the number of milliseconds since the last call to tick(). */ 
    this.dt = 0; 
    this.delta = 0; /** dt in floating point seconds not millis */ 

    /** Member fps is updated by tick() to a floating point value representing 
     frames per second, updated and averaged approximately once per second */ 
    this.fps = 0.0; 

    /** Member frameCount is updated to an integer value representing the 
     total number of calls to tick() since the clock was created. */ 
    this.frameCount = 0; 

    /** The frameCounter member is a flag you can turn off if you don't need to 
     calculate the frameCount or do the average FPS calculation every second */ 
    this.frameCounter = true; 

    /** Private globals needed to calculcate/average fps over eachs second */ 
    var timeToUpdate = 0; 
    var framesToUpdate = 0; 

    /************************************************************************************ 
     The tick() method updates ALL the Clock members, which should only 
     be read from and never written to manually. It is recommended that 
     tick() is called from a callback loop using requestAnimationFrame 

     Learn more: http://paulirish.com/2011/requestanimationframe-for-smart-animating/ 
    *************************************************************************************/ 
    this.tick = function() { 
     /** This is a new frame with it's very own unique number */ 

     if (this.frameCounter) this.frameCount++; 

     /** Set the private currentTime variable */ 
     this.ms = Date.now(); 

     /** Update time delta and immediately set last time to 
      be as accurate as possible in our timings. */ 
     this.dt = this.ms - this.last; 
     this.last = this.ms; 

     /** Calculate floating-point delta and increment time member */ 
     this.delta = 0.001 * this.dt; 
     this.time += this.delta; 

     /** Calculate private temp variables for fps calculation */ 
     if (this.frameCounter) { 
      timeToUpdate += this.dt; 
      framesToUpdate++; 
      if (timeToUpdate > 1000) { 
       this.fps = Math.round((framesToUpdate * 1000)/timeToUpdate); 
       framesToUpdate = 0; 
       timeToUpdate = 0; 
      } 
     } 
    } 
} 

如果你使用這個對象，那麼所有你需要做在你的初始化函數創建一個新的時鐘對象，像這樣clock = new Clock();。然後在每個動畫調用中調用clock.tick()。然後，您可以訪問成員clock.delta和clock.time，它們會以秒爲單位給出delta和time作爲浮點值。 clock.dt和clock.ms會給你相同的毫秒整數。您也可以使用clock.fps訪問fps，或者通過設置clock.frameCounter = false來禁用它。

Answer 2

使用three.js時鐘平滑了我的動畫。我強烈推薦它。其他好的代碼也在那裏。