In this blog post we are going to investigate how to animate a sprite when creating a video game using Python and the Pygame library. We will aim to create a frame-based animation using a rnage of graphics for our main sprite: a flappy bird.
Here is the animation we will recreate using Pygame
This animation contains 12 frames based on the following pictures:
Python Implementation
Below is the code to implement our sprite animation. The code consists of two files:
- bird.py contains the Bird class which will be used to load the pictures used in our animation
- main.py is the main frame based loop for the game.
For this code to work, you will also need to have a subfodler called images and save the above pictures of the flying bird.
bird.pymain.py
import pygame WHITE = (255,255,255) class Bird(pygame.sprite.Sprite): #This class represents a bird. It derives from the "Sprite" class in Pygame. def __init__(self, x, y): # Call the parent class (Sprite) constructor super().__init__() # Load all the images for our animation and store these in a list self.images = [] self.images.append(pygame.image.load('images/flappy-bird-1.png')) self.images.append(pygame.image.load('images/flappy-bird-2.png')) self.images.append(pygame.image.load('images/flappy-bird-3.png')) self.images.append(pygame.image.load('images/flappy-bird-4.png')) self.images.append(pygame.image.load('images/flappy-bird-5.png')) self.images.append(pygame.image.load('images/flappy-bird-6.png')) self.images.append(pygame.image.load('images/flappy-bird-7.png')) self.images.append(pygame.image.load('images/flappy-bird-6.png')) self.images.append(pygame.image.load('images/flappy-bird-5.png')) self.images.append(pygame.image.load('images/flappy-bird-4.png')) self.images.append(pygame.image.load('images/flappy-bird-3.png')) self.images.append(pygame.image.load('images/flappy-bird-2.png')) # Use the first image for our sprite self.index = 0 self.image = self.images[self.index] # Fetch the rectangle object that has the dimensions of the image. self.rect = self.image.get_rect() # Position the sprite on the screen at the given coordinates self.rect.x = x self.rect.y = y def update(self): # Increment the inex by 1 everytimne the update method is called self.index += 1 # Check if the index is larger than the total number of images if self.index >= len(self.images): # Reset the index to 0 self.index = 0 # Update the image that will be displayed self.image = self.images[self.index]
# Import the pygame library and initialise the game engine import pygame from bird import Bird pygame.init() # Define some colors BLUE = (50,150,235) # Open a new window size = (700, 500) screen = pygame.display.set_mode(size) pygame.display.set_caption("flappyBird") #Instatiate a Bird object and set its initial position at (x=220, y=120) flappyBird = Bird(220,120) #This will be a list that will contain all the sprites we intend to use in our game all_sprites_list = pygame.sprite.Group() # Add our flappyBird object to the list of sprites all_sprites_list.add(flappyBird) # The loop will carry on until the user exits the game (e.g. clicks the close button). carryOn = True # The clock will be used to control how fast the screen updates clock = pygame.time.Clock() # -------- Main Program Loop ----------- while carryOn: # --- Main event loop for event in pygame.event.get(): # User did something if event.type == pygame.QUIT: # If user clicked close carryOn = False # Flag that we are done so we exit this loop elif event.type==pygame.KEYDOWN: if event.key==pygame.K_x: #Pressing the x Key will quit the game carryOn=False # --- Game logic should go here all_sprites_list.update() # --- Drawing code should go here # First, clear the screen to blue (sky). screen.fill(BLUE) #Now let's draw all the sprites in one go. (For now we only have 1 sprite!) all_sprites_list.draw(screen) # --- Go ahead and update the screen with what we've drawn. pygame.display.flip() # --- Limit to 60 frames per second clock.tick(60) #Once we have exited the main program loop we can stop the game engine: pygame.quit()