javascript - 动画、FPS 和 KineticJS

Question

所以我有一个球在屏幕上四处移动的小游戏，我想计算 FPS。我正在使用 KineticJS (4.3.1)，它在后台使用 requestAnimationFrame。

      var anim = new Kinetic.Animation(
          function(frame) {

            //game logic
               //move ball
               //check collisions - if collision occurs, stop animation
               //redraw 

          }
      }

'frame' 对象有一个 time 属性，可以用 frame.time 访问，它测量自动画首次启动以来的时间(以毫秒为单位)。

     var timeSinceAnimationStarted = frame.time;

什么是测量 FPS 的准确方法？

Answer 1

一个简单的实现，“帧间隔为 1 秒”。您可以使用 5 秒间隔的帧来平滑它

// variables accessible from within function(frame)
var frameCount = 0;
var currentSecond = 0;
var frameRate = 0;

// within function(frame), called with current time on each new frame
function updateFrameRate(time) {
    var second = Math.floor(time / 1000); // ms to integer seconds
    if (second != currentSecond) {
       frameRate = frameCount;
       frameCount = 0;
       currentSecond = second;
    }
    frameCount ++;
}