HTML and CSS Reference
In-Depth Information
Chapter 8
Applying Old-School Video Game
Techniques in Modern Web Games
Mario Andrés Pagella, founder, Warsteed Studios
In computer graphics, frames are processed and painted on the screen by what some people refer to as the “animation,”
“main,” “game,” or “update” loop. Personally, I prefer to call it “main,” “game,” or “update loop” for the sole reason
that it's standard practice in the industry to use this routine to perform other tasks besides painting pixels on
the screen.
A good example of this is the accuracy of physics calculations. If your update loop is called 60 times per second,
it means that the variables in your physics formulas will get updated every 16.67 ms (1000 ms/60 FPS). If you work
with small objects and rapid movements, the movements and calculations won't be as accurate and realistic than if
you work with a higher framerate.
The reason why I mention this is because, while the framerate may be higher than the refresh rate of the monitor
that is displaying the images, the three variables are not dependent on each other. To put it simply, the number
of times your update loop is being called per second is completely independent from the number of times you're
refreshing the pixels on the screen, which is also independent from the refresh rate of the monitor itself. For example,
the update loop could be called 1000 times per second, but the images could only be refreshed (on purpose, by the
program) every 33.3 ms (30 FPS) and at a maximum of 16.67 ms (60 FPS), which is dictated by the refresh rate of the
monitor. In the same way, a game could be running at 3 FPS but the monitor would still refresh images at 60 Hz.
The only caveat is that the framerate that you're using to display images on the screen can never be faster than the
number of times the update loop is called per second (unless you keep them separate, which in my experience is
never a good idea, at least with web games).
Nevertheless, games such as Bungie's Halo were designed to run at 30 FPS, while others such as Epic's Unreal
Tournament or id Software's Quake III Arena worked better if they ran at more than 60 FPS (for example, in Q3A,
a higher framerate made bullets and model movements more accurate). As with most things, it always depends on
what you're trying to achieve and how you've developed the software.
However, we haven't always depended on calculating time differences in order to perform animations. In the
early days of game development, developers tied their update loops to the clock speed of CPUs, which is why later on
some computers had a “Turbo” button that could be pressed to reduce the clock speed and make applications such as
games run at the speed for which they were designed.
The reason why computer graphics developers and game developers are so obsessed with the framerate is
because it dictates two extremely important pieces of information. The first one is the processing budget that you
need to work within, and the other is the accuracy and precision of certain calculations.
