Journées ISN 6 et 13 janvier 2014 : Canvas, JavaScript, animation et mathématiques simples

Utilisation de la fonction setInterval(...)

La fonction setInterval permet d'appeler une autre fonction à intervalle régulier (en ms). 

Voici un exemple en ligne: http://jsbin.com/yuhule/3/edit

Code source :

var addStarToTheBody = function(){
    document.body.innerHTML += "*";
};
 
//this will add one star to the document each 200ms (1/5s)
setInterval(addStarToTheBody, 200);

Beaucoup mieux: utilisation de RequestAnimationFrame

 HTML5 a introduit à la demande des développeurs de jeux et d'applications musicales une API permettant de faire une "game loop" à 60 images par seconde, avec de nombreuses optimisations :

• La boucle sera exécutée à une fréquence la plus près possible de 60 images/s,
• On pourra connaitre très précisément le temps écoulé entre deux frames d'animation,
• Si la zone à animer n'est pas visible (onglet caché, navigateur iconifié, page scrolée), seuls les ordres non graphiques seront exécutés, cela permet d'économiser énormément de CPU, de faire des jeux sur mobiles qui ne videront pas la batterie,etc.

Exemple typique : http://jsbin.com/gixepe/2/edit

Code source :

window.onload = function init() {
   // called after the page is entirely loaded
   requestAnimationFrame(mainloop);
};  
 
function mainloop(time) {
   document.body.innerHTML += "*";
 
   // call back itself every 60th of second
   requestAnimationFrame(mainloop);
}

Notez que la dernière ligne de la boucle d'animation est simplement une demande au navigateur de re-exécuter cette même boucle d'animation (requestAnimationFrame = "je demande une nouvelle frame d'animation). Le paramètre est la fonction qui implémente la boucle d'animation. C'est une "sorte" d'appel récursif si ce n'est que cet appel est "asyncrhone" : en attendant le rappel, le navigateur n'est pas bloqué, d'autres insrtructions peuvent s'exécuter etc.

Notez qu'on peut avoir plusieurs game loops simultanément dans un même programme. Elles sont toutes "en tâche de fond", non blocantes et entre chaque exécution le programme peut réagir aux interactions clavier, souris, etc.

Implémentation d'un petit "moteur de jeu" 

Voici le petit squelette d'un jeu:

var GF = function(){
 
    var mainLoop = function(time){
        //main function, called each frame
        requestAnimationFrame(mainLoop);
    };
 
    var start = function(){
        requestAnimationFrame(mainLoop);
    };
 
    //our GameFramework returns a public API visible from outside its scope
    return {
        start: start
    };
};

Et voici comment avec ce squelette on créera un jeu :

var game = new GF();
 
// Launch the game, start the animation loop etc.
game.start();

Rajoutons donc quelque chose dans la game loop :

var mainLoop = function(time){
   //main function, called each frame
   document.body.innerHTML = Math.random();
 
   // call the animation loop every 1/60th of second
   requestAnimationFrame(mainLoop);
};

Et voici l'exemple complet testable :  http://jsbin.com/kafehi/3/edit

Compter le nombre d'images par seconde

Voici une fonction "measureFPS" qui permet de compter le nombre d'images par seconde :

// vars for counting frames/s, used by the measureFPS function
    var frameCount = 0;
    var lastTime;
    var fpsContainer;
    var fps; 
 
    var measureFPS = function(newTime){
 
         // test for the very first invocation
         if(lastTime === undefined) {
           lastTime = newTime; 
           return;
         }
 
        //calculate the difference between last & current frame
        var diffTime = newTime - lastTime; 
 
        if (diffTime >= 1000) {
            fps = frameCount;    
            frameCount = 0;
            lastTime = newTime;
        }
 
        //and display it in an element we appended to the 
        // document in the start() function
       fpsContainer.innerHTML = 'FPS: ' + fps; 
       frameCount++;
    };

On appellera cette fonction depuis la boucle principale :

var mainLoop = function(time){
        //main function, called each frame 
        measureFPS(time);
 
        // call the animation loop every 1/60th of second
        requestAnimationFrame(mainLoop);
    };

Dans la fonction start() du moteur de jeu, nous créeons un simple élément <div> html pour afficher le nombre d'images par seconde :

var start = function(){
        // adds a div for displaying the fps value
        fpsContainer = document.createElement('div');
        document.body.appendChild(fpsContainer);
 
        requestAnimationFrame(mainLoop);
    };

Exemple testable en ligne :  http://jsbin.com/kafehi/5/edit