Join us and get access to hundreds of tutorials and a community of expert Pythonistas.

Unlock This Lesson

This lesson is for members only. Join us and get access to hundreds of tutorials and a community of expert Pythonistas.

Unlock This Lesson

Hint: You can adjust the default video playback speed in your account settings.
Hint: You can set the default subtitles language in your account settings.
Sorry! Looks like there’s an issue with video playback 🙁 This might be due to a temporary outage or because of a configuration issue with your browser. Please see our video player troubleshooting guide to resolve the issue.

Sprite Images

In this lesson, you’ll replace all those boring white rectangles with some cooler images that will make the game feel like an actual game.

Earlier, you learned that images on disk can be loaded into a Surface with some help from the image module. For this tutorial, we made a little jet for the player and some missiles for the enemies. You’re welcome to use this art. You can click the link below to download the art used in this tutorial:

Download

Sample Code (.zip)

422.6 KB

Before you use images to represent the player and enemy sprites, you need to make some changes to their constructors. The code below replaces the code used previously:

 7# Import pygame.locals for easier access to key coordinates
 8# Updated to conform to flake8 and black standards
 9from pygame.locals import (
10    RLEACCEL,
11    K_UP,
12    K_DOWN,
13    K_LEFT,
14    K_RIGHT,
15    K_ESCAPE,
16    KEYDOWN,
17    QUIT,
18)
19
20# Define constants for the screen width and height
21SCREEN_WIDTH = 800
22SCREEN_HEIGHT = 600
23
24# Define the Player object by extending pygame.sprite.Sprite
25# Instead of a surface, use an image for a better-looking sprite
26class Player(pygame.sprite.Sprite):
27    def __init__(self):
28        super(Player, self).__init__()
29        self.surf = pygame.image.load("images/jet.png").convert()
30        self.surf.set_colorkey((255, 255, 255), RLEACCEL)
31        self.rect = self.surf.get_rect()

Here’s what similar changes to the Enemy look like:

54# Define the enemy object by extending pygame.sprite.Sprite
55# Instead of a surface, use an image for a better-looking sprite
56class Enemy(pygame.sprite.Sprite):
57    def __init__(self):
58        super(Enemy, self).__init__()
59        self.surf = pygame.image.load("images/missile.png").convert()
60        self.surf.set_colorkey((255, 255, 255), RLEACCEL)
61        self.rect = self.surf.get_rect(
62            center=(
63                random.randint(SCREEN_WIDTH + 20, SCREEN_WIDTH + 100),
64                random.randint(0, SCREEN_HEIGHT),
65            )
66        )
67        self.speed = random.randint(5, 20)

For more information about loading images and RLEACCEL, check out the following resources from the pygame documentation:

00:00 In this lesson, you’re going to begin to work with sprite images. By the end of this lesson, your game will look like this, with graphics of a jet and missiles for the enemy.

00:14 So, how are you going to accomplish adding all those images to your sprites? There’s a PyGame module for loading these images and transferring them to a Surface.

00:23 It’s the image module. pygame.image.load(), and then you would put the filename in as an argument. This does a couple things. It loads the image from the disk and it’ll return a Surface.

00:39 There’s a method that you can run on this—.convert(). This optimizes the Surface, which makes future .blit() calls much faster.

00:48 You can also run .set_colorkey() as a method, and that’s going to be used to indicate the color PyGame will render as transparent from your image file. Let me have you practice this.

01:02 Before you start using the images to represent the player and the enemy sprites, you need to make some changes to the constructors. And one other thing you’ll need is to add something into your locals import.

01:18 This is another constant—it’s called RLEACCEL. It’s a constant that can be set as an optional parameter that helps pygame render more quickly, especially on non-accelerated displays.

01:30 I’ll include a link to provide more information about it from PyGame. So, make sure you add that on line 10,

01:37 and down here in the Player, this is where you’re going to start to make your big changes. Now, I’ve added a folder called images—a directory, if you will—and inside of it, I have all the images that you’re going to use, not only in this section—in the next lesson, also. Those image files are included with the code. Again, if you don’t have all of the code, just look below this video and you’ll see links to it.

02:04 So, the first one you’re going to work with is this jet.png file. Okay. Those are sitting in images/. So, to do this, you’re now going to do something different with this Surface. Instead of pygame, and just creating a generic Surface with a rectangle, you’re going to do pygame.image_load(), and in this case, "images/jet.png". Okay.

02:31 That would load the image into the Surface, and then one extra thing you can do is run the .convert() method on it, and what that will do is make it run a little more accelerated. Okay.

02:42 Next thing. For the Surface, instead of a .fill(), you’re actually going to do this thing where you set a color key, and it’s convenient that (255, 255, 255) is there, which is white. And what the color key will do, then—again—is look for what areas should be transparent.

03:01 The background of the image is white, and so in this case, that will remove that and make it transparent. And this is where you add the RLEACCEL constant as a second argument.

03:15 It’s still going to grab the rectangle from the Surface that you’re loading in there. Okay. That should have updated the player. I’m just going to test it out down here in the terminal.

03:31 Yeah, there we go. And you can see the jet airplane image until it collides. Okay, great. So now we need to change the enemies. That’s just a little bit lower down in the code. It’s going to look very similar.

03:47 So again, here, pygame.image.load(), and this time "images/missile.png", and again add .convert(). And then here, instead of .fill(),

04:02 .set_colorkey((255, 255, 255), RLEACCEL). Great. So you just updated these two lines on 59 and 60. Nice.

04:17 Let’s save one more time and make sure that that runs.

04:24 Yep. Here comes the missiles. Pretty cool! All right, looks much better. Now that you have images for the player and the enemies, how about adding some background images?

04:37 You’ll get to practice that in the next lesson.

helenyip2 on March 21, 2020

Is there a way to just download the images that needed for this tutorial rather than cloning that entire repo listed?

Become a Member to join the conversation.