- Learnt27 min · screens, buttons, and the way back
- Basic25 min · build the menu
- Challenge 1–327 min · your cabinet, nothing left behind, the click test
- Extrabonus · buttons that answer the mouse
Review — where we got to 5 min
Two finished games, and both of them already have half of what we need.
- Jump Dash has a title screen: the flag builds it,
when this sprite clickedstarts the game. - Paddle Bounce has a win screen, which is a screen by another name.
Quick-fire
Your project has two screens. How many sprites need to know about that?
Reveal the answer
All of them. Every sprite has to be told what to do on every screen, even if the answer is nearly always “hide”.
Today’s Topic 3 min
- A screen is a broadcast, plus a rule for every sprite
- Buttons that send different messages
- A home button that works from anywhere
- Stopping a game properly when you leave it
Learning outcome
By the end of this lesson you will be able to:
- Build a menu with three buttons on it.
- Show and hide every sprite for every screen.
- Leave a running game and come back to a clean menu.
Learnt — screens, buttons, and the way back 27 min
1 · A screen is a message
There is no screen block in Scratch. A screen is a broadcast, and every sprite in the project answers it with either show or hide.
- Open a new project. Delete the cat and pick a plain backdrop.
- Add two Button2 sprites, side by side.
- On each, add
when I receive [menu v]thenshow. - Add a second stack:
when I receive [jump dash v]thenhide. - On the flag, broadcast
menu.
when flag clicked
broadcast [menu v]
How to use this: Click the green flag to build the menu, then click the left-hand button on the stage. The buttons vanish and the hare appears.
2 · Buttons that lead somewhere
A button does two things: it says which screen it wants, and it gets out of the way.
- Name your buttons
Play1,Play2andScores. - On each:
when this sprite clicked, a sound, and a broadcast of its own. - Use a different message name on each one.
- Click each button and watch the buttons vanish.
- Nothing else happens yet. That is correct.
when this sprite clicked
start sound [Pop v]
broadcast [jump dash v]
3 · Getting one game in, and getting back out
Now bring a game in. Its scripts do not change much — only the block at the top of each one.
- Open your Jump Dash project and drag its sprites into the backpack, at the bottom of the editor.
- Open the arcade project and drag them back out of the backpack.
- On each of them, change every
when flag clickedtowhen I receive [jump dash v]. - Add a
when I receive [menu v]stack to each one:stop [other scripts in sprite v], thenhide. - Add a Home Button sprite in the top corner that broadcasts
menu. - Play the game, click home, and check the menu is clean.
when I receive [menu v]
stop [other scripts in sprite v]
delete this clone
hide
How to use this: Click the green flag, then click the button on the stage to start the game. Click the stage and press the space bar to hop, then click the home button (top right) to go back.
Basic — build the menu 25 min
Build the empty cabinet first. A menu with nothing behind it still has to work.
Step 1 — the screens
- New project, plain backdrop, cat deleted.
- Decide your screen names now and write them down:
menu, one per game, andscores. - Broadcast menu on the flag.
Step 2 — the buttons
- Three buttons, evenly spaced, each with a name on it.
- Give each one its show and hide stacks.
- Give each one its clicked stack.
- Click all three. The menu should empty every time.
Step 3 — the way home
- Add the home button.
- Hide it on the menu and show it everywhere else.
- Click a button, then home, ten times.
Step 4 — one real game
- Backpack your Jump Dash sprites over.
- Change every hat block.
- Add the menu stack to every one of them.
Step 5 — the round trip
- Menu, game, home, menu, game, home. Five times.
- Look at the menu each time. Nothing from the game should be on it.
The game starts as soon as I press the flag.
A sprite still has a flag hat on a game script. Open every sprite and check them all.
Rocks keep arriving on the menu.
The rock factory is still running. Its menu stack needs stop [other scripts in sprite v], not just a hide.
Old clones are still on the menu.
Clones do not hear hide on the original. They need delete this clone in their own menu stack.
The home button is on the menu too.
Its menu stack says show. It should say hide — the menu is where home leads.
Your cabinet
This is the front of everything you have made this year. Make it look like it.
- A name for your arcade.
- Three buttons a stranger could read.
- A backdrop that is not the plain white one.
Nothing left behind
Go through your project sprite by sprite and give every one of them a rule for every screen. Write the list out first.
- A written list: every sprite down one side, every screen along the top.
- Every box filled in with show or hide.
- The project matches the list.
Teacher note — the grid on paper is the point
Four sprites and three screens is twelve decisions, and pupils who keep them in their head miss two or three. The grid takes four minutes and finds the bugs before Scratch does.
It is also the first time most of them meet the idea that a program has a state, and that every part of it has to agree about what that state is.
The click test
Click everything, in any order, twenty times. A menu that only works if you use it politely is not finished.
- Twenty clicks, chosen carelessly.
- You never get stuck on a screen.
- Clicking a button twice quickly does not break anything.
- The green flag is never needed after the first press.
Teacher note — the double click
Clicking one button twice starts a game twice, and two copies of the same forever loop is a game running at double speed. The fix is the button hiding itself, which is also why it hides on its own message rather than on the click.
Buttons that answer the mouse
A button that changes when you point at it tells the player it is a button. Nothing else on the screen has to.
How to use this: Click the green flag, then move the mouse over the two buttons. They grow when the mouse is on them and shrink when it leaves.
- A button grows or lights up when the mouse is over it.
- It goes back to normal when the mouse leaves.
- Two buttons are never both lit at once.
- They are their proper size again when you come back from a game.
Teacher notes — the size that never comes back
touching [mouse-pointer v]? inside a forever loop, with an if / else setting the size, is the whole answer. The trap is the loop still running inside a game, quietly resizing a hidden sprite.
A set size to (100) % in the menu stack fixes the sprite that got left large. It is the same lesson as the shrinking paddle in Topic 1.42.
Going further: next lesson the second and third buttons stop being decoration.
Summary 4 min
No new game today, and the project is bigger than either of them.
- A screen is a broadcast plus a rule for every sprite.
- A button sends a message and then hides on that message.
- A game brought in from another project only needs its hat blocks changed.
- Leaving a game means stopping its scripts and deleting its clones.
- Screen
- A broadcast, and every sprite’s answer to it.
- Menu
- The screen everything else leads back to.
- Backpack
- Scratch’s way of carrying sprites from one project to another.
- stop other scripts in sprite
- Stops this sprite’s other stacks and leaves the rest of the project alone.
Next lesson: the other two buttons get games behind them, and two sprites called Ball cause trouble.