1

El siguiente código avanza un bloque hasta 200 píxeles, cuando alcanza esa distancia, empieza a 0 de nuevo. ¿Cómo puedo controlar los fps, contar los actuales sin caídas de rendimiento y con la misma velocidad? Es decir, por ejemplo a 60 fps el bloque se desplazará igual que si lo hace a 30 fps. Cuando digo controlar me refiero a establecer esa tasas.

var canvas, ctx;
var speed = 2;
var x = 0;
var y = 50;
var fps = 60; //También puede ser un valor  de 30

function update(){
    requestAnimationFrame(update);

    ctx.clearRect(0, 0, canvas.width, canvas.height);
    x += speed;
    if(x > 200) x = 0;
    ctx.fillRect(x, y, 50, 50);
}

canvas = document.querySelector("canvas");
ctx = canvas.getContext("2d");
update();
<canvas></canvas>

0

1 respuesta 1

1

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>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.