Make it yours

Add sound with audio.beep, draw your own sprites in microStudio's sprite editor, then finish a game of your own and decide how to share it safely.

The same game feels completely different with your own pictures and sounds: that is most of what makes a game yours.

Your catching game works. Now make it look and sound like your game. microStudio has a Sprites tab for drawing pictures pixel by pixel, and audio.beep() plays notes from a short piece of text, such as "C E G".

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 t, seconds
    t = 0
    seconds = 0

def update():
    global t, seconds
    t += 1
    if t % 60 == 0:
        seconds += 1
        audio.beep("C E G")

def draw():
    screen.clear("rgb(10,10,40)")
    screen.drawText(str(seconds) + " seconds", 0, 0, 16, "#FFF")

t % 60 is what is left over when t is divided by 60. When is it 0?

What do you hear while this game runs?One long note that never stopsThree quick notes, C E G, once every secondNothing: beep only works in draw()C E G 60 times a second

RunRun it and compare the result with your prediction.

Run

The catching game, with a sound on every catch (turn your sound on). Put it in microStudio and run it there too.

game.py

import random

class Star:
    def __init__(self, x):
        self.x = x
        self.y = 100
        self.speed = random.randint(5, 15) / 10

    def move(self):
        self.y -= self.speed
        if self.y < -100:
            self.restart()

    def touches(self, x, y):
        return abs(self.x - x) < 12 and abs(self.y - y) < 8

    def restart(self):
        self.y = 100
        self.x = random.randint(-90, 90)

    def draw(self):
        screen.fillRound(self.x, self.y, 8, 8, "rgb(255,210,0)")

def pressed(key):
    return hasattr(keyboard, key) and keyboard[key] != 0

def init():
    global stars, px, score
    stars = []
    for i in range(4):
        stars.append(Star(-60 + i * 40))
    px = 0
    score = 0

def update():
    global px, score
    if pressed("LEFT"):
        px -= 2
    if pressed("RIGHT"):
        px += 2
    for star in stars:
        star.move()
        if star.touches(px, -80):
            score += 1
            audio.beep("E G")
            star.restart()

def draw():
    screen.clear("rgb(10,10,40)")
    for star in stars:
        star.draw()
    screen.fillRect(px, -80, 24, 6, "rgb(100,200,255)")
    screen.drawText("Score: " + str(score), 0, 88, 10, "#FFF")

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

I have heard the catch sound, here and in my microStudio game.

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

Investigate

game.py

import random

class Star:
    def __init__(self, x):
        self.x = x
        self.y = 100
        self.speed = random.randint(5, 15) / 10

    def move(self):
        self.y -= self.speed
        if self.y < -100:
            self.restart()

    def touches(self, x, y):
        return abs(self.x - x) < 12 and abs(self.y - y) < 8

    def restart(self):
        self.y = 100
        self.x = random.randint(-90, 90)

    def draw(self):
        screen.fillRound(self.x, self.y, 8, 8, "rgb(255,210,0)")

def pressed(key):
    return hasattr(keyboard, key) and keyboard[key] != 0

def init():
    global stars, px, score
    stars = []
    for i in range(4):
        stars.append(Star(-60 + i * 40))
    px = 0
    score = 0

def update():
    global px, score
    if pressed("LEFT"):
        px -= 2
    if pressed("RIGHT"):
        px += 2
    for star in stars:
        star.move()
        if star.touches(px, -80):
            score += 1
            audio.beep("E G")
            star.restart()

def draw():
    screen.clear("rgb(10,10,40)")
    for star in stars:
        star.draw()
    screen.fillRect(px, -80, 24, 6, "rgb(100,200,255)")
    screen.drawText("Score: " + str(score), 0, 88, 10, "#FFF")

ModifyChange the code on purpose and check the result.

Modify

game.py

import random

class Star:
    def __init__(self, x):
        self.x = x
        self.y = 100
        self.speed = random.randint(5, 15) / 10

    def move(self):
        self.y -= self.speed
        if self.y < -100:
            self.restart()

    def touches(self, x, y):
        return abs(self.x - x) < 12 and abs(self.y - y) < 8

    def restart(self):
        self.y = 100
        self.x = random.randint(-90, 90)

    def draw(self):
        screen.fillRound(self.x, self.y, 8, 8, "rgb(255,210,0)")

def pressed(key):
    return hasattr(keyboard, key) and keyboard[key] != 0

def init():
    global stars, px, score
    stars = []
    for i in range(4):
        stars.append(Star(-60 + i * 40))
    px = 0
    score = 0

def update():
    global px, score
    if pressed("LEFT"):
        px -= 2
    if pressed("RIGHT"):
        px += 2
    for star in stars:
        star.move()
        if star.touches(px, -80):
            score += 1
            audio.beep("E G")
            star.restart()

def draw():
    screen.clear("rgb(10,10,40)")
    for star in stars:
        star.draw()
    screen.fillRect(px, -80, 24, 6, "rgb(100,200,255)")
    screen.drawText("Score: " + str(score), 0, 88, 10, "#FFF")

