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

  1. Use the counter pattern to increment or decrement sprite properties

    See Level 8 in Code Studio.

  2. 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

For the Students

Support

Report a Bug

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:

  • What would happen to a sprite if you constantly increased its x property?
  • What would happen to a sprite if you constantly increased its y property?
  • What about other properties, or combining multiple properties?

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
  • (click tabs to see student view)
View on Code Studio

Student Instructions

  • Prediction
  • 2
  • (click tabs to see student view)
View on Code Studio

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
  • (click tabs to see student view)
View on Code Studio

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?
View on Code Studio

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.
View on Code Studio

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.

View on Code Studio

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.x and mouse.y properties.
  • 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.

View on Code Studio

Student Instructions

Read this program and predict which of the following animations will be produced.

View on Code Studio

Student Instructions

Try out using the draw loop with these activities.


Choose from the following activities:
a
Spinning

Make sprites spin with the counter pattern.

b
Debug: Watching the Counter Pattern

Fix the direction the motorcycle is going by looking at the watchers.

c
Rotation Direction

Make the gears rotate together.

View on Code Studio

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.
View on Code Studio

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.
View on Code Studio

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
  • (click tabs to see student view)
View on Code Studio

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.

View on Code Studio

Student Instructions

Add more to your fish scene or create something new.


Choose from the following activities:
a
More Fish!

Make the fish wiggle as they move.

b
Bubbles

Use ellipses to make bubbles rise to the surface.

c
Free Play

None

View on Code Studio

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.
View on Code Studio

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(), and ellipse() 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;

View on Code Studio

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.