Lesson 18: Collisions
Overview
Students program their sprites to interact in new ways. After a brief review of how they used the isTouching block, students brainstorm other ways that two sprites could interact. They then use isTouching to make one sprite push another across the screen before practicing with the four collision blocks (collide, displace, bounce, and bounceOff).
Purpose
This lesson introduces collisions, another useful abstraction that will allow students to manipulate their sprites in entirely new ways. While students could theoretically have written their own displace, collide, or bounce commands, the ability to ignore the details of this code allows them to focus their attention on the high level structure of the games they want to build.
This lesson is also intended to give students more practice using the new commands they have learned in the second chapter. It is actually the last time they will learn a new sprite behavior, and following this lesson students will transition to focusing more on how they organize their increasingly complex code.
Agenda
Warm Up
Activity
Wrap Up (10 mins)
View on Code Studio
Objectives
Students will be able to:
- Use the `displace`, `collide`, `bounce`, and `bounceOff` blocks to produce sprite interactions
- Describe how abstractions can be built upon to develop even further abstractions
Vocabulary
- Abstraction - a simplified representation of something more complex. Abstractions allow you to hide details to help you manage complexity, focus on relevant concepts, and reason about problems at a higher level.
Introduced Code
Teaching Guide
Warm Up
Discussion Goal
Goal: The goal of this discussion is for students to brainstorm ways to solve the problem of having one sprite push another across the screen. There's no need for students to come to a consensus, because they will each have a chance to try out a solution in the next level in Code Studio. Students should understand that it is possible to use blocks to produce the desired movement just with the blocks that they have already learned.
Display: If you have the ability, project the animation on the first level in Code Studio for this lesson. Otherwise ask pairs of students to look at it together. It shows two sprites, one moving across the screen towards the other and eventually pushing the one when they collide.
Prompt: Using the blocks we already know how to use, how could we create the sprite interaction we can see in this program?
Remarks
We have a lot of great ideas for how we might make one sprite push another across the screen. Now that you've prepared, you can try out your ideas in Code Studio. One big part of the problem is figuring out when the two sprites are touching, but because we already figured out how to do that and can now use the isTouching block, we don’t need to think about it anymore. We can focus on the new part of the problem.
Activity
Code Studio Levels
Levels 2-4: In these levels students are shown a sprite interaction. They then implement their ideas for creating the sprite interaction they observed. The first time they can implement the ideas from the group. The second time challenge them to implement that behavior independently.
Discussion Goal
This is a good time to call out how far the students have progressed in their skills since the beginning of the unit. This problem would have seemed almost impossible at the beginning of the year. Some things that made the problem easier to solve were:
- Preparation: The students brainstormed and thought about solutions before trying out their code.
- Cooperation: Students worked as a group to come up with a solution
- Abstraction: Students were able to use the
isTouchingandvelocityYblocks to hide part of the solution's complexity.
Prompt: This was a challenging problem, but we were able to solve it. What helped us to solve this problem?
Remarks
All of these things are very important, and they come up in Computer Science a lot. One thing that was particularly helpful was the isTouching block, which hid the complicated code that tells us whether the two sprites are touching. There's also a displace block that hides the code we just wrote, and some other blocks that hide the code for some other types of sprite interactions. You'll have a chance to try out these blocks in the next few levels, and use them to improve your flying game.
Levels 5-10: These levels introduce how to use the 4 new collision blocks students will learn in this lesson.
Levels 11-15: These levels guide students through adding collisions to the flyer game they started in the previous lesson, eventually inviting students to add their own modifications to the game.
Wrap Up (10 mins)
Share Out and Journal 3-2-1
Share: Allow students time to play each other's flying games. Ask them to focus not just on the new behavior that they added but also the code they used to create it.
Journal: Have students write and reflect about the following prompts.
- What are three things you saw in someone else's game that you really liked?
- What are two improvements you'd make to your game if you had more time?
- What's one block you'd like to have in Game Lab, and how would it work?
- Lesson Overview
- Student Overview
- Sprite Interactions
- Student Overview
Sprite Interactions
So far you've been able to create simple sprite interactions by using the sprite.isTouching() block. For example, you've reset a coin to a different location on the screen when a character touches it. Now it's time to start making sprites have more complex interactions.
Do This
- Run the program and observe the interaction between the two sprites.
- Discuss with a neighbor: Using only the commands you already know how could you create this kind of interaction? There are many ways to do it, but here are some blocks to consider:
Be ready to share your ideas with your classmates.
Student Instructions
Program a Sprite Interaction
You should have discussed with your classmates how you could create the sprite interaction you saw in the last level. Now it's your turn to program it yourself. How can you make the giraffe move the monkey off the screen?
Do This
The giraffe is already moving across the screen toward the monkey but the sprite interaction itself hasn't been programmed.
- Use the plan you developed with your classmates on the last level to program the sprite interaction yourself.
Student Instructions
Write Your Own Sprite Interaction
In the last level you should have written code for a sprite interaction that you developed with your classmates. This time try to write the program on your own, but you can use the patterns you saw in the last level.
Do This
The elephant should push the hippo off the screen. Notice that the elephant moves at a random Y velocity each time the program runs.
- Using the patterns from the last level, write code that makes the elephant push the hippo off the screen.
Student Instructions
Displace
The interaction you've been programming is so common that there's a block designed to do the interaction for you. sprite.displace() that will make one sprite push the other when they touch. The code underlying this block might look a lot like what you just wrote, but now you no longer need to worry about writing those details yourself.
Do This
Someone tried to use the sprite.displace() block to make the elephant push the hippo, but there is a bug. Can you change the code so that the elephant pushes the hippo off the screen?
- Find the line of code where the
sprite.displace()block is used and fix the error.
Student Instructions
More Collision Blocks
Three new types of sprite interactions have been added to the toolbox, sprite.collide(), sprite.bounce(), and sprite.bounceOff(). How do you think they'll affect the sprites?
Do This
- Switch out the displace block for the
sprite.collide(),sprite.bounce(), andsprite.bounceOff()blocks. ( Show me where )- Hint: If you're having trouble doing this with blocks then switch over to text mode.
- Discuss with a neighbor: What is the difference between the four different sprite interactions? What do you think the purpose of each block is?
Student Instructions
Collision Types
There are four types of collisions that we use in Game Lab. These blocks will cause a certain type of interaction between the sprite and its target.
displace
The displace block causes the sprite to push the target as long as they are touching each other. The sprite keeps moving normally.
collide
The collide block makes the sprite stop when it runs into the target. If the target is moving, it will push the sprite with it. The target keeps moving normally.
bounce
The bounce block makes the sprite and the target bounce when they touch each other. Both the sprite and the target change how they are moving.
bounceOff
The bounceOff block makes the sprite bounce off the target. The target keeps moving normally.
Do This
Choose the best block to model the basketball bouncing off the floor. ( Show me where )
Student Instructions
Debugging Sprite Interactions
Sprite interactions just run some code when they're called. The interactions are not "remembered" by the game. If you want one sprite to bounce or collide with another then it needs to be a part of the draw loop. If you forget then this can lead to unexpected behavior.
Do This
The turtle can be moved with the arrow keys. It's not supposed to be able to walk through the tree, but something is wrong in the code. Can you find and correct the bug in the code?
- Run the code and try to make the turtle collide with the tree.
- Look through the code and discuss with your partner what the problem is.
- Correct the code, then run it again to make sure it works.
Student Instructions
Debug
Sometimes sprites will behave in ways that are unexpected. There is a special sprite.debug property you can use to better understand why the sprites interact the way that they do.
Do This
These two coins are round, so you would expect them to bounce in a certain way. Something weird is happening though!
- Run the code and watch the way that the coins interact.
- Use the
sprite.debugblock to make debug 'true' for both the sprites and run the code again. - Change the gold coin's starting x position to 51 and run the code again.
- Discuss with a partner: Why do you think the coins are bouncing strangely?
Student Instructions
setCollider
Sprites interact based on the size and shape of their collider, not the images that are assigned to them. You can only see the collider when debug mode is turned on. You can change the shape of the collider using the sprite.setCollider() block, which lets you pick between a "rectangle" or a "circle". By default all colliders are "rectangle".
Do This
- Find the
sprite.setCollider()block for the gold coin, and change it from "rectangle" to "circle". - Add a new
sprite.setCollider()block for the silver coin, and choose "circle" for the shape of the collider. - Run the code again to see how the sprites bounce.
Student Instructions
Bounciness
So far, bounceOff has made sprites bounce away from other objects as fast as they bounced into them. In the real world, almost everything slows down just a little bit when it bounces off something else. You can use the bounciness block to tell your sprite how much to slow down or speed up when it bounces off something else.
Do This
- Read the code below and press "Run" to see the behavior of the basketball and pool ball.
- Use a
bouncinessblock to set the bounciness of your soccer ball. - Run the code again to see how the sprites bounce off the floor.
Student Instructions
Flyer Game - Add Obstacle
This is the flyer game you built in the last lesson. For the next several levels, you'll be adding an obstacle sprite to the game, using some of the sprite interactions you just learned. At the end you'll have a chance to keep adding on ideas of your own.
Do This
Add an obstacle sprite to the game. You can use whatever image you like from the animation tab but the example shown here uses a sun. Right now you just need to add the sprite to your game and give it an animation.
- Add a new sprite to your game called "obstacle".
- In the animation tab create a new animation for your obstacle. In the example a sun image was chosen.
- Use the
sprite.setAnimation()block to give your sprite the image you chose. - Run the code and make sure the sprite appears where you want it on the screen. You may need to set its X, Y, and scale properties to get it to look the way you want.
Student Instructions
Flyer Game - Interacting with the Obstacle
You don't want your player to be able to move through the obstacle, so you'll need to use one of the sprite interactions.
Do This
- Add code to your game that prevents your player from moving through the obstacle.
- If you use one of the bounce interactions, decide whether you want to reset the bounciness of your character.
- Discuss with a neighbor: Which sprite interaction did you decide to use? Is there more than one sprite interaction that works the way you'd expect?
Student Instructions
Flyer Game - Coin Behind the Obstacle
Right now your coin is moving to random locations. That means sometimes it even will appear behind your obstacle, so your character can't get to it. Using sprite interactions you can fix this problem.
Do This
- Add code to your game that prevents the coin from moving behind the obstacle. Don't be afraid to try out ideas just to see how they work.
- Discuss with a neighbor: Which sprite interaction did you decide to use? Is there more than one sprite interaction that works the way you'd expect?
Student Instructions
Flyer Game - Change Colliders
Right now your colliders are all rectangular. Switch them over to circles to get more interesting and realistic bounces and collisions.
Do This
- Use the
sprite.setCollider()block to change the colliders of your sprites to circles. - Set your sprites' debug properties to
trueto make sure your game is working the way you want. - Play your game to make sure it's working the way you want.
Student Instructions
Flyer Game - Make It Your Own
Time to make this game your own by using what you've learned about sprite interactions.
Do This
Add at least one more aspect to your game that uses sprite interactions. There's some ideas below or you can choose to add features of your own. Make sure you're ready to share your ideas with your classmates.
- Create "edge" sprites to keep your character from bouncing out.
- Add platforms to the game for your character to navigate around.
- Add another obstacle to your game.
- Create another idea of your own.
- Sprite Interactions Review
- Student Overview
- Levels
- Extra
Student Instructions
Free Play
Use what you've learned to create whatever you like. When you're finished, you can click 
to send your creation to a friend, or 
to send it to your Projects Gallery.
Standards Alignment
View full course alignment
CSTA K-12 Computer Science Standards (2017)
AP - Algorithms & Programming
- 2-AP-11 - Create clearly named variables that represent different data types and perform operations on their values.
- 2-AP-12 - Design and iteratively develop programs that combine control structures, including nested loops and compound conditionals.
- 2-AP-13 - Decompose problems and subproblems into parts to facilitate the design, implementation, and review of programs.
- 2-AP-16 - Incorporate existing code, media, and libraries into original programs, and give attribution.
- 2-AP-17 - Systematically test and refine programs using a range of test cases.
- 2-AP-19 - Document programs in order to make them easier to follow, test, and debug.