Animation, FPS and KineticJS

So, I have a little game with a ball moving across the screen and I would like to calculate the FPS. I am using KineticJS (4.3.1) which uses requestAnimationFrame under the hood.

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

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

          }
      }

      

The "frame" object has a time property, which can be accessed using frame.time, which measures the time since the start of the animation in milliseconds.

     var timeSinceAnimationStarted = frame.time;

      

What would be the exact way to measure FPS?

+3


source to share


2 answers


Simple implementation with "frames in 1 s interval". You can smooth it out using, say, frames in 5s interval



// 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 ++;
}

      

+2


source


The proposed structure looks like this:

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

        //game logic
           //move ball
           //check collisions - if collision occurs, stop animation
           //redraw 
        numFrames++;
      }
  }

  setInterval(function(){
     alert(numFrames/1000);  //number of frames per second
     numFrames = 0;  //reset frame count
  },1000);   //every second

      



would it be?

0


source







All Articles