Jump to content

Custom FPS with requestAnimationFrame


Recommended Posts

Do you want custom FPS with smooth animations?

I have made a method that makes this possible.

The first 1-3 seconds may be buggy, but after that it works smooth.

The update() method is called (custom FPS) times per second.

The draw() method is called how many times the browser refreshes per second.

Here's the code: (mainCanvas is a canvas with the size 800,600)

window.requestAnimFrame = window.requestAnimationFrame       ||                           window.webkitRequestAnimationFrame ||                           window.mozRequestAnimationFrame    ||                           window.oRequestAnimationFrame      ||                           window.msRequestAnimationFrame     ||                           function( callback )                          {                              window.setTimeout(callback, Math.floor(1000 / 60));                          };function step(){	for (var i = 0; i < updates.length; i++)	{		if (updates[i] == tick)		{			utick++;			update();		}	}	tick++;	var cursec = (new Date()).getSeconds();	if (cursec != prevsec)	{		prevsec = cursec;		frametime = tick;		tick = 0;		uframetime = utick;		utick = 0;		updates = [];		for (var i = 0; i < fps; i++)		{			var uind = Math.ceil(frametime / fps * i);			if (uind >= frametime)			{				uind = frametime - 1;			}			updates[i] = uind;		}	}	draw();	requestAnimFrame(step);}function update(){}function draw(){	ctx.clearRect(0, 0, 799, 599);	ctx.fillText(uframetime.toString(), 10, 20);}var mainCanvas = document.getElementById("mainCanvas");var ctx = mainCanvas.getContext("2d");var fps = 30;var prevsec = (new Date()).getSeconds();var tick = 0;var frametime = 0;var utick = 0;var uframetime = 0;var updates = [];ctx.font="20px Georgia";step();
Link to comment
Share on other sites

Most of this is from stats.js. I believe that Mr. Doob made it. Works good for me.

var startTime = Date.now(), prevTime = startTime; var ms = 0, msMin = Infinity, msMax = 0; var fps = 0, fpsMin = Infinity, fpsMax = 0; var frames = 0, mode = 0;function loopStart(){ (function animloop(){ var time = Date.now(); requestAnimationFrame(animloop); (function(){ startTime = Date.now(); //your logic $(".stats").text(all); } timer++; })(); frames++; if ( time > prevTime + 1000 ) { fps = Math.round( ( frames * 1000 ) / ( time - prevTime ) ); fpsMin = Math.min( fpsMin, fps ); fpsMax = Math.max( fpsMax, fps ); prevTime = time; frames = 0; }

startTime = time;

$(".stats").text(fps);

})();

}

Link to comment
Share on other sites

Most of this is from stats.js. I believe that Mr. Doob made it. Works good for me.

var startTime = Date.now(), prevTime = startTime; var ms = 0, msMin = Infinity, msMax = 0; var fps = 0, fpsMin = Infinity, fpsMax = 0; var frames = 0, mode = 0;function loopStart(){ (function animloop(){ var time = Date.now(); requestAnimationFrame(animloop); (function(){ startTime = Date.now(); //your logic $(".stats").text(all); } timer++; })(); frames++; if ( time > prevTime + 1000 ) { fps = Math.round( ( frames * 1000 ) / ( time - prevTime ) ); fpsMin = Math.min( fpsMin, fps ); fpsMax = Math.max( fpsMax, fps ); prevTime = time; frames = 0; }

startTime = time;

$(".stats").text(fps);

})();

}

Thanks, I'll try to implement this into my game.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...