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 to share
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 to share