Lesson 7: The Draw Loop
In this lesson students are introduced to the draw loop, one of the core programming paradigms in Game Lab. To begin the lesson students look at some physical flipbooks to see that having many frames with different images creates the impression of motion. Students then watch a video explaining how the draw loop in Game Lab helps to create this same impression in their programs. Students combine the draw loop with random numbers to manipulate some simple animations with dots and then with sprites. At the end of the lesson students use what they learned to update their sprite scene from the previous lesson.
The draw loop is a core component of Game Lab. The fact that the Game Lab environment repeatedly calls this function many times a second (by default 30) is what allows the tool to create animations. This lesson has two goals therefore. The first is for you to see how animation in general depends on showing many slightly different images in a sequence to help you have physical flipbooks you can use, a video, and a map level. The second goal is for you to understand how the draw loop allows you to create this behavior in Game Lab. You should leave the lesson understanding that the commands in the draw loop are called after all other code but are then called repeatedly at a frame rate. You will have a chance to continue to develop an understanding of this behavior in the next two lessons, but laying a strong conceptual foundation in this lesson will serve you well for the rest of the unit.
Students will be able to:
- Explain how the draw loop allows for the creation of animations in Game Lab
- Use the draw loop in combination with the randomNumber() command, shapes, and sprites to make simple animations
- Animation – a series of images that create the illusion of motion by being shown rapidly one after the other
- Frame – a single image within an animation
- Frame Rate – the rate at which frames in an animation are shown, typically measured in frames per second
Warm Up (5 mins)
Video: Show Flipbook Example – Video
Prompt: This video shows a flipbook to make animation. In your own words how is it working? Why does it “trick our eyes” into thinking something is moving?
Goal: This discussion should introduce some key understandings about animation. You should understand that the key is seeing many pictures in a row that are slightly different, introduce the vocabulary word “frame” as one of those pictures, then transition to the fact that soon you will be creating animations of your own.
- Frame: a single image within an animation
We’re going to start learning how to make animations, not just still images. In order to do this we need a way to make our programs draw many pictures a second. Our eyes will blur them together to make it look like smooth motion. To do this, though, we’re going to need to learn an important new tool
Activity (60 min)
Video: Watch the video introducing the draw loop
Map Level: Notice the map level following the video. Use it as a reference as you complete the challenges in today’s activity.
Demo: Use the provided manipulatives to provide a hands-on demo for exploring how the draw loop and animations are connected.
Code Studio levels
- Lesson Overview
- Video: Introduction to the Draw Loop
The draw function runs the same code over and over in a loop, which is why it’s often called “the draw loop”. This creates an animation effect by changing what is a drawn by a small amount each time the draw function runs. This can be compared to a physical flip book, which can animate an image by changing it slightly on each page.
When the draw loop runs, it does not “clear” out previous drawing, so it will continue to show anything that has not been covered up by the new draw loop. If you do not add a “background” at the beginning of the draw loop, you will still see all the images drawn to the screen previously.
- Shapes and the Draw Loop
- The Draw Loop
- Shapes and the Draw Loop
- Sprites and the Draw Loop
- Sprite Properties
- Sprites and the Draw Loop
- Animate Your Scene
Wrap Up (10 mins)
Share: What did you do today?
- The draw loop is run after all other code in your program. It does not actually matter where it is located in your program
- The draw loop is run by Game Lab at a constant frame rate of 30 frames per second. You do not actually need to call the function yourself.
- The “frames” in Game Lab can be thought of as transparency sheets. Unless you draw a background then all your new shapes or sprites will simply appear on top of your old ones
- You should only have one draw loop in your program
Prompt: Respond to the following prompts
- What is an animation?
- Why does the draw loop help us make animations?
- What are some common errors or mistakes we should look out for as we keep programming with the draw loop?
Review: Return to the resources you saw at the beginning of the lesson (Map Level, Video, physical flip books) to address misconceptions that have arisen in the lesson.
TRY THE CHALLENGE FOR LESSON 7
Lesson 8: Counter Pattern Unplugged
Students explore the underlying behavior of variables through an unplugged activity. Using notecards and string to simulate variables within a program, students implement a few short programs. Once comfortable with this syntax, students use the same process with sprite properties, tracking a sprite’s progress across the screen.
Reasoning about variables can be tricky, especially for new programmers. In this lesson students complete an unplugged activity using physical manipulatives (cards and string) to build a mental model of how information can be stored in a variable and manipulated by a program. This model is then extended to sprite properties, which hold values in a similar way. This lesson introduces syntax and concepts that students will be able to “plug-in” in the following lesson. The mental model presented in this lesson will continue to be useful throughout the unit, even as students begin to write larger and increasingly complex programs.
Students will be able to:
- Describe the connection between updating a sprite’s location properties and sprite movement on the screen.
- Read and follow the steps of a short program written in pseudocode that manipulates variable values.
- Expression – Any valid unit of code that resolves to a value.
- Variable – A placeholder for a piece of information that can change.
Warm Up (15 mins)
Prompt: In the last lesson, we used the draw loop to make our sprites move around on the screen. What are some other ways we might want to make our sprites move?
In the next few lessons, we’re going to look at lots of ways to have our sprites move around. In order to do that, we need to learn a little bit more about variables and how they work. Today, we’re going to do an activity with variables and sprite properties that will help us to make these types of movement. As we go through the activity, think about how what you’re learning might help you to make your sprites move in the way you want.
Activity (20 mins)
Variables Unplugged Activity
Group: Get with a partner
Distribute: You and your partner need:
1) A set of labels/values and connectors
2) A single sheet of paper to create their board
3) 2 copies of the activity guide (One for each student.)
Display: Display the rules from the front page of the activity guide and write the first two programs from the second page.
Today we are going to be working in a world of labels, values, and the connectors between them. To simulate this world you’ll be using the scraps of paper and string that I’ve given you. To begin with we’ll need to set up our boards, and afterwards we’ll go over how the commands for this world work.
Demonstrate: As a class let’s watch how to divide your boards into 3 sections and label them accordingly, as shown on the first page of the activity guide.
This activity is designed to address many common misconceptions with variables and memory.
- Variables can have multiple values (They cannot, variables hold at most one value)
- Variables “remember” old values (They do not, hence old values being removed to the Trash)
- Variables are connected after a command like “x = y” (This may arise later in the course when students use sprites and will be addressed in great detail. For now students are being forced to create new value cards every time because even for a statement like x = y there is no “connection” between those variables formed)
- Variables hold expressions (e.g. 1 + 5) (Variables only hold values, expressions are computed beforehand. This is why value cards are only created once students have a single value. Enforce this rule closely)
Support: We will work through the first two programs as a group, as you reference the steps in the activity guide. As you feel increasingly comfortable with completing commands yourself, run each command before comparing your boards with a neighbor. The goal is just to make sure you have an opportunity to understand the steps of the activity.
Now it’s your turn to try running some of these programs on your own. On the bottom of the page there are two more programs that you can run. For each one you should run the program to find out the ending state of the program. In other words, you want to know what labels are connected to what values. Once you reach the end of each program you can compare your results with a neighboring group. If you don’t agree, then go back though and see if you can find where you lost track.
Support: You should work in pairs through the two programs on the activity guide. Have a check-in to make sure everyone agrees on the ending state of the program (what labels are connected to what values). If you disagree, remember the need to debug when reading code by going back and tracing each step.
Activity 2 (30 mins)
Distribute: Get a copy of the Sprite Properties in the activity guide if you don’t have it.
Demonstrate: We will work through program 5 as a group, and see how to make a new sprite card and connect it to both its variable label card and the sprite property cards. Make sure you understand that you should be creating a new sprite card every time you see the
createSprite command and should draw your sprites on the grid every time you see the
Support: Work through the last two programs using your manipulatives.
Goal: You should see that commands such as
x = x + 1 will move a sprite in a deliberate way across the screen, as opposed to the random movement you saw in the previous lesson.
Prompt: How did the sprite move across the grid in Program 3? How did the sprite move across the grid in Program 4?
After you have filled out the reflection questions, you should compare with another pair, then discuss as a class.
Wrap Up (10 mins)
Prompt 2: Some problems you may see are that the smiley faces remained on the screen, rather than moving, that you could only move left and right or up or down, or that the images stopped after a certain amount of time.
Prompt: We saw some clues today of how we might program the types of movement that we want for our sprites. What are some different ideas for how to program movement that you have after this activity? What are some problems that we still need to solve to make the sprite look like it’s moving in the way that you want?
Brainstorm problems and list them on the board.
Prompt: Choose one or two of these problems and start to think of some ways you could solve this problem.
In the next lesson, we’re going to look at how we can use some of the things we’ve learned today to make our sprites move in lots of different ways.