A game loop

Classroom resources

Load these into Waypoints Prepare: choose Load URL and paste the copied address, or download the file and import it. In Prepare, the worksheet's Teacher edition shows the answers; the student copy hides them.

• Slides Download Copy address for Prepare Present from the browser, or export to PowerPoint or PDF.
• Worksheet Download Copy address for Prepare Print the student copy; the Teacher edition has the answers.

Students will be able to

• I can make a game in microStudio and run it.
• I can say what init, update and draw each do, and when they run.
• I can make something move by changing a value in update and drawing it in draw.

Timing

Predict and Run, with making the microStudio project 15 min · Investigate 10 min · Modify 15 min · Make 15 min

Before class

Read the unit primer first. Students write their games on microstudio.dev, not on our site: before the lesson, open it on a student device at school, make a project, choose Python and press Run (the site's games here are only for playing). Decide on accounts: a guest can start at once with no email, but a guest's projects are deleted after about 15 days unless an account is made (a nickname and password; email is optional). For a short unit guests are fine if students keep a copy of their code; for longer work, make accounts with nicknames that are not real names. The lesson's Python is ordinary Python run by Brython: global is needed in update() for any variable it changes, exactly as in the turtle course's events lesson. microStudio's screen is 200 tall with (0, 0) in the middle and y up; its width depends on the window.

Running the lesson

1. Predict: act it out: one student says update every time you clap, another moves one step.
2. Run: get every project made and running before Investigate; pair anyone stuck on the sign-in.
3. Investigate: the bug is the forgotten global from the turtle events lesson. Ask who remembers it.
4. Modify: bouncing needs a second variable for the direction; let students try before the second hint.
5. Make: walk round and ask each pair which variable moves which thing.

The hard part (on purpose)

Getting into microStudio and the Python setting in the first 15 minutes, then the forgotten global. Have the project made before the lesson if time is short.

When students get stuck

Answers to the checks

1. Predict: What happens when the game runs?
   The dot slides right. update() runs 60 times a second, so x goes up by 1 each time: 60 steps to the right every second. Nothing brings it back, so it slides off the edge.
2. When does each run?: Match each function with when the engine runs it.
   init() → B. once, when the game starts; update() → A. 60 times a second, to change things; draw() → C. after each update, to show things
3. How far?: The game has run for 2 seconds. About how far has the dot moved?
   120 steps
   update() runs 60 times a second and adds 1 to x each time: 2 × 60 = 120 steps (it wraps back to -100 after 200).
4. Spot the bug: This stops with an error: cannot access local variable 'x'. Click the line where it goes wrong.
   line 6
   x += 1 changes x, but update() has no global x line, so Python looks for an x made inside update() and finds none. Add global x as the first line of update().
5. Where this leads: In the turtle course, events waited for a click or a key. What does a game loop do instead?
   It runs update and draw again and again, whether or not anything happens
   A game loop never waits: 60 times a second it updates and redraws, which is why things can move on their own. Clicks and keys are checked inside update().

Solutions

One possible solution for each task. Other correct programs are fine.

Modify › Up, not across

def init():
    global y
    y = -100

def update():
    global y
    y += 1
    if y > 100:
        y = -100

def draw():
    screen.clear("rgb(10,10,40)")
    screen.fillRound(0, y, 10, 10, "rgb(255,210,0)")
    screen.drawText("y = " + str(y), 0, 80, 10, "#FFF")

Modify › Bounce

def init():
    global x, dx
    x = 0
    dx = 1

def update():
    global x, dx
    x += dx
    if x > 100 or x < -100:
        dx = -dx

def draw():
    screen.clear("rgb(10,10,40)")
    screen.fillRound(x, 0, 10, 10, "rgb(255,210,0)")

something that moves

def init():
    global t
    t = 0

def update():
    global t
    t += 1

def draw():
    screen.clear("rgb(10,10,40)")
    screen.fillRound(t % 200 - 100, 40, 12, 12, "rgb(255,210,0)")
    screen.fillRound(100 - t % 200, -40, 12, 12, "rgb(255,100,120)")
    screen.drawText("Frames: " + str(t), 0, 80, 10, "#FFF")

Stretch and support

Stretch: Make the dot change colour as it moves, or grow and shrink with a size variable.

Support: Give the bounce as a sentence first ("a speed that turns round at the edges"), then the dx = -dx line.

Exit ticket

Why does draw() start with screen.clear(...)?

draw() runs 60 times a second; without clearing, every old picture of the dot would stay, making a smear.

What each step is for

• Investigate: The engine calls init once, then update and draw again and again; a variable that update changes needs global, because it was made outside update.
• Modify: x moves left and right, y moves up and down; a speed kept in a variable can change sign to bounce.
• something that moves: Goals only: a value changed in update and used in draw makes anything move.

Where it leads

Next lesson: the arrow keys move a paddle. The same update-and-draw loop runs every engine, from MakeCode Arcade to Unity and Godot.