Uso de requestAnimationFrame

daPhyre · #1 (**permalink**) 22/08/2012, 12:31

Buen día compañeros del foro.

Estaba investigando sobre requestAnimationFrame, ya que me dicen que es lo mas óptimo al usar juegos en canvas, sin embargo, aun no me queda muy claro. Entiendo que esto solo optimiza el dibujado de imágenes, y no afecta en gran medida a los procesos del juego.

Actualmente tengo dividido el codigo de los procesos en la función game(), y el dibujado en la funcion paint(), ambos dentro de un SetInverval. ¿Cómo debería hacer entonces para usar ambas funciones? Mi teoría es la siguiente, díganme por favor si voy bien o mal:

Código PHP:

  function init(){ 
  setInterval(run,50) 
  paint(); 
} 
 
function run(){ 
  // movimiento de los sprites 
   
  //paint(); //Originalmente llamo a paint() al final de run. Ahora no con requestAnimationFrame. 
} 
 
function paint(){ 
  requestAnimationFrame(paint); 
  // Dibujado de los sprites 
   
}

Agradesco mucho si pueden ayudarme a aclarar esta duda para mi

Panino5001 · #2 (**permalink**) 22/08/2012, 15:27

Considerá que requestAnimationFrame es semejante -me refiero a la manera en que hay que ubicarlo- a setTimeout. Tenés que usarlo dentro de la función y hacer que llame de nuevo a la función, para lograr la animación. Otra cosa, los navegadores lo implementan de manera diferente (prefijos y tiempos de delay). Te recomiendo esta lectura: http://creativejs.com/resources/requestanimationframe/

#3 (**permalink**) 22/08/2012, 15:29

Aquí dice que por ser una función experimental, para usar requestAnimationFrame tienes que usar prefijos:

Código Javascript:

Ver original(function() {
  var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
                              window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
  window.requestAnimationFrame = requestAnimationFrame;
})();

Un saludo

daPhyre · #4 (**permalink**) 22/08/2012, 20:08

Conozco lo de los prefijos, de hecho ya implemento una solución similar a la de 3nr1c (Aunque la tuya es mucho más simple, creo que tomaré mejor esta prestada).

Mi pregunta es, ¿Dónde deberé llamar a la función run? Por el enlace que leo de Panino5001, en la sección "What if I want to set a frame rate?", me hace comprender que debo hacerlo de forma independiente al run, como en el ejemplo original. ¿Estoy en lo correcto?

De lo contrario, debería hacer las ejecuciones de Run dentro de paint, después del requestAnimationFrame. ¿Pero esto no congelaría entonces la ejecución de mi programa al pasar la pestaña a segundo plano, por ejemplo?

Esta sería mi duda, principalmente...

Panino5001 · #5 (**permalink**) 22/08/2012, 22:08

A ver si con un ejemplo queda más claro (traté de imaginar a qué llamás run y a qué paint; no sé si lo logré

):

Código PHP:

  <!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title></title> 
<style> 
#c{width:50px; height:50px; position:absolute; background:orange;} 
</style> 
<script type="text/javascript"> 
window.requestAnimFrame = (function() { 
     return window.requestAnimationFrame || 
            window.webkitRequestAnimationFrame || 
            window.mozRequestAnimationFrame || 
            window.oRequestAnimationFrame || 
            window.msRequestAnimationFrame || 
            function(callback) { 
                window.setTimeout(callback, 17); 
            }; 
})(); 
function run(p){ 
    //calcular movimiento y redibujar 
    var el=document.getElementById('c'), x=parseInt(el.style.left,10) || 0; 
    if(x<0 || x>960){ 
        p*=-1; 
    } 
    x+=p; 
    setTimeout(function() { 
        requestAnimFrame(function(){run(p);});//volvemos a llamar a run 
        paint(x); 
    }, 17); 
} 
function paint(x){ 
    //redibujar 
    document.getElementById('c').style.left=x+'px'; 
} 
onload=function(){run(5);}; 
</script> 
 
</head> 
 
<body> 
<div id="c"></div> 
</body> 
</html>

daPhyre · #6 (**permalink**) 23/08/2012, 10:33

Si, creo que es la segunda opción de lo que tenía pensado dentro de lo que dije. Me sigue preocupando su funcionamiento cuando se pierde el enfoque, supongo que solo podré saberlo experimentando con ello. Regresaré luego con los resultados. ¡Muchas gracias!

Edit: Probé ambos ejemplos, el de Panino5001 y el que proponía originalmente. Es difícil saber que ocurre a ciencia cierta, pero por lo que veo, tenía razón:

Mi ejemplo congela por completo el dibujado al dejar de ser la pestaña principal, mientras que el flujo del juego es reducido a un nivel menor (Feature de Chrome según leí para que no consuma tantos recursos), pero sigue corriendo. En cambio, el ejemplo propuesto por Panino5001, congela por completo tanto el pintado como el juego.

Supongo entonces, que ambos ejemplo se deberán usar, dependiendo lo que se quiera lograr. Espero no estar haciendo algo incorrecto si uso el primer ejemplo...

¡Muchas gracias por su ayuda! ;)