Overlaps and kinds

Make something happen when two sprites touch, and use kinds to decide which event runs.

Pac-Man eats a dot, Mario grabs a coin, a ghost catches you: every game is full of things touching, and each touch means something different.

Last lesson sprites moved, but flew straight through each other. Now they notice. When two sprites touch, they overlap, and an on overlap event (in Sprites › Overlaps) can run.

Every sprite has a kind: Player, Food, Enemy or Projectile. Until now every sprite said of kind Player. This lesson the kind matters: it is how the game tells a coin from a monster.

Click the simulator, then steer with the arrow keys.

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.

Explain it to me

When two sprites touch, they overlap · Sound on for the voiceover

When two sprites touch, they overlap. An on overlap event names two kinds:

It runs when a sprite of the first kind touches a sprite of the second kind, and for no other pair.
Inside it, sprite is the first one and otherSprite the second.
So the kind you choose when you create a sprite decides which overlap event its touches run.

Show as code

info.setScore(0)
let mySprite = sprites.create(img`
    . 4 4 .
    4 4 4 4
    . 8 8 .
    . 8 8 .
    `, SpriteKind.Player)
controller.moveSprite(mySprite)
let coin = sprites.create(img`
    . 5 5 .
    5 5 4 5
    5 4 5 5
    . 5 5 .
    `, SpriteKind.Food)
coin.setPosition(120, 60)
let spike = sprites.create(img`
    . f . f
    f 2 f .
    . f 2 f
    f . f .
    `, SpriteKind.Enemy)
spike.setPosition(40, 30)
sprites.onOverlap(SpriteKind.Player, SpriteKind.Food, function (sprite, otherSprite) {
    info.changeScoreBy(1)
    otherSprite.destroy()
})
sprites.onOverlap(SpriteKind.Player, SpriteKind.Enemy, function (sprite, otherSprite) {
    info.changeScoreBy(-1)
    otherSprite.destroy()
})

The example, as blocks

What it makes (a moment from the game)

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

Show as code

lesson.ts

let mySprite = sprites.create(img`
    . 4 4 .
    4 4 4 4
    . 8 8 .
    . 8 8 .
    `, SpriteKind.Player)
controller.moveSprite(mySprite)
let coin = sprites.create(img`
    . 5 5 .
    5 5 4 5
    5 4 5 5
    . 5 5 .
    `, SpriteKind.Food)
coin.setPosition(120, 60)
sprites.onOverlap(SpriteKind.Player, SpriteKind.Food, function (sprite, otherSprite) {
    otherSprite.destroy()
    info.changeScoreBy(1)
})

The coin is made of kind Food. Look at the two kinds named in the on overlap block.

You steer the player onto the coin. What happens?Nothing: they pass through each otherThe coin vanishes and the score goes up by 1The player stops at the coin, like a wallThe player vanishes

RunRun it and compare the result with your prediction.

Run

Steer onto the coin. Watch the top of the screen.

Show as code

lesson.ts

let mySprite = sprites.create(img`
    . 4 4 .
    4 4 4 4
    . 8 8 .
    . 8 8 .
    `, SpriteKind.Player)
controller.moveSprite(mySprite)
let coin = sprites.create(img`
    . 5 5 .
    5 5 4 5
    5 4 5 5
    . 5 5 .
    `, SpriteKind.Food)
coin.setPosition(120, 60)
sprites.onOverlap(SpriteKind.Player, SpriteKind.Food, function (sprite, otherSprite) {
    otherSprite.destroy()
    info.changeScoreBy(1)
})

Try it yourselfYour edits are saved in this browser.

It takes a few seconds to load. Your work in this step is kept.

I steered onto the coin and compared what happened with my prediction.

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

Investigate

Collect the coin, then touch the spike.

Show as code

lesson.ts

info.setScore(0)
let mySprite = sprites.create(img`
    . 4 4 .
    4 4 4 4
    . 8 8 .
    . 8 8 .
    `, SpriteKind.Player)
controller.moveSprite(mySprite)
let coin = sprites.create(img`
    . 5 5 .
    5 5 4 5
    5 4 5 5
    . 5 5 .
    `, SpriteKind.Food)
coin.setPosition(120, 60)
let spike = sprites.create(img`
    . f . f
    f 2 f .
    . f 2 f
    f . f .
    `, SpriteKind.Enemy)
spike.setPosition(40, 30)
sprites.onOverlap(SpriteKind.Player, SpriteKind.Food, function (sprite, otherSprite) {
    info.changeScoreBy(1)
    otherSprite.destroy()
})
sprites.onOverlap(SpriteKind.Player, SpriteKind.Enemy, function (sprite, otherSprite) {
    info.changeScoreBy(-1)
    otherSprite.destroy()
})

Ava's overlap event is the same as this game's. She made her star like this:

Show as code

let star = sprites.create(img`
    . 5 .
    5 5 5
    . 5 .
    `, SpriteKind.Player)

Try it yourselfYour edits are saved in this browser.

It takes a few seconds to load. Your work in this step is kept.

Match what touches with what happens in this game.

the player touches the coin (Food)

the player touches the spike (Enemy)

the coin and the spike touch

In the Player–Food event, which sprite is otherSprite?The coin it touchedEvery Food sprite in the gameThe playerThe spike

