Rendering loop

The first notion that I had to learn when I developed my first small game was the "game loop". This particular notion can be a bit confusing in the beginning even if you come from a web development background.

In the browser, most games used to rely on setTimeout(), but using setTimeout with a 10ms period results in every third callback not being painted. There was not reliable way of syncing the game's rendering with the monitor refresh rate (16.6 ms for 60fps).

Browsers introduced requestAnimationFrame() to fix this issue. So the rendering problem was fixed! No more choppy animations! There is still a catch for game developers how are making their own game engines.

Normally a monitor nowadays has 60hz which means 60fps which means a frame can be drawn every 16.6 milliseconds. But what about if I have a 240hz monitor like Dell Alienware AW2518HF? Do my animations really need to render 240 times per second?

I made a small video to demonstrate the difference in browsers (just wait for it!):

No you don't have to render 240 times per second if your game doesn't require it.

You should always limit or offer the possibility of limiting of both the rendering and logic of your game.

Here is the POC: https://jsbin.com/cuwupaz/edit?html,js,output

What values do you see? Move the window to another monitor, does it stay the same?

Go to lines 33 and 38 and uncomment them to limit your fps.

Takeaways:

* do not render excessively if your game doesn't needed it

* decouple your game update logic from the rendering

* do not hook the update logic to the monitor refresh rate!