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

Links

Heads Up! Please make a copy of any documents you plan to share with students.

For the Students

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:

  • 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

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?

  • Movement with the Counter Pattern
  • 4
  • 5
  • 6
  • 7
  • 8
  • (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?
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

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.

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

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

View on Code Studio

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?

View on Code Studio

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

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.

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

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.
  • Create Your Own Animation
  • 14
  • 15
  • (click tabs to see student view)
View on Code Studio

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

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.

View on Code Studio

Student Instructions

Improve your animation

Make your animation even better by changing more sprite properties, or by adding even more sprites!

View on Code Studio

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.

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.