Draw a star and a player in microStudio's Sprites tab, and draw them in the game instead of the dot and the box:

def draw():
    screen.clear("rgb(10,10,40)")
    for star in stars:
        screen.drawSprite("star", star.x, star.y, 12, 12)
    screen.drawSprite("player", px, -80, 24, 12)

Need a hint?

In microStudio's Sprites tab, add a sprite and name it star; draw it (16 × 16 is plenty). Make another called player.

Another hint

In the star's draw(), replace the fillRound line with screen.drawSprite("star", self.x, self.y, 12, 12). Do the same for the paddle in draw().

Give the game two different sounds: one for a catch and another for something else.

Need a hint?

Play a different beep for a miss or a game over, where it happens in update().

Another hint

Try "duration 100 C E G" for shorter notes, or "saw C2" for a growl.

My stars and my player are sprites I drew.

My game has at least two different sounds.

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

Your game

Make a game of your own, starting from your catching game or from an empty project: dodge instead of catch, a maze, a racing game, a clicker. It needs a goal, a way to win or lose, and your own sprites and sounds. Then ask a friend to play it without telling them how, watch what they do, and change one thing.

Sharing. A microStudio project is private until you make it public: then anyone can play it, and copy its code, from microStudio's Explore page. Ask your teacher before you publish, use a nickname, and leave out your name, school and photos. A guest's projects are deleted after about 15 days, so if you are a guest, make an account or copy your code somewhere safe.

I made my own game, a friend played it, and I changed something because of what they said.

Info

Where this leads

From here: microStudio's documentation (the Help tab) has maps, music, gamepads and multiplayer. The same ideas carry into bigger engines such as Godot, whose GDScript looks a lot like Python.

Your game needs a level 2 where the stars fall faster. What is the smallest change?A second copy of the whole gameA new class for every starA level variable, and a speed in each star that is multiplied by itChanging every number in the code by hand

For teachers

Students add sounds with audio.beep where things happen, draw their own sprites in microStudio and draw them with screen.drawSprite, then make and playtest a game of their own and decide how to share it safely. About 60 minutes.

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

Students will be able to

I can add sounds and my own sprites to a game.
I can make a game with a goal and a way to win or lose.
I can improve my game after watching someone play it.
I can decide what is safe to share when I publish a game.

Before class

Read the unit primer first. Turn sound on (headphones help). audio.beep("C E G") plays notes from text; words such as duration 100, tempo 160, square, saw and sine change how. Sprites are drawn in microStudio's Sprites tab and named there; screen.drawSprite("name", x, y, width, height) draws one (our site's games cannot show students' sprites, so the Modify step has no game on the page). Sharing: a project is private until it is made public; a public project can be played and copied by anyone from microStudio's Explore page, under the student's nickname. Decide your rule before the lesson (for example: publish only with your OK, nicknames only). Guest projects are deleted after about 15 days, so guests should make an account or keep a copy of their code. The Make step can run as a longer project; the Python pathway's For teachers notes suit a showcase.

Running the lesson

Predict: count t up in 60s on the board; circle the multiples of 60.
Investigate: ask why a beep in draw() would be a bad idea, then let one student try it.
Modify: show the Sprites tab on the projector; 16 × 16 pixels is enough.
Make: playtest in pairs: the player plays without being told how, the maker watches and writes down one change.

The hard part (on purpose)

Finishing: a game of their own is open-ended. Agree a small goal first (one change to the rules, own sprites, two sounds), then add.

When students get stuck

The sprite does not show. Ask: Is the name in drawSprite exactly the sprite's name in the Sprites tab? Fix: Use the same name, in lower case, in quotes.
The sound plays over and over. Ask: Is the beep in draw(), or in an if that is true for many frames? Fix: Move it into update(), in the if where the thing happens once.
No sound at all. Ask: Has the game been clicked, and is the sound on? Fix: Browsers only allow sound after a click in the page.
Their guest project has gone. Ask: Did they make an account, or keep a copy? Fix: Guest projects are deleted after about 15 days; make accounts for longer work.

Stretch and support

Stretch: Add a title screen: a mode variable ("title", "play", "over") that update() and draw() check first.

Support: Start the Make step from the catching game and change only the sprites, the sounds and one rule.

Where it leads

The Python pathway's other extensions (data, web apps) use the same Python. microStudio's Help tab covers maps, music and multiplayer; Godot's GDScript is a natural next engine.

What each step is for

Investigate: Sound and pictures are calls in the same loop: a beep where something happens in update, a sprite where a shape was drawn in draw.
Modify: A sprite replaces a shape: same place, same size, a picture instead of a dot.
your game: Goals only: a game of your own with a goal, a way to win or lose, your own sprites and sounds, and a friend's playtest.

Now you can

Add sounds and my own sprites to a game.
Make a game with a goal and a way to win or lose.
Improve my game after watching someone play it.
Decide what is safe to share when I publish a game.

You reached the endBack to Games with microStudio

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