Lesson 17: Complex Sprite Movement

Game Lab

Overview

Students learn to combine the velocity properties of sprites with the counter pattern to create more complex sprite movement. In particular students will learn how to simulate gravity, make a sprite jump, and allow a sprite to float left or right. In the final levels of the Code Studio progression students combine these movements to animate and control a single sprite and build a simple game in which a character flies around and collects a coin. Students are encouraged to make their own additions to the game in the final level.

Purpose

This lesson does not introduce any new blocks and in fact only uses patterns students have seen in Chapter 1. Instead it demonstrates how combining these tools, in particular the abstractions students learned in the previous two lessons, allows them to build new behaviors for their sprites. This highlights the broader point that abstractions not only simplify code, but also can themselves be used as building blocks of even more complex behavior.

The lesson features some of the most challenging programming in the unit. Students will be combining multiple programming constructs, including the velocity properties, the counter pattern, user interaction, and collision detection. The patterns students use in this lesson are generally useful for building games and students can and will reuse them later in the unit. In particular students will return to their flyer game from this lesson in the following one, and many of the mechanics students learn in this game reappear in lesson 17.

Agenda

Warm Up (10 mins)

Activity (60 mins)

Wrap Up (10 mins)

View on Code Studio

Objectives

Students will be able to:

  • Use sprite velocity with the counter pattern to create different types of sprite movement
  • Explain how individual programming constructs can be combined to create more complex behavior

Preparation

Teaching Guide

Warm Up (10 mins)

Review: On the board write up the four major concepts that students will be combining in today's lesson, isTouching(), keyDown(), sprite.velocityX/sprite.velocityY, and the "counter pattern". Ask students to discuss with a neighbor and remind one another what each of these four constructs is used for and how they work. As a class define each based on these discussions.

Remarks

In the last several lessons we've learned a lot of powerful programming constructs that have let us make much more interesting games. Today we're going to explore how combining these together will give us even more control over the types of games we can make.

Activity (60 mins)

Transition: Move students to Code Studio. With the exception of the discussion after the first level students will be working in Game Lab until the end of the lesson.

Discuss: After students have made their predictions about how the code in the first level has run quickly discuss why they saw the car start to move more quickly. Note that whereas before they used the counter pattern to increase a car's position, now it is being used to increase the car's velocity.

Levels 2 - 4: These levels give students practice using velocity inside of the counter pattern.

Levels 5 - 6: These levels introduce using velocity and the counter pattern to slow down a sprite, eventually moving it in the opposite direction. This leads to introducing how this pattern could be used to simulate gravity.

Levels 7 - 9: Students begin working on a flyer game. In these levels they use the programming constructs they've learned to make their main character move. The character responds to simulated gravity, jumps, and floats left and right.

Levels 10 - 12: Students add a coin to the game for their character to collect. In the last level they are encouraged to update the game themselves. Use this opportunity in particular to encourage students to use other programming patterns they've learned in this unit, e.g. creating a scoreboard.

Wrap Up (10 mins)

Share: Have students share with their classmates what additions they made to their final flyer game. Have students focus not just on how the game works, but what the code to create that kind of functionality looks like.

Prompt: On your paper make two lists. First make a list of new things you can program to do after today's lesson. On the second list write down all the new blocks you learned today.

Discussion Goal

Goal: This conversation should highlight that students did not learn any new blocks in today's lesson, they just learned new ways to combine blocks and patterns they had learned previously. The broader point here is that programming is not always about learning new blocks, but being creative about combining the tools you already know how to use in the language.

Discuss: Have students share their lists with classmates. Afterwards share lists as a class. They should hopefully have listed many new sprite movements but students haven't actually learned any new blocks in this lesson.

After you call out that all the new movements they created today were made by combining blocks and patterns they already learned, ask students what they think this might tell them about how programmers develop code.

Prompt: Today we built lots of new sprite movements like gravity and jumping, but none of this required us to learn new blocks. Do you think learning to program always means learning new commands?

Discussion Goal

Goal: Reinforce the fact that learning to program is actually not always just about memorizing blocks. Being creative with programming often means coming up with clever ways to combine the commands and patterns you already know how to use.

Discuss: Lead a quick follow-up to your initial discussion about this point.

Remarks

We're going to keep learning a few more tools in Game Lab, but as we do remember what we saw today. To create new kinds of programs you don't always need to learn new blocks. Most of the time the creativity of programming comes from learning to combine things you already know in new and creative ways.

View on Code Studio

Teaching Tip

This level introduces the primary new programming pattern of this lesson, combing the counter pattern with sprites' velocity properties. Encourage students to take seriously their predictions before actually running the code.

View on Code Studio

Velocity and the Counter Pattern

Using the counter pattern with a sprite's x and y property makes a sprite move smoothly across the screen. In this program the counter pattern is being used with the sprite.velocityX property instead.

Predict

What do you think will happen when the code is run? Why? Once you're ready you can run the code to find out.

  • Velocity and the Counter Pattern
  • 3
  • 4
  • 5
  • 6
  • 7
  • (click tabs to see student view)
View on Code Studio

Student Instructions

Velocity and the Counter Pattern

As you just saw, using a sprite.velocityX property with the counter pattern will change a sprite's velocity during the program. This makes the sprite speed up. Do a little practice using this pattern yourself.

Do This

This program already makes a car move across the screen, but it's going very slowly.

  • Use the counter pattern with the sprite's velocityX property to make the car speed up. ( Show me where )
View on Code Studio

