The tricks to a good HTML5 game - Part 1 - Animation and game loop

    Making a game in HTML 5 without using a game engine is perhaps not the easiest way to do things, but it definitely makes it much more of a learning experience.This series contains few of the things that I had to learn the hard way in the process of making my Space Zombies game .

This post is about getting fluid animations and proper game loop execution.

Always use requestAnimationFrame for animating 

       In a game, one of the most important things are the visuals and the animations , and requestAnimationFrame makes it not only easy to implement and manage but keeps your HTML5 game efficient.

Earlier method of animating would be to use setInterval for redrawing animations after x milliseconds , but the display would refresh at its own set rate, typically 60Hz , leading to unnecessary redrawing, which the user would not even see, as shown in the above image.

With raf the browser will automatically try to ensure you have a refresh rate equivalent to the monitor refresh rate, typically you should get close to 60fps , but that depends on multiple factors.But it will certainly reduce if not eliminate the unnecessary redraws.What's most important is that this method of animating makes your animations battery and CPU friendly, while also giving you performance improvements. The usage is pretty straight forward too.

function render() {
requestAnimationFrame(render);
//your rendering code
}
render();

you can read more about raf and why it's better  here , and for a polyfill visit here.

Use requestAnimationFrame only for rendering

     One easy to make mistake while using raf is to put all your update code and your rendering code in the same function that you are using with requestAnimationFrame , while this seems like a nice idea for repeatedly running your game logic , it's a bad idea for multiple reasons ,

• Based on device resources, raf will have varying delays between subsequent calls to your function.Putting all your update logic here will mean that the game will run at unpredictable speeds,with speeds varying not just between devices, but even among different runs on the same device.For good user experience, you want there to be consistency in how fast your game runs.
• Putting all your update logic in a function that you expect to be called every ~20ms , will usually mean that, you'll have a longer execution time for the function itself, leading to frame drops and choppy graphics.
• Using raf only for rendering, will allow you to update the game at an almost constant rate using JavaScript timing functions, which you can control.
  Basically you get better control over your update speed.

See the above demo here ,in the demo the raf is running at a maximum of 60 updates per second , but the setInterval can be controlled to run at even 100 updates per second, leading to faster updates,the difference is much more easily seen on a mobile device,where sometimes the raf update rate goes well below 40 updates per second.

So we've seen how to get a consistent  game loop and  an efficient redraw method.In the next part , we will deal with improving the frame rate of your game. In the mean time, i would appreciate it , if you tried and rated my game Space Zombies on google play

Looking for a way to monetize your android or Ios app ? I've been using Startapp , and its fairly easy to integrate and they have bonus cash to earn based on your current earning , they support multiple platforms , from HTML5 to JAVA application to Unity  , give them a shot !