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.

00:12 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.

01:36 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.

01:55 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.

02:20 All of the assets are in a directory above this one called assets/. The __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.

02:34 In this case, it would be the path to utils.py.

02:39 The .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.

02:56 That new Path object is built using the assets/sprites/ subdirectory, the name of the sprite being loaded, and a ".png" extension.

03:07 Once line 6 is run, the filename variable now contains a single Path object pointing to the image asset file that is being loaded.

03:16 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.

03:57 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 .convert_alpha().

04:09 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.

04:30 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.

04:41 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.

05:02 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 (0, 0).

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.