4. Drawing graphics

To create graphics for our games we will use the Pygame Zero library. You will find the documentation on the website useful!

The smallest square that can be displayed on a monitor is called a pixel. This diagram shows a close-up view of a window that is 40 pixels wide and 40 pixels high. At normal size you will not see the grid lines.

Model View Controller

Fig. 4.1 Model View Controller

We can refer to any pixel by giving two co-ordinates, (x,y) Make sure you understand co-ordinates before moving on because everything we do in Pygame Zero will use it. (In maths this called a ‘Cartesian coordinate system’).

4.1. Lines and circles

If are using the Mu editor, Pygame Zero is built-in, but you must remember to click ‘Mode’ and select ‘Pygame Zero’ before running your program!

If you are using a different editor, instructions are online.

Program 4.1 Lines and circles
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
WIDTH = 500  # What are these units? What if we change them?
HEIGHT = 500  # What if we delete this line?


def draw():
    screen.clear()
    screen.draw.circle((250, 250), 50, "white")
    screen.draw.filled_circle((250, 100), 50, "red")
    screen.draw.line((150, 20), (150, 450), "purple")
    screen.draw.line((150, 20), (350, 20), "purple")

Exercise

Finish drawing this picture

Exercise

Draw your own picture.

4.2. Moving rectangles

To make things move we need to add the special update() function. We don’t need to write our own loop because Pygame Zero calls this function for us in its own loop, over and over, many times per second.

Program 4.2 Moving rectangles
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
WIDTH = 500
HEIGHT = 500

box = Rect((20, 20), (50, 50))

def draw():
    screen.clear()
    screen.draw.filled_rect(box, "red")


def update():
    box.x = box.x + 2
    if box.x > WIDTH:
        box.x = 0

Exercise

Make the box move faster.

Exercise

Make the box move in different directions.

Exercise

Make two boxes with different colours.

4.3. Actor sprites

Actor sprites are very similar to boxes! Click Images to see the folder of image files available. alien.png should already be there, but for other images you must add the files yourself.

You could use Microsoft Paint which comes with Windows but I recommend you download and install Krita.

Program 4.3 Actor sprites
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
WIDTH = 500
HEIGHT = 500

alien = Actor('alien')
alien.x = 0
alien.y = 50


def draw():
    screen.clear()
    alien.draw()


def update():
    alien.x += 2
    if alien.x > WIDTH:
        alien.x = 0

Exercise

Draw or download your own image to use instead of alien.

4.4. Background image

We are going to add a background image to Program 4.3

Click Images to see the folder of image files available.

You must create or download a picture to use a background. Save it as background.png in the directory mu_code/images. It should be the same size as the window, 500×500 pixels and it must be in .png format.

Program 4.4 Background
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
WIDTH = 500
HEIGHT = 500

alien = Actor('alien')
alien.x = 0
alien.y = 50

background = Actor('background')

def draw():
    screen.clear()
    background.draw()
    alien.draw()


def update():
    alien.x += 2
    if alien.x > WIDTH:
        alien.x = 0

Exercise

Create a picture to use a background. Save it as background.png. Run the program.

4.5. Keyboard input

The alien moves when you press the cursor keys.

Program 4.5 Keyboard input
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
alien = Actor('alien')
alien.pos = (0, 50)

def draw():
    screen.clear()
    alien.draw()

def update():
    if keyboard.right:
        alien.x = alien.x + 2
    elif keyboard.left:
        alien.x = alien.x - 2

Exercise

Make the alien move up and down as well as left and right.

Exercise

Use the more concise += operator to change the alien.x value (see Program 2.18).

Exercise

Use the or operator to allow WASD keys to move the alien in addition to the cursor keys (see Program 2.8).