A game loop

Every game engine runs your game in a loop: init once, then update and draw about 60 times a second. Make a ball move across the screen in microStudio.

Every game you have played redraws the whole screen about 60 times a second. Between pictures, the game moves everything a tiny bit.

microStudio is a free game engine that runs in the browser. You write Python there, and it runs your game. These lessons show each game working on this page; you make your own copy on microstudio.dev.

A microStudio game is three functions, and you never call them yourself: the engine does.

init() runs once, when the game starts: set things up here.
update() runs 60 times a second: move things, check keys, keep score.
draw() runs after each update: clear the screen and draw everything where it is now.

The middle of the screen is (0, 0). y goes up to 100 at the top and down to -100 at the bottom; x goes left and right from the middle.

Predict: Read the code and say what it will do before you run anything. A wrong guess is fine: it shows you what to look for.
Run: Run it and compare the result with your prediction.
Investigate: Trace how each line of code connects to what you see.
Modify: Change the code on purpose and check the result.
Make: Build something new using what you have learned. Expect a few tries; that is normal.

PredictRead the code and say what it will do before you run anything. A wrong guess is fine: it shows you what to look for.

Predict

game.py

def init():
    global x
    x = 0

def update():
    global x
    x += 1

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

Nobody calls update() in this code. Who does, and how often?

What happens when the game runs?A yellow dot sits still in the middleNothing: no function is calledA yellow dot slides to the right and off the screenA yellow dot jumps to x = 1 and stops

RunRun it and compare the result with your prediction.

Run

Watch the number at the top: that is x, going up by 1 sixty times a second. When it passes 100, update() sends the dot back to -100.

Now make your own copy. Open microstudio.dev in a new tab and click Create, then make a new project. Choose Python as its language (in the new project box, or later in the project's Settings). Open its Code tab, replace everything in the file main with the code above (use its Copy button), then press Run ▶. Keep this tab open for every lesson.

game.py

def init():
    global x
    x = -100

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

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

Play itClick the game to play. Make your own on microstudio.dev.

I have watched x go up and the dot start again from the left.

InvestigateTrace how each line of code connects to what you see.

Investigate

game.py

def init():
    global x
    x = -100

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

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

The engine decides, not you.

Count the frames.

The same game, one line missing.

Match each function with when the engine runs it.

init()

update()

draw()

The game has run for 2 seconds. About how far has the dot moved?200 steps2 steps120 steps60 steps

This stops with an error: cannot access local variable 'x'. Click the line where it goes wrong.

ModifyChange the code on purpose and check the result.

Modify

game.py

def init():
    global x
    x = -100

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

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

In your microStudio project, make the dot move up the screen instead, and start again at the bottom.

Need a hint?

Use y instead of x: the dot is drawn at (x, 0) now. Draw it at (0, y).

Another hint

Start y at -100, add 1 to it in update(), and when y > 100, set it back to -100.

Make the dot bounce off each edge instead of starting again. The game on this page shows a bouncing dot.

Need a hint?

Keep a speed in a second variable, dx = 1, and add it: x += dx.

Another hint

When x > 100 or x < -100, turn the speed round: dx = -dx. Both x and dx need to be in the global line.

Play itClick the game to play. Make your own on microstudio.dev.

My dot moves up the screen and starts again at the bottom.

My dot bounces between the edges.

MakeBuild something new using what you have learned. Expect a few tries; that is normal.

Something that moves

Start from this empty game in microStudio and make at least two things move in different ways: one faster than the other, one going the other way, one changing size... The game on this page is one idea. screen.fillRect(x, y, width, height, colour) draws a box, screen.fillRound(...) a dot, and screen.drawText(text, x, y, size, colour) writes.

game.py

def init():
    pass

def update():
    pass

def draw():
    screen.clear("rgb(10,10,40)")

Play itClick the game to play. Make your own on microstudio.dev.

I made at least two things move in my own way.

Info

Where this leads

Every game engine works this way: Unity, Godot, Pico-8 and MakeCode Arcade all call an update and a draw function every frame. Next: move something with the arrow keys.

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 happensIt waits for a click before every frameIt runs once, then stopsIt runs draw only when you press a key

For teachers

Students meet microStudio's game loop (init once, then update and draw 60 times a second), copy a moving-dot game into their own microStudio project, fix a missing global, then make a dot move up and bounce, and make two things move their own way. About 55 minutes.

Open the teacher guide: answers, solutions, slides and a worksheet.

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.

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

Predict: act it out: one student says update every time you clap, another moves one step.
Run: get every project made and running before Investigate; pair anyone stuck on the sign-in.
Investigate: the bug is the forgotten global from the turtle events lesson. Ask who remembers it.
Modify: bouncing needs a second variable for the direction; let students try before the second hint.
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

Nothing happens when they press Run, or the code turns red. Ask: Is the project set to Python? Fix: In the project's Settings, set the language to Python, then Run again.
cannot access local variable 'x' where it is not associated with a value. Ask: Which function changes x, and does it say global x? Fix: Add global x as the first line of that function.
The dot is drawn but never moves. Ask: Is x changed in update(), or only in init()? Fix: Add x += 1 inside update().
IndentationError, or code that is half outside a function. Ask: Did the whole file get replaced, or was the code pasted under microStudio's own example? Fix: Select all in the file main, delete it, then paste.

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.

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.

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.

Now you can

Make a game in microStudio and run it.
Say what init, update and draw each do, and when they run.
Make something move by changing a value in update and drawing it in draw.

Next lesson2. Keys and movementCheck the arrow keys in update() and move a paddle, keep it on the screen, then make a player that moves four ways and speeds up.

Source: content/code/games/ms-loop/lesson.md