Ava added a star to her game and steers onto it. Nothing happens: no score, the star stays. Why?Stars cannot be destroyedThe star was made of kind Player, so no Player–Food event runsThe overlap event needs to be inside on startThe score only counts coins

ModifyChange the code on purpose and check the result.

Modify

Make each coin worth 5 points.

Need a hint?

Change the 1 in change score by 1.

Add a second coin, of kind Food, somewhere else on the screen. Does it need its own overlap event?

Need a hint?

Drag in another set … to sprite of kind block, and choose Food as its kind.

Another hint

Give it its own name and its own set position. You do not need a new overlap event.

Try it yourselfYour edits are saved in this browser.

It takes a few seconds to load. Your work in this step is kept.

Make each coin worth 5 points.

This ticks by itself when your blocks do what is asked.

Add a second coin of kind Food somewhere else. Collect both.

This ticks by itself when your blocks do what is asked.

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

Mix it up

Show as code

lesson.ts

let ship = sprites.create(img`
    . . 1 . .
    . 1 1 1 .
    1 1 1 1 1
    `, SpriteKind.Player)
ship.setPosition(80, 105)
controller.moveSprite(ship, 100, 0)

The ship has move with buttons with speeds 100 and 0. Which arrow keys move it?Left and right onlyAll fourUp and down onlyNone

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

Make

Make a collector game:

good food (an apple, a gem): touching it scores 1, and it vanishes
a bad item of kind Enemy (a worm, a bomb): touching it takes 1 away, and it is destroyed

Check every create block: is its kind right?

Try it yourselfYour edits are saved in this browser.

It takes a few seconds to load. Your work in this step is kept.

Need a hint?

Two new sprites: one of kind Food, one of kind Enemy. Click the kind in each create block.

Another hint

Two on overlap blocks (Sprites › Overlaps): Player with Food, and Player with Enemy.

Another hint

Food: change score by 1, then destroy otherSprite. Enemy: change score by -1, then destroy otherSprite.

A collector: touching Food scores 1 and removes it; touching an Enemy takes 1 away.

This ticks by itself when your blocks do what is asked.

ModifyChange the code on purpose and check the result.

Change a fruit stall game

Bananas fall into a basket at a market stall. Make them fall faster, then add a rotten tomato of kind Enemy that falls too and takes 2 points when caught.

Try it yourselfYour edits are saved in this browser.

It takes a few seconds to load. Your work in this step is kept.

For teachers

Students make overlap events that run when two sprites touch, and see that the kinds named in the event decide which event runs. About 40 minutes.

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

Students will be able to

I can make something happen when two sprites touch.
I can choose a sprite's kind, and say which overlap event a touch will run.
I can keep a score.

Before class

An overlap is two sprites touching. on sprite of kind Player overlaps otherSprite of kind Food (Sprites › Overlaps) is an event: it runs when a sprite of the first kind touches a sprite of the second kind, and never for any other pair. Inside it, sprite is the first one (the player) and otherSprite the second (the coin that was touched). Every sprite has a kind: Player, Food, Enemy or Projectile. The create block starts with of kind Player, so a forgotten kind is the most common bug: a coin made as a Player is never collected. change score by (Info) shows a score at the top of the screen.

Running the lesson

Predict: most students expect the coin to vanish. The real point is why: ask which two kinds the event names.
Investigate: the match shows that a pair no event names (Food and Enemy) does nothing. Ava's star is the default kind left as Player.
Modify: a second coin needs no new event: one event serves every Food sprite.
Mix it up: move with buttons speeds, from lesson 2.
Make: check every create block's kind before testing. Two overlap events, one per kind.

The hard part (on purpose)

Kinds decide which overlap runs, and sprite versus otherSprite. When a touch does nothing, ask them to read out the kinds of both sprites and the kinds the event names.

When students get stuck

Touching the coin does nothing. Ask: What kind is the coin, and what kinds does the overlap event name? Fix: Make the coin of kind Food (the dropdown in its create block), to match Player–Food in the event.
The wrong sprite disappears (the player instead of the coin). Ask: Which sprite does destroy name: sprite or otherSprite? Fix: otherSprite is the one of the second kind (Food). Drag otherSprite into destroy.
The score jumps up by many points in one touch. Ask: What happens to the coin after the touch? Fix: If it stays where it is, the event runs again every frame. Destroy it (next lesson looks at this).

Stretch and support

Stretch: Add a second kind of good food worth 3 points. Which kinds does its event need?

Support: Give students the Food and Enemy sprites already made with the right kinds, and ask them to build only the two overlap events.

Where it leads

Next lesson adds lives and a game that ends. Class ideas: a recycling sorter (paper is Food, plastic is Enemy); design a game where the kinds are swapped: what changes?

What each step is for

Investigate: An overlap event runs when a sprite of the first kind touches a sprite of the second kind. The kinds decide which event runs: sprite is the first one, otherSprite the second.
Modify: The blocks inside an overlap event decide what a touch means, and one event serves every sprite of its kinds.
Mix it up: The two numbers in move with buttons are speeds across and down.

Now you can

Make something happen when two sprites touch.
Choose a sprite's kind, and say which overlap event a touch will run.
Keep a score.

Next lesson5. Score and livesGive the player lives, make a hit cost one, and let the engine end the game.

Source: content/code/arcade/arcade-overlaps/lesson.md