When I was writing articles related to a game loop I realized that they don’t describe what a frame is and why the frame rate is so important. To fix this, I decided to write this article and place it in the begining.

Frame.

Wikipedia gives quite short and understandable definitions for different things, therefore I use it with great pleasure. So, what does it tell about a frame?

In filmmaking, video production, animation, and related fields, a frame is one of the many still images which compose the complete moving picture. The term is derived from the fact that, from the beginning of modern filmmaking toward the end of the 20th century, and in many places still up to the present, the single images have been recorded on a strip of photographic film that quickly increased in length, historically; each image on such a strip looks rather like a framed picture when examined individually.

— Wikipedia.

In game development the frame can be considered as a result of the code invocation, the main aim of which is to prepare one single picture.

Frame Rate.

I will not invent a definition for a frame rate, therefore let’s look again what Wikipedia says.

Frame rate (expressed in frames per second or FPS) is the frequency (rate) at which consecutive images called frames appear on a display. The term applies equally to film and video cameras, computer graphics, and motion capture systems. Frame rate may also be called the frame frequency, and be expressed in hertz.

— Wikipedia.

I don’t have anything to add.

Why the Frame Rate is so Important?

When we look at a video display we think that an image on the screen is rendered at once as a solid picture. Of course, it is not true. In fact, video display renders a pixel at a time from left to right. When a row is finished the next one starts. Display does it so fast that we don’t see it and percept the action as if the whole picture is drawn (frame).

The interesting thing here is that somewhere something like two-dimensional array exists that holds the position and the color of each pixel. Do you think it is a good idea to change that array while it is iterated through to draw pixels on the screen? Probably, it is not. Best you can get is something like two pictures mixed up.

To reduce this issue, double buffer pattern is used. The main idea of the pattern is to provide two arrays that hold the data. One array is accessible for a ‘write’ operation (canvas buffer), another for a ‘read’ (display buffer). At some point, these buffers are swapped (canvas buffer becomes display buffer and vice versa). Pretty simple? Yes, it is. In our case, numerous advanced graphics algorithms set values in the canvas buffer to prepare a next frame while at the same time a video driver gets values from the display buffer (current frame) to send them to a video display. Can we call a count of swap operations per second a frame rate? According to the definition above, we can. But a more intresting thing is that this frame rate is equal to 1/60th, 2/60th, 3/60th etc… of a second and applied to our video display independently of our code. What I mean. Just imagine that we have a code that draws rectangle and fills it with red or green color in rotation. You can be sure, this code will be executed incredibly fast. Let’s take this time as 1 millisecond just for example. If we add the code in the loop, how often will the rectangles be drawn in our program? Simple calculation shows that 1 second divided to 1 millisecond is equal to 1000. 1000 times per second our code will set values to canvas buffer and only 1/60th, 2/60th, 3/60th etc… of a second the rectangle will be displayed on the screen. Who knows what color the rectangle will have? I don’t. All that I can tell is that about 16-17 frames produced by code were skiped.

Generally, there are few reasons why you need to synchronize your code frame rate with the rate of swap operations:

• To avoid flickers that can occur when our code writes a new frame to the canvas buffer and swap operation is performed.
• To avoid frame skips that, as it was described above, can occur when our code provides more frames than can be displayed.

How to make synchronization? Without graphic engines, you can try to make some delays in the code or use built-in functions of the platforms that your game is targeted at.