Sucede que el código se ejecuta una vez por cada cuadro y el tiempo entre cuadros también puede variar.
Por lo tanto necesitas sumar el espacio recorrido en ese tiempo, no la velocidad directamente. Puedes obtenerlo multiplicando la velocidad por el tiempo.
Entonces necesitas calcular el tiempo entre cuadros (deltaTime
). Para eso puedes usar Date.now()
o con mayor resolución, window.performance.now()
para conocer dos instantes de tiempo y restarlos. El resultado es en milisegundos.
Hecho el cálculo, ya no necesitas saber cuándo fue el instante anterior de tiempo. Así que guardas el instante actual en la variable del instante anterior para su uso en el próximo cuadro.
Recuerda expresar todas las magnitudes en las mismas unidades de tiempo.
El código se ve así:
var canvas, ctx;
var speed = 50; // px/s
var x = 0;
var y = 50;
lastTime = 0
deltaTime = 0
function round(number){
return Math.round(number * 100) / 100
}
function update(){
requestAnimationFrame(update)
currentTime = performance.now()
deltaTime = currentTime - lastTime
deltaTimeSeconds = deltaTime / 1000
lastTime = currentTime
ctx.clearRect(0, 0, canvas.width, canvas.height);
x += speed * deltaTimeSeconds;
if(x > 200) x = 0;
ctx.fillRect(x, y, 50, 50);
ctx.fillText(round(deltaTime) + " ms", 10, 180)
}
canvas = document.querySelector("canvas");
ctx = canvas.getContext("2d");
ctx.font = "1em serif"
lastTime = performance.now()
update()
<canvas width="300" height="200"></canvas>
Para limitar los FPS puedes simplemente decidir dibujar un cuadro si pasó cierto tiempo o no. El tiempo que pasó lo podes encontrar en la variable deltaTime
y el tiempo que tiene que pasar se calcula como 1s / FPS o lo que es lo mismo 1000ms / FPS.
Si eliges comparar con deltaTime
que está en milisegundos tendrás que elegir la segunda opción.
Por último, los cuadros no necesariamente se renderizan en el tiempo que deberían. Así que lo más probable es que obtengas menos del límite de FPS.
Puedes aplicar alguna corrección como esta para conseguir algunos FPS más.
var canvas, ctx;
var speed = 50;
var x = 0;
var y = 50;
var fps = 60; //También puede ser un valor de 30
fpsInterval = 1000 / fps
lastTime = 0
lastCorrectedTime = 0
deltaTime = 0
function round(number){
return Math.round(number * 100) / 100
}
function update(){
requestAnimationFrame(update)
currentTime = performance.now()
deltaTime = currentTime - lastTime
if (deltaTime < fpsInterval)
return
deltaTimeSeconds = deltaTime / 1000
lastTime = currentTime - (deltaTime % fpsInterval)
ctx.clearRect(0, 0, canvas.width, canvas.height);
x += speed * deltaTimeSeconds;
if(x > 200) x = 0;
ctx.fillRect(x, y, 50, 50);
ctx.fillText(round(deltaTime) + " ms " + Math.round(1000 / deltaTime) + " FPS", 10, 180)
}
canvas = document.querySelector("canvas");
ctx = canvas.getContext("2d");
ctx.font = "1em serif"
lastCorrectedTime = lastTime = performance.now()
update()
<canvas width="300" height="200"></canvas>