The game would be very boring without animations. Animated images are the result of drawing different images one after the other on the screen. Suppose the window below is 6 pixels wide and 1 pixel high. Of these six pixels, one pixel is black and the rest are white. The black pixel is at position (0,4).

If the black pixel is moved back one house, i.e. at position (0,3), it appears that the black pixel has moved to the left:

If that black pixel moves one house to the left again, i.e. to position (0,3), it still looks like the black pixel is moving to the left:

It looks like the black pixel is moving, but it's just an illusion. For example, if we display the following three images in quick succession, it looks like the Hive is approaching Bitcoin, while the following images are different:

The user thinks that the Hive is moving towards Bitcoin, but to the computer, the image of the Hive and Bitcoin are just a bunch of pixels. So to animate the game, the program has to draw an image in the window, then wait a fraction of a second, and then draw another image. Below is a simple animation that shows us how to make a very simple animation. Enter the following code in your editor and then save it as animation.py. We need the hive.png file to run the program. This file should be in the same folder as the animation.py file (so don't forget to put the image and the Python file in the same folder).

import pygame, sys
from pygame.locals import *

pygame.init()

FPS = 30 # frames per second setting
fpsClock = pygame.time.Clock()

# set up the window
DISPLAYSURF = pygame.display.set_mode((400, 300), 0, 32)
pygame.display.set_caption('Animation')

WHITE = (255, 255, 255)
hiveImg = pygame.image.load('hive.png')
hivex = 10
hivey = 10
direction = 'right'

while True: # the main game loop
    DISPLAYSURF.fill(WHITE)

    if direction == 'right':
        hivex += 5
        if hivex == 305:
            direction = 'down'
    elif direction == 'down':
        hivey += 5
        if hivey == 205:
            direction = 'left'
    elif direction == 'left':
        hivex -= 5
        if hivex == 10:
            direction = 'up'
    elif direction == 'up':
        hivey -= 5
        if hivey == 10:
            direction = 'right'

    DISPLAYSURF.blit(hiveImg, (hivex, hivey))

    for event in pygame.event.get():
        if event.type == QUIT:
            pygame.quit()
            sys.exit()

    pygame.display.update()
    fpsClock.tick(FPS)

By running the program, you will see that the Hive moves.

frames per second and pygame.time.Clock objects

Frame rate or refresh rate is the number of pictures that the program draws per second and it is called FPS. FPS is measured in units of seconds. (In monitors, the common name FPS is Hertz. Many monitors have a frame rate of 60 Hz, or 60 frames per second.) A low frame rate in video games can make the game look dull or exciting. If the app has too much code to run, the FPS will drop. The pygame.time.Clock module ensures that the program runs at the maximum FPS we want. Using small delays in each iteration of the game loop ensures that our game doesn't run too fast. If we didn't have these lags, the game would run at computer speed, which could be much faster. Calling the tick() method assures us that the game is running at the speed we want.

fpsClock = pygame.time.Clock()

The tick method must be called at the end of the game loop, after pygame.display.update. The amount of delay or waiting to execute the next round of the loop is calculated based on how much time has passed since the previous call of the tick function. You should know that the tick method should be called once, at the end of the main loop. The next point is that the tick method should be called after pygame.display.update.

pygame.display.update()
fpsClock.tick(FPS)

By changing the FPS constant, you will see that the program runs at different speeds. If we reduce it, it slows down.

Draw images with pygame.image.load() and blit()

If we want to draw simple shapes like circles, squares, etc. in the window, pygame has good drawing functions for this, but many games have images (also called sprites). Pygame is able to load images on Surface objects. pygame supports PNG, JPG, GIF and BMP format files. The image of the hive is in a file called hive.png. To use this image, we pass the string 'hive.png' as a parameter to the pygame.image.load function. Calling the pygame.image.load function returns a Surface object with the image drawn on it. We use the blit method to draw the image. If you get an error like "pygame.error: Couldn't open hive.png" when running the program, make sure the hive.png file is in the same folder as the animation.py file.

DISPLAYSURF.blit(hiveImg, (hivex, hivey))

We use the blit method to draw the hiveImg image in the window. blit takes two parameters. The first parameter is for the hive image or any other image. The second parameter is a double tuple of two integers for the X and Y values. X and Y represent the upper left corner where the image should be placed. If hivex and hivey are set to 100 and 200, and the width and height of the image are 85x85, calling blit will draw the image on DISPLAYSURF so that the top left corner of the hiveImg is at (100,200) and the bottom right corner of the image is be in (185,285). The rest of the game loop is changing the hivex, hivey and direction variables so that the hive can move around the window.