Using Sprites in Your Game
00:00 In the previous lesson, I showed you the file structure you’d want to use to keep your game code organized. In this lesson, I’ll introduce you to the concept of assets and how to import graphics.
When rendering graphics to the screen, you have two choices: drawing primitives, like the circles you drew in
blue.py, or using image files that you’ve built in a graphics program. Images in your game—whether loaded from a file or drawn with primitives to a buffer—are called sprites.
00:30 These sprites will be what you draw on the screen to represent the good guys, the bad guys, and the trees in your game. In our examples, the image files will only contain a single image each, but often in professional games, these files contain multiple frames of animation used to render a sprite.
00:47 For example, to show a character walking you’ll need several different images, each with different positions for their legs. All the frames for this animation might be stored in a single file.
00:59 Similar to the graphics choices, when playing sound you can use sound primitives that make “Beep, beep!” noises or load sound files with music or sound effects.
01:09 External graphic and sound resources are collectively known as assets. Part of writing a game is generating these assets and then loading and managing them inside of your code.
01:22 Pygame provides functions for loading and manipulating assets in your game. That being said, oftentimes there are several things that have to be done to the same asset, so I’ll show you some utility functions that will make your life easier.
In addition to the existing file structure you have, you’re going to want to create an asset subdirectory where you can store some sprites. You’ll also want to create a new
utils.py file for your utility code.
01:49 Let me show you how to load an image and get rid of that boring blue background.
Here, I’m in the newly created
utils.py file. This file will contain helper methods for your code. The first helper method to build is a convenience method that deals with the loading of sprites. The core part of this function uses Pygame’s
image module to load a file. First off, on line 6, I’m using the
pathlib Python module to specify the file path.
All of the assets are in a directory above this one called
__file__ value here that is the parameter to the first
Path object is a Python constant that resolves to the name of the source file.
In this case, it would be the path to
.parent property on that same
Path object resolves into the directory that
utils.py is found in. The second part of this line after the slash joins the directory from the left side of the slash with a new
Path object is built using the
assets/sprites/ subdirectory, the name of the sprite being loaded, and a
Once line 6 is run, the
filename variable now contains a single
Path object pointing to the image asset file that is being loaded.
Line 7 calls the
.resolve() method on that
Path object, getting a fully qualified path for the file, and then this is passed to Pygame’s
image.load() method, which returns the loaded sprite.
03:30 Some images have an alpha channel. This is a way of dealing with transparency. All images are rectangles. To make it look like your ship isn’t a rectangle, there will need to be transparent portions of the image—everything around the ship. For a background image, you don’t need this, but for your game pieces, you will. Line 9 checks whether or not you want to use this alpha transparency mechanism.
The loaded image needs to be converted into an internal format for Pygame. On line 10, you’re in alpha transparency mode, so you need to call
For images that don’t require the transparency, like a background image, the faster plain
.convert() method can be used instead. Both line 10 and line 12 return the loaded image back to the caller in a format that Pygame can use.
With the utility in place, you can now use it inside of
SpaceRocks. Let’s get rid of that pesky blue background. There’s nothing terribly complicated here.
Line 12 uses the
load_sprite() utility to load the
"space" asset and store it in
self.background. As this is a background image, there’s no need to use the alpha channel, hence the second parameter here is
False. With this sprite stored inside of
self.background, now all you have to do is display it.
Let me go down to the bottom of the code. Now, instead of filling the screen with blue, I’m going to call the
.blit() method instead. Blit is a gaming term, meaning “Transfer a bunch of bytes from one buffer to another.” In this case, the background image loaded in the
.__init__() method is going to be blitted to the
screen surface at position
05:25 The rest of the code is the same as before. Let’s go see the result.
05:34 Okay, still not the most exciting game, but this image of the final frontier beats plain old blue any day of the week. That’s your first sprite. Next up, it’s time to take a turn on the catwalk. What? Oh, my producers tell me they aren’t that kind of models. I’m sure it’ll be fine.
Become a Member to join the conversation.