Menu
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 ?
906
Another reason requestAnimationFrame is so useful is the fact that it gives you a time variable which you can use to calculate the amount of time between frames. This is not something that setInterval will do and since setInterval is not 100% accurate it is very possible your animation will get messed up over time.
requestAnimationFrame() is much more efficient than setTimeout() or setInterval() , and the result is smoother and more accurate (just check the provided demo and the consumed CPU).
setTimeout allows us to run a function once after the interval of time. setInterval allows us to run a function repeatedly, starting after the interval of time, then repeating continuously at that interval.
To optimize system and browser resources, it is recommended to use requestAnimationFrame , which requests the browser to execute the code during the next repaint cycle. This allows the system to optimize resources and frame-rate to reduce unnecessary reflow/repaint calls.
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.
127
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
