setTimeout or setInterval or requestAnimationFrame

Question

For HTML5 games,with canvas animation for mobile devices.

I'm facing some performance issues which differ the speed between each device and the others.

requestAnimationFrame speed the animation of the game according to the device speed.
setInterval shocked me that there are a delay from a device to another.
setTimeout is also slow the drawing on canvas.

Who had a previous experience with Mobile HTML5 games can guide me throw the best way of three of them (or other techniques if available) for developing animation on canvas be stable on different mobile devices ?

Heptameter

Answer 1

Always use requestAnimationFrame when possible, since that's what it's meant for. It's best to use a shim for support when it isn't, so you don't need to deal with the specific details.

In order for animation or game logic to perform at the same speed despite the actual method used, you should use time based animation and time based calculations for physics or such.

Bronco

The old versions on android phone browsers doesn't support requestAnimationFrame (HTC) .... I try this site ie.microsoft.com/testdrive/Graphics/RequestAnimationFrame/… on the HTC device and it is NOT supported !! – Heptameter

@Solieman Paul Irish has a great blog post with a requestAnimationFrame shim: paulirish.com/2011/requestanimationframe-for-smart-animating – Quadruped

@Solieman the code I linked (the shim) takes care of using the correct method. If requestAnimationFrame isn't supported, it will automatically use one of the other methods. Jasper's link has more info on it. – Bronco

+1. This thread is also relevant. #14508585 – Assemblyman

Answer 2

window.requestAnimFrame = function(){
    return (
        window.requestAnimationFrame       || 
        window.webkitRequestAnimationFrame || 
        window.mozRequestAnimationFrame    || 
        window.oRequestAnimationFrame      || 
        window.msRequestAnimationFrame     || 
        function(/* function */ draw1){
            window.setTimeout(draw1, 1000 / 60);
        }
    );
}();
   window.requestAnimFrame(draw);
})();

use this function for all cases

Iveyivie

what does the 1000 / 60 do? why not just a simple resultant / evaluated figure ? and apart from this is a copied solution from GitHub without giving credits to the original poster – Whiskey

60 frames per second – Robrobaina

Answer 3

OPTIMIZATION requestAnimationFrame() since its introduction was very CPU friendly, causing animations to stop if the current window or tab is not visible.

https://flaviocopes.com/requestanimationframe/

 var count = 0;
    const IDS = requestAnimationFrame(repeatOften);

        function repeatOften() {
            count++;
            if(count > 4 ){
                // cancelAnimationFrame (IDS);
                 console.warn('finish');
                 return;
            }
            console.log('init' + count);
            // Do whatever
            requestAnimationFrame(repeatOften);
        }

Obedient