Sprites on the screen
Put pictures called sprites on the game screen, and place each one with x and y.
Every 2D game you have played, from Pac-Man to Mario, is pictures placed on a grid of tiny squares, then moved.
In Arcade, every character, coin and cloud is a sprite: a small picture the game can place, move and test. You program with blocks, and the simulator (the little game console beside the blocks) runs your game straight away.
The screen is 160 squares (pixels) across and 120 down. A sprite's place is two numbers: x (across) and y (down).
- 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.
Make your prediction first. Help opens once you've locked it in.
Predict
Show as code
scene.setBackgroundColor(9)
let duck = sprites.create(img`
. . . . . . . .
. . . 5 5 . . .
. . 5 5 f 5 4 4
. . . 5 5 5 . .
5 5 5 5 5 5 5 .
. 5 5 5 5 5 5 .
. . 5 5 5 5 . .
. . . . . . . .
`, SpriteKind.Player)
duck.setPosition(20, 100)
These blocks sit in on start. Lock in where you think the duck will be.
Run
Find the duck. Was it where you predicted?
Show as code
scene.setBackgroundColor(9)
let duck = sprites.create(img`
. . . . . . . .
. . . 5 5 . . .
. . 5 5 f 5 4 4
. . . 5 5 5 . .
5 5 5 5 5 5 5 .
. 5 5 5 5 5 5 .
. . 5 5 5 5 . .
. . . . . . . .
`, SpriteKind.Player)
duck.setPosition(20, 100)
Investigate
This scene has a sun, a cloud and the duck. Change the numbers in the playground to test your answers.
Show as code
scene.setBackgroundColor(9)
let sun = sprites.create(img`
. . 5 5 5 5 . .
. 5 5 5 5 5 5 .
5 5 5 5 5 5 5 5
5 5 5 5 5 5 5 5
5 5 5 5 5 5 5 5
5 5 5 5 5 5 5 5
. 5 5 5 5 5 5 .
. . 5 5 5 5 . .
`, SpriteKind.Player)
sun.setPosition(140, 15)
let cloud = sprites.create(img`
. . . 1 1 . . . . .
. 1 1 1 1 1 . . . .
1 1 1 1 1 1 1 1 1 .
1 1 1 1 1 1 1 1 1 1
. 1 1 1 1 1 1 1 1 .
`, SpriteKind.Player)
cloud.setPosition(80, 30)
let duck = sprites.create(img`
. . . . . . . .
. . . 5 5 . . .
. . 5 5 f 5 4 4
. . . 5 5 5 . .
5 5 5 5 5 5 5 .
. 5 5 5 5 5 5 .
. . 5 5 5 5 . .
. . . . . . . .
`, SpriteKind.Player)
duck.setPosition(20, 100)
Match each position with its place on the screen.
Work out a move from the numbers.
Mia changed one block:
Show as code
sun.setPosition(140, 110)
Match each position with where a sprite there appears.
A sprite is at (80, 60). You change its y to 90. How many pixels does it move down?
Modify
Pick a new sky colour, and move the sun to the other top corner.
Need a hint?
Click the colour in set background color to choose another.
Another hint
The other top corner is near x 20, y 15.
Draw a third sprite (a flower, a rock, a bug) and place it near the bottom. Give it its own name: click the variable's name in its block and choose New variable.
Need a hint?
Drag in another set mySprite to sprite of kind Player block from Sprites, then click its picture to draw.
Another hint
Then drag in set mySprite position from Sprites, and choose your new sprite's name in its dropdown.
Add a third sprite of your own and place it near the bottom of the screen.
This ticks by itself when your blocks do what is asked.
Make
Make a scene at the pond (or anywhere you like):
- something in the sky, near the top
- something on the ground, near the bottom
- something in the middle
- something tucked into a corner
Need a hint?
Each sprite needs two blocks: set … to sprite of kind Player, then set … position.
Another hint
Near the top means a small y (about 10 to 25). Near the bottom means a big y (about 100 to 115).
A scene with at least four sprites, each placed with set position.
This ticks by itself when your blocks do what is asked.
Change a start screen
This game's start screen is upside down: the title sits at the bottom and the characters float at the top. Move the title near the top, and stand the hero and the monster near the bottom, facing each other.
For teachers
Students place sprites on the Arcade screen and see that x counts across from the left and y counts down from the top. About 45 minutes.
Open the teacher guide: answers, solutions, slides and a worksheet.
Students will be able to
- I can make a sprite and draw its picture.
- I can place a sprite with x and y, and say where on the screen a position is.
- I can explain why a bigger y is lower on a game screen.
Before class
A sprite is a small picture the game can place, move and test (characters, coins, clouds). The Arcade screen is 160 pixels across and 120 down. A position is (x, y): x counts across from the left edge, and y counts down from the top edge, so (0, 0) is the top left corner and (80, 60) is the middle. This is the opposite of a maths graph, where y counts up; nearly every computer screen works this way. Each sprite block says of kind Player: ignore the kind for now, it matters from lesson 4. Try the Make task yourself: four sprites, two blocks each.
Running the lesson
- Predict: most students who know graphs put the duck near the top. Let them commit, then Run.
- Run: point at the duck and say it plainly: y counts down from the top.
- Investigate: the match builds a mental map of the screen. Mia's sun is the graph habit (bigger y is higher); have students fix it in the playground.
- Modify: each new sprite needs a new variable name, or it replaces the old one. Show the dropdown on the variable name.
- Make: four sprites, each with create and set position. The sprite picture editor opens when you click the picture.
- Start screen: no new ideas, just practice reading and changing positions.
The hard part (on purpose)
y counts down from the top on a game screen, the opposite of maths graphs. Ask them to predict where a sprite will go before placing it.
When students get stuck
- A sprite ends up near the bottom when the student wanted it at the top. Ask: Which way does y count on a game screen? Fix: Down from the top. Use a small y (about 15) to go near the top.
- Adding a new sprite makes an old one vanish. Ask: What is the new sprite's variable called? Fix: Both use the same name, so the new one replaces the old one. Click the name and choose New variable.
- A sprite cannot be seen. Ask: What are its x and y? Fix: x must be between 0 and 160 and y between 0 and 120, or it is off the screen. Also check the picture is not the same colour as the background.
Stretch and support
Stretch: Make a scene that tells a tiny story with five sprites, and place one sprite exactly in the middle of the screen.
Support: Give students a grid sketch of the screen with (0, 0), (80, 60) and (160, 120) marked, and let them plan positions on paper first.
Where it leads
Next lesson the sprites move: with the controller, and with a speed. Class ideas: recreate a famous painting or a classroom layout as a scene; a 'where is it?' game where a partner guesses a position from the screen.
What each step is for
- Investigate: x counts across from the left edge (0 to 160) and y counts down from the top edge (0 to 120), so (0, 0) is the top left corner and a bigger y is lower on the screen.
- Modify: Changing x moves a sprite across; changing y moves it up or down. Each new sprite needs its own create and set position blocks.
- Make a sprite and draw its picture.
- Place a sprite with x and y, and say where on the screen a position is.
- Explain why a bigger y is lower on a game screen.