Creating a Game in Pygame: Draw Images in Pygame

That’s my checklist for getting started in making a game. After creating the game window, setting up my character, getting my character to move, …hmmmm… ah, yes! Loading images and a background. First, we’ll need to think about what kind of game we are going to create. Then, we will have to either make our own 2D sprites for the game, or download free ones. Finally, let’s write a little bit of code to add our sprite and background into Pygame.

Some of my favorite games growing up where top-down arcade shooters and side-scroller shooters, such as R-Type. I spent hours playing Super R-Type on the SNES and R-Type Final on the Playstation. A few years have passed, but those style of games left a lasting impression on me.

If you are interested in using the same images as this tutorial, just right-click the images and save them to your computer.

Today, we are going to learn how to load and draw images in Pygame.

Hours and hours spent side-scroll shooting. Memories of R-Type Final.

I talked before about how to add rectangle objects to our game window. Creating these blank Surface objects is as easy as:

square = pygame.Surface((50, 50))
DISPLAYSURF.blit(square, (100, 100))

1 2	square = pygame.Surface((50, 50)) DISPLAYSURF.blit(square, (100, 100))

This will create a black square of size 50 x 50 pixels and display it at location (100, 100) in the window.

Load Background Image

But, we want to load and display an image file. Suppose we wanted to load this starry image into our window and use it as our background for our game.

Space, the final frontier. These are the voyages of the starship Enterprise.

To load an image from file we need to use pygame.image.load.

background = pygame.image.load('images/stars_bg.jpeg').convert()

1	background = pygame.image.load('images/stars_bg.jpeg').convert()

The background image that we want to use is located not in the current directory, but in the images/ folder. Be careful when loading images and make sure the path to the image matches the image’s actual location. The full code to load our background image is below. Open a new file, and call it space_shooter.py.

# import necessary packages
import pygame, sys
from pygame import *

pygame.init() # initialize pygame

WINDOWWIDTH = 480
WINDOWHEIGHT = 600

# colors
BLACK = (0,0,0)

# create display window
DISPLAYSURF = pygame.display.set_mode((WINDOWWIDTH, WINDOWHEIGHT))
pygame.display.set_caption('The Lonely Shooter')

def main(): 
    '''main loop'''

    #### load all game images ####
    # load background image
    background = pygame.image.load('images/stars_bg.jpeg').convert()
    background_rect = background.get_rect()

    while True: # main game loop
        for event in pygame.event.get():
            if event.type == QUIT:
                pygame.quit()
                sys.exit()

        # draw/render 
        DISPLAYSURF.fill(BLACK)
        # draw background image to game
        DISPLAYSURF.blit(background, background_rect)

        # done after drawing everything to the screen
        pygame.display.flip()

if __name__ == "__main__":
    main()

# import necessary packages

import pygame, sys

from pygame import *

pygame.init() # initialize pygame

WINDOWWIDTH = 480

WINDOWHEIGHT = 600

# colors

BLACK = (0,0,0)

# create display window

DISPLAYSURF = pygame.display.set_mode((WINDOWWIDTH, WINDOWHEIGHT))

pygame.display.set_caption('The Lonely Shooter')

def main():

'''main loop'''

#### load all game images ####

# load background image

background = pygame.image.load('images/stars_bg.jpeg').convert()

background_rect = background.get_rect()

while True: # main game loop

for event in pygame.event.get():

if event.type == QUIT:

pygame.quit()

sys.exit()

# draw/render

DISPLAYSURF.fill(BLACK)

# draw background image to game

DISPLAYSURF.blit(background, background_rect)

# done after drawing everything to the screen

pygame.display.flip()

if __name__ == "__main__":

main()

Lines 2 – 15 import necessary packages, initialize Pygame, creates window size variables, and create the display window. The new stuff happens in lines 22 and 23. We first locate our image and then assign it to the background variable. Next, we create a rectangle object to cover the surface of the area of the image object. We will use this rectangle as a way to locate our image in the Pygame window and perform actions on our object, such as making our spaceship move. In line 22,convert( ) is used to change the pygame.Surface of the object to the same pixel format as the one for the final display, the same one we created from DISPLAYSURF in line 14.

The other important thing to note is blit in line 34. blit allows us to draw one image onto another. In particular, the Surface object returned in line 14. Anything that is drawn on the display Surface object will be displayed on the window when the pygame.display.flip() function is called in line 37.

This creates a window that is smaller than the size of the image that we are using. But I like the results, so I don’t want to scale the image and cause any distortion.

Load Spaceship Image

Next, let’s load the sprite for our spaceship. Sprite images were downloaded from kisspng.com.

Loading the image for our spaceship is fairly simple.

    #### load all game images #### 
    # load spaceship image
    player_img = pygame.image.load('images/spaceship.png').convert()
    player_img = pygame.transform.scale(player_img, (75, 75))
    player_img.set_colorkey(BLACK)
    player_rect = player_img.get_rect(center=(WINDOWWIDTH / 2, WINDOWHEIGHT - 80))

#### load all game images ####

# load spaceship image

player_img = pygame.image.load('images/spaceship.png').convert()

player_img = pygame.transform.scale(player_img, (75, 75))

player_img.set_colorkey(BLACK)

player_rect = player_img.get_rect(center=(WINDOWWIDTH / 2, WINDOWHEIGHT - 80))

First, we locate the image and use pygame.image.load to load the image. Then, we resize the image to better fit the dimensions of the window in line 4. set_colorkey(BLACK) sets the transparent color of the image to match the color of the display Surface. This will make sure the image does not show up in the window surrounded by a black box. Line 6 gets the rectangular area of the Surface and places the center our spaceship towards the lower-middle part of the window.

Then blit the image to the display Surface.

DISPLAYSURF.blit(player_img, player_rect)

1	DISPLAYSURF.blit(player_img, player_rect)

I felt it looked a little boring, so I added a planet to the background using the same techniques described above.

Summary

Today, we discussed loading images into our game using pygame.image.load and blit. Next time, we will figure out how to make our spaceship move around the window using techniques from the last tutorial.