CODEWITHSUNDEEP
htmlcanvassettimeoutsetintervalrequestanimationframe
Soliman
Soliman

Reputation: 1204

setTimeout or setInterval or requestAnimationFrame

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 ?

Upvotes: 20

Views: 19269

Answers (3)

Jani Hartikainen
Jani Hartikainen

Reputation: 43243

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.

Upvotes: 21

zloctb
zloctb

Reputation: 11177

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);
        }

Upvotes: 0

Shishir Arora
Shishir Arora

Reputation: 5923

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

Upvotes: 10

Related Questions