HTML5 Mostrar FPS (frames por segundo o frames per second)
Bienvenidos a VerTutoriales.com en esta ocasión os traemos un código extraido de http://www.project-cyan.com, el código mostrará los fps (frames por segundo o frames per second) en nuestro canvas de manera que tengamos un control del rendimiento de nuestra aplicación o juego en el navegador.
Project Cyan es un proyecto en HTML5 donde están realizando una aplicación para crear un juego de rol en este lenguaje. Os recomiendo que le echeis un ojo por que no tiene desperdicio.
El código que utilizan es el siguiente:
// Variable global para guardar nuestra objeto principal.
var _Core = null;
// Una vez esté la página completamente cargada ejecutaremos la función init.
window.onload = init;
// Creamos el objeto y lo guardamos en la variable global.
function init()
{
_Core = new Core().initCore();
}
function Core()
{
// FPS máximos a los que queremos que se ejecute la aplicación.
this.maxfps = 32;
// Variables necesarias para el recuento de FPS y el cálculo del delay.
this.frameCount = 0;
this.currentFps = 0;
this.drawInterval = 1 / this.maxfps * 1000;
this.lastFps = new Date().getTime();
// Variables para almacenar las referencias al elemento canvas.
this.canvas = null;
this.canvasCtx = null;
// Método que utilizamos como constructor.
this.initCore = function()
{
// Obtenemos la referencia del elemento canvas y indicamos
// sobre qué tipo de contexto trabajaremos (en nuestro caso, 2D).
this.canvas = document.getElementById('canvas');
this.canvasCtx = this.canvas.getContext('2d');
// Inicializamos el intervalo a los FPS deseados.
setInterval(function(){_Core.startApp();}, this.drawInterval);
return this;
}
this.startApp = function()
{
// Actualizamos los datos de los FPS.
this.update();
// Pintamos los FPS dentro del elemento Canvas.
this.draw();
}
this.update = function()
{
// Calculamos el tiempo desde el último frame.
var thisFrame = new Date().getTime();
var diffTime = Math.ceil((thisFrame - this.lastFps));
if (diffTime >= 1000) {
this.currentFps = this.frameCount;
this.frameCount = 0.0;
this.lastFps = thisFrame;
}
this.frameCount++;
}
this.draw = function ()
{
// Limpiamos el contexto del canvas.
this.canvasCtx.clearRect(0, 0, this.canvas.width, this.canvas.height);
// Finalmente, pintamos los FPS.
this.canvasCtx.save();
this.canvasCtx.fillStyle = '#000';
this.canvasCtx.font = 'bold 10px sans-serif';
this.canvasCtx.fillText('FPS: ' + this.currentFps + '/' + this.maxfps, 10,15);
this.canvasCtx.restore();
};
}
Este código que estará incluido en un .js (ellos lo incluyen en el main.js) se tendrá que llamar desde nuestro html principal, podemos ver el código que falta:
<!doctype html>
<html lang="es">
<head>
<title>Project-Cyan.com</title>
<script src="js/Main.js"></script>
</head>
<body>
<canvas id="canvas" width="200px" height="200px" style="border:1px solid #000;">
<p>¡Explorador no compatible!</p>
</canvas>
</body>
</html>
Con esto ya podreis ver los fps a lo que está rindiendo vuestro programa en cualquier navegador que soporte canvas y por supuesto html5, os dejo el ejemplo aquí y el post original por si quereis ampliar información.
Espero que os sirva, un saludo!
