Lesson 17: Complex Sprite Movement
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.
- Lesson Overview
- Student Overview
- Velocity and the Counter Pattern
- Teacher Overview
- Student Overview
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.
Student Instructions
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.
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 )
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?
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.
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.velocityXblock 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.
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.velocityYblock 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?
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
ifblock 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?
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
ifstatement inside your draw loop below the one you created for the "up" arrow. - Use the
keyDownblock to make theifstatement respond to when the "right" arrow is pressed. - Inside the
ifblock use the counter pattern with thesprite.velocityXblock 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.
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?
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.xandsprite.yproperties 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.
Student Instructions
Reset Coin
When your character touches the coin you should reset it somewhere on the screen.
Do This
- Place an
ifblock inside of your draw loop. - Use the
sprite.isTouching()block as the condition to detect when the character touches the coin. - Inside the
ifblock 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.
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.
- Velocity and the Counter Pattern Review
- Student Overview
- Levels
- Extra
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.