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.
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
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
Overview
By combining the Draw Loop and the Counter Pattern, the class writes programs that move sprites across the screen, as well as animate other sprite properties.
- Video: Sprite Movement
- Student Overview
- The Counter Pattern
- Student Overview
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 update 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?
- Debugging with Watchers
- 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 in the image to the left. The blue fish should move the fastest, followed by the orange fish, with the green fish being 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.
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.
- Challenges
- Student Overview
Challenges
Ask your teacher before pursuing any of these challenges.
- Return to level 15 to continue working on your own animation. You'll need to Unsubmit your project first, and the submit again when you've finished working.
- Return to level 12 to continue working on the fish animation. Try randomly changing the fishes' rotation to make them look like they are swimming.
- Return to level 13 to continue working on the gears animation. Try adding more gears of different sizes and tweaking the speed of each rotation to ensure that the gears mesh properly
- Go to full Game Lab to create a new animation from scratch.
- Free Play
- Student Overview
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.