Student Instructions

Falling Rock

The rock should speed up as it falls down the screen. Can you use the same counter pattern with velocityY inside the draw loop to make the rock go faster and faster as it falls?

Do This

  • Use the counter pattern with the sprite's y velocity to make the rock speed up as it falls. ( Show me where )

Challenge: Can you make the rock spin as it falls?

View on Code Studio

Student Instructions

Rising Bubble

This program makes a bubble rise up the water. Can you make it get faster as it rises?

Do This

  • Use the counter pattern and the sprite's y velocity to make the bubble move up more quickly.
View on Code Studio

Student Instructions

Slowing Things Down

Now that you've had some practice speeding things up, can you use the counter pattern to slow sprites down?

Do This

The car is going to run into the water! You'll need to use the counter pattern to slow it down.

  • Use the sprite.velocityX block with a counter pattern to slow the car down by 0.25 as it moves across the screen.
  • Discuss with your Partner: What do you think will happen when the car finally stops?

Challenge: Add code that makes the car slow down only if his velocityX is greater than 0.

View on Code Studio

Student Instructions

Simulating Gravity

In the last level you slowed down the car with the sprite.velocityX block and the counter pattern. It almost looked like the car was getting pulled to the left.

If you use this same pattern with the sprite.velocityY block it will look like your sprite is always being pulled down, which is exactly what gravity does!

Do This

The rock is thrown in the air but it never falls back down.

  • Use the sprite.velocityY block with the counter pattern to make the rock slow down and then fall in the other direction.
  • Experiment with different values in your counter pattern. Do you want the rock to slow down quickly or gradually? What looks most realistic to you?
  • Discuss with your partner: Why are you setting the rock's initial velocity outside the draw loop? Why are you changing the sprite's velocity inside the draw loop?
View on Code Studio

Student Instructions

Jumping

Increasing a sprite's y velocity inside the counter pattern can simulate gravity. By adding user interactions you can make your sprite appear to jump as well. For starters you'll make a simple jump, and then make it more realistic looking in the next level.

Do This

A sprite has already been created for you that falls because its y velocity is increased inside the draw loop. You'll need to make this sprite appear to jump.

  • Inside the if block that checks whether the up arrow has been pressed, set the sprite's y velocity to -5. ( Show me where )
  • Discuss with a neighbor: Why does this code run the way it does? How would using a number besides -5 affect the way the code works? How could you jump higher or lower?
View on Code Studio

Student Instructions

Floating Right

You're now using the counter pattern with the sprite's Y velocity to simulate gravity and jumping. If you use the sprite's X velocity in the counter pattern then you can make your sprite float from side to side as well.

Do This

In this level you'll make your sprite start floating to the right when the right arrow is pressed.

  • Add an if statement inside your draw loop below the one you created for the "up" arrow.
  • Use the keyDown block to make the if statement respond to when the "right" arrow is pressed.
  • Inside the if block use the counter pattern with the sprite.velocityX block to add 0.1 to the sprite's X velocity.

Run your code to see how it works. The sprite should start floating to the right when you press the right arrow and jump when you press "up". You'll make the left arrow work in the next level.

View on Code Studio

Student Instructions

Floating Left

In the last level you got detailed instructions on how to make your sprite start floating to the right. This time you'll need to make your sprite float to the left on your own. You should be pretty comfortable with using velocity and the counter pattern together at this point. If you're having trouble, talk to a neighbor or review some of the past levels.

Do This

  • Add code to your draw loop that will make the sprite start moving to the left when the "left" arrow is down.
  • Make sure you're using velocity and the counter pattern together.

Once your code is working share what you wrote with a partner. Is your sprite easy to control? Does changing the amount you add or subtract in the counter patterns you wrote affect the way the game feels? What kind of game might be fun to make with a player that moves like this?

View on Code Studio

Student Instructions

Add a Coin

In the next few levels you'll add to your program to make a simple game. In this game the player will collect points to increase the score. This is a good chance to see how different kinds of movement can affect the way a game feels, and it will also just help you practice programming skills.

Do This

In this level you'll just be adding a new coin sprite to the game. You should be working at the top of your program, outside the draw loop.

  • Use the createSprite() block to create a new sprite. Make sure to give it a descriptive name such as coin.
  • Use the sprite.x and sprite.y properties of the sprite to give it a random X and Y position between 0 and 400.
  • In the Animation Tab there is already a coin animation. Use the sprite.setAnimation() block to give your sprite this animation.

Test your code before moving on. When you run the game, you should see a coin sprite appear somewhere randomly on the screen.

View on Code Studio

Student Instructions

Reset Coin

When your character touches the coin you should reset it somewhere on the screen.

Do This

  • Place an if block inside of your draw loop.
  • Use the sprite.isTouching() block as the condition to detect when the character touches the coin.
  • Inside the if block write code that sets the coin's X and Y position to random numbers between 0 and 400.
    • Hint: You've already written this code elsewhere in your program.

Test your code before moving on. When your player touches the coin, it should move somewhere else on the screen.

View on Code Studio

Student Instructions

Make It Your Own

You now have the basic mechanics of your game in place, so it's time to make it your own. What do you want to happen? Should the character get points every time it collects a coin? Can you add a scoreboard like you learned in the last lesson? Do you want to make another coin? What about a "bad coin" that takes away points?

Do This

Make at least one improvement to the game that makes it your own. Be prepared to share your changes and improvements with your classmate.

  • Levels
  • Extra
  • (click tabs to see student view)
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.