Lesson 15: Velocity
Overview
After a brief review of how they used the counter pattern to move sprites in previous lessons, students are introduced to the properties that set velocity and rotation speed directly. As they use these new properties in different ways, they build up the skills they need to create a basic side scroller game.
Purpose
This lesson launches a major theme of the chapter: that complex behavior can be represented in simpler ways to make it easier to write and reason about code.
In this lesson they are taught to use the velocity blocks to simplify the code for moving a sprite across the screen. This marks a shift in how new blocks are introduced. Whereas previously blocks were presented as enabling completely new behaviors, they are now presented as simplifying code students could have written with the blocks previously available. Over the next several lessons, students will see how this method of managing complexity allows them to produce more interesting sprite behaviors.
Agenda
Warm Up (15 min)
Activity (75 minutes)
Wrap Up (5 min)
View on Code Studio
Objectives
Students will be able to:
- Use the velocity and rotationSpeed blocks to create and change sprite movements
- Describe the advantages of simplifying code by using higher level blocks
Introduced Code
Teaching Guide
Warm Up (15 min)
Demonstrate: Ask for a volunteer to come to the front of the class and act as your "sprite". Say that you will be giving directions to the sprite as though you're a Game Lab program.
When your student is ready, face them so that they have some space in front of them and ask them to "Move forward by 1". They should take one step forward. Then repeat the command several times, each time waiting for the student to move forward by 1 step. You should aim for the repetitiveness of these instructions to be clear. After your student has completed this activity, have them come back to where they started. This time repeat the demonstration but asking the student to "Move forward by 2" and have the student take 2 steps each time. Once the student has done this multiple times ask the class to give them a round of applause and invite them back to their seat.
Prompt: I was just giving instructions to my "sprite", but they seemed to get pretty repetitive. How could I have simplified or streamlined my instructions?
Discussion Goal
Goal: The earlier demonstration should have reinforced the fact that repeatedly giving the same instruction is something you would never do in real life. You would instead come up with a way to capture that the instruction should be repeated, like "keep moving forward by 1."
Discuss: Give students a minute to write down thoughts before inviting them to share with a neighbor. Then have the class share their thoughts. You may wish to write their ideas on the board.
Remarks
One way to simplify these instructions is just tell our sprite to keep moving by 1 or 2, or however many steps we want. This would make instructions as humans easier to understand, and as we're about to see there's a similar way to make our code simpler as well.
Show: Sprite Velocity Video
Display: On the board, write the following pieces of code.
sprite.velocityX = 4;
sprite.velocityY = -1;
sprite.rotationSpeed = 2;
Teaching Tip
Check for Understanding: This is just a quick check for understanding after the video. Students are quickly prompted to see if they understood the main point of the video and if not you have an opportunity to reinforce it before moving into the Code Studio levels. Leave the translation from the velocity blocks to their associated counter pattern on the board to reference throughout the lesson.
Prompt: We just saw how these new blocks help us simplify the counter pattern we used to move sprites. On a sheet of paper write down the counter pattern each of these lines of code is replacing.
Discuss: Have students write their ideas on a sheet of paper before discussing their responses as a class. Eventually write the correct answers on the board next to each, as shown below.
sprite.x = sprite.x + 4;
sprite.y = sprite.y - 1;
sprite.rotation = sprite.rotation + 2;
Remarks
These new "higher level" blocks are helping us to write code that we actually already knew how to write. They're simplifying our code for us by hiding some of the unnecessary details. As we're about to see, however, these new blocks will change the kind of programs and games we're able to write.
Activity (75 minutes)
Learning to Use the Velocity Blocks
Transition: Move students to Code Studio
Circulate: These levels introduce the velocityX, velocityY, and rotationSpeed properties that you just discussed with students. Check in with students to see how they are doing and keep track of when everyone has made it to the end of level 10.
Teaching Tip
Inside or Outisde the Draw Loop?: For the first few puzzles, check to make sure that students are setting the velocities and rotation speeds outside the draw loop, immediately after they create their sprites. The code will work for the first few puzzles, even if they set the velocities inside the draw loop, but it will cause problems later.
If students are finished early, encourage them to experiment with different aspects of the scroller game they created. They can change the animations, create a background, etc.
Wrap Up (5 min)
Journal
Prompt: You learned a few new blocks today. As first glance, these blocks did the same sorts of things we'd already done with the counter pattern, but made it simpler for us to do them. As you went through the puzzles, though, you started doing some interesting movements that we hadn't been able to do before.
- Describe one of those movements, and how you made it.
- Describe another movement you'd like to make but don't know how yet.
- Describe another block that you'd like to have.
- Would it take any arguments?
- What would it do?
- What code would it hide inside?
Remarks
All of the movements that we did today are possible without the new blocks, but it would be very complicated to code them. One of the benefits of blocks like velocity is that when we don't have to worry about the details of simple movements and actions, we can use that extra brain power to solve more complicated problems. As you build up your side scroller game, we'll keep looking at new blocks that make things simpler, so we can build more and more complicated games.
- Lesson Overview
- Student Overview
Overview
After a brief review of how the counter pattern is used to move sprites, the class is introduced to the properties that set velocity and rotation speed directly. As they use these new properties in different ways, they build up the skills they need to create a basic side scroller game.
Introduced Code
- Video: Velocity
- Student Overview
- Sprite Velocity
- Student Overview
Student Instructions
velocityX
One way to move sprites in Game Lab is with the counter pattern. For example sprite1.x = sprite1.x + 1
moves a sprite by 1 pixel each frame of the draw loop. This pattern is so common that sprites have a velocityX
property that does this for you.
Do This
- Drag a
sprite.velocityX
block directly below where your sprite is created. ( Show me where ) - Write the name of your sprite in the block.
- Assign the
velocityX
property a value of 1. - Run the code. What happens?
- Re-run the code giving the
velocityX
property a different value. What's changing?
Student Instructions
Moving Down
Here is a feather sprite that should be floating down the screen. If velocityX
makes a sprite move to the right, can you find the block that will make the feather move down?
Do This
Find the block that will make the feather sprite go down the screen, and use it outside the draw loop. ( Show me where )
Student Instructions
rotationSpeed
You've already learned how to make your sprite spin by using the rotation
block. For example, when you wanted your sprite to rotate by two degrees each time it was drawn, you put sprite.rotation = sprite.rotation + 2
inside the draw loop.
Now, you can use rotationSpeed
to make your sprites rotate by a certain amount each time they are drawn. If you want your sun to rotate by two degrees each time it's drawn, you can use sun.rotationSpeed = 2
before the draw loop, after you create your sprite.
Do This
Make the sun rotate by 3 degrees each time using the rotationSpeed
block. ( Show me where )
Student Instructions
Controlling Speed
You used rotatationSpeed
outside the draw loop to make your sprite rotate when your program started. You can also use rotationSpeed
inside the draw loop to change the speed of the sprite during the game. For example, a sprite can start rotating when the user presses the space bar, and it will keep rotating until it's told to stop.
Do This
- Look at the
if
statement inside the draw loop that checks whether the space bar has been pressed. ( Show me where ) - Use the
rotationSpeed
block to make the color wheel start spinning when the user presses the space bar.
Student Instructions
Controlling Speed
Your code before the draw loop sets up the beginning of your game. Your code inside the draw loop controls how the game will change while it's being played. In this game, the helicopter bot starts off at the bottom of the screen, but when the space key is pressed, it flies up.
Do This
Student Instructions
Changing Velocity with Position
One advantage to using the velocity blocks inside conditionals (if
blocks) is that your sprite keeps moving, even after the condition stops being true. For example, you only had to press a key once to launch your fly bot, and it kept flying forever. The code below uses if statements to make a fish sprite move in different directions.
Do This
- Look at
if
statements that check the sprite's position and set its velocity. - With your partner, discuss what you think the code will do, and write your answer below.
- Once you have submitted your answer, run the code.
Student Instructions
Multiple Controls
As you saw in the last level, you can change the sprite's velocity with multiple if
statements. In this program, the fish has three different types of movement, each of which should be controlled by its own if
statement.
Do This
-
Look at the three
if
statements inside the draw loop. -
Use a
sprite.velocityX
block inside eachif
statement to make the three following movements: - If the user presses the right arrow key, move the fish to the right.
- If the fish gets to the right-hand side of the screen, move the fish to the left.
- If the fish gets to the left-hand side of the screen, stop the fish.
Student Instructions
Jumping
You now have all the blocks you need to make your sprite jump!
Just as you checked whether your fish was at the left edge, you'll need to check whether the frog is on the ground. If it is, it could either jump up or stay still, so you'll need one more if
block to check whether the user has pressed the up arrow ( Show me where ).
You'll also need to check whether the frog has reached its highest point, and send it back down if it has.
Do this
- Find the
if
statement that checks whether the sprite is on the ground, and look at theif
statement inside of it that checks whether the user has pressed the "up" arrow key. ( Show me where ) - Add an if statement that does the following ( Show me where )
- Checks whether the frog sprite has reached its highest point.
- If so, use the
velocityY
block to make the sprite fall back down.
Student Instructions
Mushroom
Now you just need something for your sprite to jump over. This program already has a mushroom just past the right edge of the screen, but it needs to move toward your frog.
Do this
- Use the
velocityX
block to make the mushroom move left across the screen.
Hint: The mushroom should start moving at the very beginning of the game, and never change, so should it be inside or outside the draw loop?
Student Instructions
Looping
The game will be more fun if the frog can jump more than once. You can make the mushroom "loop" by checking whether it's moved past the left edge and moving it back to the right edge when it has.
Do this
- Find the
if
statement that checks whether the mushroom has passed the left edge. ( Show me where ) - Use the
sprite.x
block to set the mushroom's position back to the right edge if it has.
- 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.