Como calcular y mostrar los FPS en HTML5 Canvas
Una de las primeras cosas que implementé a piNgine fue el contador de FPS para tener un mínimo control sobre el rendimiento del juego (aunque esta no sea la mejor forma) y sobretodo, para poder limitar dichos FPS a un máximo teórico para que el juego se ejecute a la misma velocidad sean cuales sean las prestaciones de la máquina.
Lo primero de todo es crear el archivo html con el elemento canvas sobre el cual trabajaremos (index.html):
1 2 3 4 5 6 7 8 9 10 11 12 | <!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> |
Y lo segundo (y último) el archivo Javascript encargado de calcular y mostrar los FPS (Main.js):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 | // 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(); }; } |
¡Listos! Ya podemos ver en nuestra esquina superior izquierda los FPS a los que se está ejecutando el juego y/o aplicación.
El contador tiene un margen de error de -+1 FPS a causa del Math.ceil que aplicamos, así que es normal si siempre os marca 1 FPS por encima del máximo establecido.
Podéis ver el resultado desde aquí.
Trackbacks & Pingbacks