Lesson 9: Sprite Movement
Overview
By combining the Draw Loop and the Counter Pattern, students write programs that move sprites across the screen, as well as animate other sprite properties.
Purpose
This lesson combines the Draw Loop that students first saw in Lesson 7 and the Counter Pattern that they learned in Lesson 8 to create programs with purposeful motion. By either incrementing or decrementing sprite properties, such as sprite.x, you can write programs that move sprites in expected patterns, instead of the randomization that we 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 15 in Code Studio.
-
Identify which sprite properties need to be changed, and in what way, to achieve a specific movement
See Levels 6 and 15 in Code Studio.
Agenda
Warm Up (5 minutes)
Activity (40 minutes)
Wrap Up (5 minutes)
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 Students
- Animating Sprites - Video (download)
Teaching Guide
Warm Up (5 minutes)
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
Prompt: 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.
Discuss: What kinds of animations could you make by combining sprite properties with the counter pattern? Consider both adding and subtracting from properties, or even updating multiple properties at the same time. Record ideas as students share them on the board.
Activity (40 minutes)
Levels: Sprites and Images
Transition: Send students to Code Studio.
Support: Students should be progressing through the levels without stopping in this class. When they have finished the skill building levels they are given the option of which project they wish to extend.
Wrap Up (5 minutes)
Journal
Prompt: Have students reflect on their development of the five practices of CS Discoveries (Problem Solving, Persistence, Creativity, Collaboration, Communication). Choose one of the following prompts as you deem appropriate.
-
Choose one of the five practices in which you believe you demonstrated growth in this lesson. Write something you did that exemplified this practice.
-
Choose one practice you think you can continue to grow in. What’s one thing you’d like to do better?
-
Choose one practice you thought was especially important for the activity we completed today. What made it so important?
- Lesson Overview
- Student Overview
- Video: Sprite Movement
- Teacher Overview
- Student Overview
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.
Questions to Consider
- What is the counter pattern?
- How does the counter pattern move sprites across the screen?
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?
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
Make your program animate like the image to the right. We've already added a line to update plane.x in the draw loop, but it needs to be finished.
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
Read this program and predict which of the following animations will be produced.
Student Instructions
Diagonal Movement
Updating only the x or y properties of a sprite can only make it move straight up and down or left and right. If you want a sprite to move on a diagonal path you'll need to updated both of those properties.
This program currently makes the mouse move straight down the screen - can you update it so that it moves diagonally across the screen like the image to the right?
Challenge: Can you make the mouse point in the same direction as the image?
- The Counter Pattern
- Student Overview
Student Instructions
Watching the Counter Pattern
Watchers are a really useful tool for debugging programs that use the counter pattern.
- Read the program and predict what the program will do.
- Run the program to check your prediction.
- Look at the watchers and explain to a neighbor what you are seeing.
Student Instructions
Debug: Watching the Counter Pattern
Let's practice using watchers to debug your code. This program should move the motorcycle from the bottom left to the top right, like the image to the right. Unfortunately the motorcycle moves off screen too quickly to see what's going wrong.
Using the provided watchers for cycle.x and cycle.y, figure out which one is moving in the wrong direction and fix the program.
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
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.
- Debugging with Watchers
- Student Overview
Student Instructions
Make an animation of your own
Using the counter pattern and sprite properties, make an animation all your own. You might consider building on the static images you've made in the past, or come up with a new image to create or story to tell.
Do This
To start, let's just get a static scene set up.
- Add images in the Animation Tab.
- Create sprites and assign images.
- Set up the draw loop to draw a background and your sprites.
Student Instructions
Add movement to your animation
With your static scene set up, you can now add some movement. When you are satisfied with your program, click the "Submit" button to turn it in. You can always unsubmit and continue working if you want to add features.
Do This
In the draw loop
- Identify which sprite properties to change.
- Update those properties using the counter pattern.
Tip: If your counter pattern isn't working like you expect, add watchers to help debug your program.
Student Instructions
Improve your animation
Make your animation even better by changing more sprite properties, or by adding even more sprites!
Student Instructions
More fish!
This time, try updating the the rotation of each fish as it moves to make it look even more like it is swimming. You can also try adding extra features, such as bubbles that rise up through the water.
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.