Lesson 9 b

Warning - This site is moving to https://getthecodingbug.anvil.app

Topics covered

​ Graphical sprites

Where to find art

Storing your game images

Setting the colorkey

Graphical sprites

Coloured rectangles are fine - they’re a great way to start and make sure you have the basics of your game working, but sooner or later you’re going to want to use a cool spaceship image or character for your sprite. This leads us to the first issue: where do you get your game graphics.

Where to find art

When you need art for your game, you have 3 choices:

1. Draw it yourself

2. Find an artist to draw it for you

3. Use pre-existing art from the Internet

1 and 2 are fine if you or your friends are artistically inclined, but for most programmers (myself included), creating nice-looking art is not in our skill set. So that leaves the Internet, and it’s very important to remember that you shouldn’t use art that you do not have the right to use. While it’s easy enough to search and find a picture of Mario or your favourite Pokemon, that doesn’t mean that it’s OK for you to use it in your game, especially if you plan to put it online and let other people see it.

Fortunately, there’s a good solution: OpenGameArt.org. This website is loaded with tons of art, sound, music, and more - and it’s all generously licensed by the artists for you to use in your games.

I have used some images from artist "Master484", which he designed for a game but never published, and so donated them to OpenGameArt.

playerShip.png

You can also just click on the image above to download the player's ship image - see where to store it below.

Storing your game images

First we need a folder to hold our images etc. So create a new sub-folder, called “img” under "Invaders", and save the player image, as "playerShip.png" in the "img" sub-folder.

To use this image in our game, we need to tell Pygame to load the picture file, which means we need our program to know where the file is located. Depending on what kind of computer you are using, this can be different, and we want to be able to run our program on any computer, so we need to load a Python library called os, and then specify where our game is located, so add this line, below "import random", in "main.py" :

The special Python variable "__file__" refers to whatever folder your game code is saved in, and the command "os.path.dirname" figures out the path to that folder.

For example, on your computer, the path to your code might be:

C:\Users\chris\Documents\python\Invaders\main.py

Different operating systems use different ways of describing where things are located on the computer. By using the "os.path" command, we can let the computer figure out what the right path is (whether to use “/” or “\” for example.)

Now, we can specify our “img” folder, add these lines below "game_folder = os.path.dirname(__file__)":

We’ve loaded our image by using "pygame.image.load()" and we’ve made sure to use "convert()", which will speed up Pygame’s drawing by converting the image into a format that will be faster to draw on the screen.

We also need to pass the image to the Player class, when it is instantiated:

In "main.py", change: player = Player() to:

Now we’re ready to replace the plain green square in our sprite with our fancy player image:

player_img = pygame.image.load(os.path.join(img_folder, 'playerShip.png')).convert()

In "player.py", make the changes in the lines shown in green, below:

from common import *

class Player(pygame.sprite.Sprite):

def __init__(self, player_img):

pygame.sprite.Sprite.__init__(self)

self.image = player_img

self.rect = self.image.get_rect()

self.rect.center = (WIDTH / 2, HEIGHT - 40)

Notice we’ve also deleted the "self.image.fill(GREEN)" statement - we don’t need it to be filled with a solid colour anymore.

"get_rect()" will still work just fine, because it looks at whatever self.image is to figure out what the bounding rectangle should be.

Now, save your changes, then run the program, you should see a nice little player ship moving across the screen.

Setting the colorkey

But we have a problem. We have an image file on the computer, that file is always a rectangular grid of pixels. No matter what shape you’ve drawn, there’s still a border of pixels filling the “background” of your image. What we need to do is tell Pygame to ignore the pixels in the image that we don’t care about. In this image, those pixels happen to be white, so we can add the following line "self.image.set_colorkey(WHITE)", after "self.image = player_img".

Your Player class show now look like this:

The "set_colorkey()" just tells Pygame that when we draw the image we want to ignore any pixels of the specified colour.

Now, if you run the program, the ship image looks much better.

Now it’s time to start making a real game. The next sections show the process of creating a full game from start to finish. They get more complex as we go, so it’s recommended that you follow them in order.

Click this link to move on to the next section: Lesson 9 c