Lesson 12: Sprite Movement
Overview
Question of the Day: How can we control sprite movement in Game Lab?
In this lesson, students learn how to control sprite movement using a construct called the counter pattern, which incrementally changes a sprite's properties. Students first brainstorm different ways that they could animate sprites by controlling their properties, then explore the counter pattern in Code Studio. After examining working code, students try using the counter pattern to create various types of sprite movements.
Purpose
This lesson builds on the draw loop that students learned previously to create programs with purposeful motion. By either incrementing or decrementing sprite properties, such as sprite.x, students can write programs that move sprites in expected patterns, instead of the randomization that they used in the past. The animations that students learn to create in this lesson lay the foundation for all of the animations and games that they will make throughout the rest of the unit.
Assessment Opportunities
-
Use the counter pattern to increment or decrement sprite properties
See Level 8 in Code Studio.
-
Identify which sprite properties need to be changed, and in what way, to achieve a specific movement
See Level 8 in Code Studio.
Agenda
Lesson Modifications
Warm Up (5 min)
Activity (40 min)
Wrap Up (5 min)
View on Code Studio
Objectives
Students will be able to:
- Use the counter pattern to increment or decrement sprite properties
- Identify which sprite properties need to be changed, and in what way, to achieve a specific movement
Links
Heads Up! Please make a copy of any documents you plan to share with students.
For the Teachers
- Sprite Movement - Slides
For the Students
- Animating Sprites - Video (download)
Teaching Guide
Lesson Modifications
Attention, teachers! If you are teaching virtually or in a socially-distanced classroom, please see these modifications for Unit 3.
Warm Up (5 min)
Discussion Goal
The purpose of this discussion is to start students thinking about how they might use the various sprite properties they've seen so far to make animations with purposeful motion. If students struggle to come up with ideas, you can narrow down the question to specific properties. For example:
Reviewing Sprite Properties
Review: On a piece of scratch paper, list out all of the sprite properties you can think of and what aspect of a sprite they affect.
Prompt: What kinds of animations could you make if you could control these properties? Consider adding and subtracting from properties, or even updating multiple properties at the same time.
Discuss: Allow students to share their ideas with a partner before sharing with the entire class.
Question of the Day: How can we control sprite movement in Game Lab?
Activity (40 min)
Levels: Sprites and Images
Transition: Send students to Code Studio.
Wrap Up (5 min)
Discussion Goal
Student answers may vary, but movements such as shaking use random numbers, and movements that are more purposeful use the counter pattern. It's less important that students have a specific answer than that their answers reflect a growing understanding of how the different programming constructs work.
Students may have seen random numbers used on one property (rotation) and the counter pattern used on another (x position) in one of the challenges, but if there is time, encourage them to think about what would happen if you used the counter pattern to add or subtract a random number to a sprite property, or to combine the two constructs in other ways.
Journal
Question of the Day: How can we control sprite movement in Game Lab?
Prompt: You've seen two ways to create animations with the draw loop: random numbers and the counter pattern. What is one type of movement that you'd want to use random numbers for? What is one type of movement that you would want to use the counter pattern for? Are there any movements that might combine the counter pattern and random numbers?
Discuss: Allow students to discuss with a partner before sharing with the entire class.
- Lesson Overview
- 1
- Prediction
- 2
Student Instructions
The Counter Pattern
This pattern is one of the most important ones in all of programming.
It is used to increase the value of a variable by 1. You might call it the counter pattern since it can be used to make a variable that counts up. You'll use this pattern a lot, especially with the draw loop. Let's see what that looks like.
Do This
This program creates a variable counter and then uses the counter pattern to make it count up. When you run the program what do you think you'll see on the screen?
- Read the program and make a prediction of what the output will be.
- Run the program to check your prediction.
- Discuss with a neighbor. Can you explain what you observed?
- Video: Sprite Movement
- 3
Teaching Tip
Discussion Goals
Students may describe the counter patten in various ways. Make sure that they go beyond just stating the blocks or code that the counter pattern uses. They should understand that the counter pattern allows the programmer to update the value of a variable in a pattern that counts up (or down) on every iteration of the draw loop. This can be used for many different things, such as spinning, growing, shrinking, or timers, but it's most often used to move sprites across the screen.
When a sprite's x or y property is updated in a counter pattern, its position changes in a consistent way over time, causing it to move across the screen. Students should be able to explain that movement in an animation is just a change in position, and that changing a sprite's x position will cause it to move horizontally, and changing a sprite's y position will cause it to move vertically.
Student Instructions
Questions to Consider
- What is the counter pattern?
- How does the counter pattern move sprites across the screen?
Student Instructions
Sprite Movement
Using the counter pattern, you can write programs that animate sprites smoothly. Adding to or removing from a sprite's x or y property in the draw loop makes your sprite move just a bit each time it is redrawn.
Do This
- Read the code that makes the jet go up the screen.
- Add code that makes the plane move to the right, as in the sample image.
Student Instructions
Moving to the Left
If adding to a sprite's x coordinate makes it move to the right, how could you make it move to the left?
Do This
Make your program animate like the image to the right. Update fly.x inside the draw loop so that in each frame the fly is drawn a little bit further to the left.
Tip: You can make your sprites move faster by adding or subtracting larger numbers. The fly in our example moves about twice as fast as the plane in the last level.
Student Instructions
Diagonal Movement
Updating both the x or y properties of a sprite can make it move diagonally. You can use the watchers under the code area to see how each property is changing.
Do This
- Read the code that makes the mouse go down.
- Run the program and look at the watchers to see what is happening to the
mouse.xandmouse.yproperties. - Add one more line of code that makes the mouse move diagonally.
- Run your code again and look at the watchers.
Challenge: Set the sprite's rotation property so that it faces the direction it is moving.
Student Instructions
Read this program and predict which of the following animations will be produced.
Student Instructions
Try out using the draw loop with these activities.
Choose from the following activities:
Make sprites spin with the counter pattern.
Fix the direction the motorcycle is going by looking at the watchers.
Make the gears rotate together.
Student Instructions
Rotation and Spinning
Using the counter pattern on a sprite's rotation property can make it spin around.
Do This
- Use the counter pattern with the pan sprite's rotation property to make it spin as in the image on the right.
Student Instructions
Debug: Watching the Counter Pattern
This program should move the motorcycle from the bottom left to the top right, as in the image to the right. However, the motorcycle moves off screen too quickly to see what's going wrong.
Do This
- Look at the watcher for
cycle.x. - Add a watcher for
cycle.y. - Run the program to see what happens to the properties and why the motorcycle disappears.
- Debug the code so the program runs like the image to the right.
Student Instructions
Rotation Direction
When you use the counter pattern for the rotation property with addition, the object will always rotate clockwise. Sometimes however you will want your sprite to rotate the other direction. To do this you can just use subtraction!
Do This
There are three gears set up for you. You need to make the gears all look like they are rotating in sync with each other.
- Make the gears rotate so they look like they are working as one system.
- Hint: They won't all rotate the same direction.
- Assessment
- 9
Student Instructions
Fish Animation
Using the counter pattern, make all three of the fish move as in the image to the right. The blue fish should move the fastest, and the green fish should move the slowest.
Student Instructions
Add more to your fish scene or create something new.
Choose from the following activities:
Make the fish wiggle as they move.
Use ellipses to make bubbles rise to the surface.
None
Student Instructions
More fish!
Before you learned the counter pattern, you learned to set sprite properties, such as rotation, to random values to animate them. By setting the rotation of the fish to a random number, you can make them appear to wiggle slightly. This will make their movement animation more lifelike!
Do this:
- For each fish, randomly set its rotation inside the draw loop.
- To make it look as realistic as possible, choose a small range of negative and positive values.
Student Instructions
Bubbles
Before you learned the counter pattern, you learned to set sprite properties, such as rotation, to random values to animate them. By setting the rotation of the fish to a random number, you can make them appear to wiggle slightly. This will make their movement animation more lifelike!
Do this:
- Create at least one new variable to keep track of the changing y position of the bubbles.
- Set the value to 400, or another number near the bottom of the grid.
- Use
noFill(),stroke(),strokeWeight(), andellipse()to draw at least one bubble. - Use the variable you created to specify the y position of the ellipse.
- Use the counter pattern with subtraction and your variable to make the ellipse slowly rise.
What code goes above the draw loop?
Just the variable you create.
For example: var bubble = 400;
What code goes inside the draw loop?
The blocks used to draw the bubble and the counter pattern.
For example:
ellipse(200, bubble, 25, 25); bubble = bubble - 2;
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.