Unit 3 - Interactive Games and Animations
In this unit, students build on their coding experience as they create programmatic images, animations, interactive art, and games. Starting off with simple, primitive shapes and building up to more sophisticated sprite-based games, students become familiar with the programming concepts and the design process computer scientists use daily. They then learn how these simpler constructs can be combined to create more complex programs. In the final project, students develop a personalized, interactive program. Along the way, they practice design, testing, and iteration, as they come to see that failure and debugging are an expected and valuable part of the programming process.
Chapter 1: Images and Animations
Big Questions
- What is a computer program?
- What are the core features of most programming languages?
- How does programming enable creativity and individual expression?
- What practices and strategies will help me as I write programs?
Week 1
Lesson 1: Programming for Entertainment
Unplugged
- Warm Up (10 min)
- Activity (45 min)
- Wrap Up (5 min)
The class is asked to consider the "problems" of boredom and self expression, and to reflect on how they approach those problems in their own lives. From there, they will explore how Computer Science in general, and programming specifically, plays a role in either a specific form of entertainment or as a vehicle for self expression.
Teacher Links: Exemplar Student Links: Activity Guide
Lesson 2: Plotting Shapes
Unplugged
- Warm Up (10 min)
- Activity (35 min)
- Wrap Up (5 min)
This lesson explores the challenges of communicating how to draw with shapes and use a tool that introduces how this problem is approached in Game Lab.The class uses a Game Lab tool to interactively place shapes on Game Lab's 400 by 400 grid. Partners then take turns instructing each other how to draw a hidden image using this tool, accounting for many of the challenges of programming in Game Lab.
Teacher Links: Exemplar | Exemplar Student Links: Activity Guide
Lesson 3: Drawing in Game Lab
Game Lab
- Warm Up (5 minutes)
- Activity (30 minutes)
- Wrap Up (10 minutes)
The class is introduced to Game Lab, the programming environment for this unit, and begins to use it to position shapes on the screen. The lesson covers the basics of sequencing and debugging, as well as a few simple commands. At the end of the lesson, the class creates an online version of the image they designed in the previous lesson.
Lesson 4: Shapes and Randomization
Game Lab
- Warm Up (5 min)
- Activity (40 min)
- Wrap Up (5 min)
This lesson extends the drawing skills to include width and height and introduces the concept of random number generation. The class learns to draw with versions of ellipse() and rect() that include width and height parameters and to use the background() block to fill the screen with color. At the end of the progression the class is introduced to the randomNumber() block and uses the new blocks to draw a randomized rainbow snake.
Week 2
Lesson 5: Variables
Game Lab
- Warm Up (10 Mins)
- Activity (30 Mins)
- Wrap Up (5 Mins)
This lesson introduces variables as a way to label a number in a program or save a randomly generated value. The class begins the lesson with a very basic description of the purpose of a variable and practices using the new blocks. Afterwards, the class uses variables to save a random number, allowing the programs to use the same random number multiple times.
Student Links: Video
Lesson 6: Sprites
Game Lab
- Warm Up (5 minutes)
- Activity
- Wrap Up (5-10 min)
- Assessment
In order to create more interesting and detailed images, the class is introduced to the sprite object. Every sprite can be assigned an image to show, and sprites also keep track of multiple values about themselves, which will prove useful down the road when making animations. At the end of the lesson, everyone creates a scene using sprites.
Teacher Links: Exemplar Student Links: Activity Guide
Lesson 7: The Draw Loop
Game Lab
- Warm Up (5 mins)
- Activity (60 min)
- Wrap Up (10 mins)
This lesson introduces the draw loop, one of the core programming paradigms in Game Lab. The class combines the draw loop with random numbers to manipulate some simple animations with dots and then with sprites. Afterwards, everyone uses what they learned to update the sprite scene from the previous lesson.
Teacher Links: Manipulative | Manipulative | Video
Lesson 8: Counter Pattern Unplugged
Unplugged
- Warm Up (15 mins)
- Activity (20 mins)
- Activity 2 (30 mins)
- Wrap Up (10 mins)
This unplugged lesson explores the underlying behavior of variables. Using notecards and string to simulate variables within a program, the class implements a few short programs. Once comfortable with this syntax, the class uses the same process with sprite properties, tracking a sprite's progress across the screen.
Teacher Links: Key Student Links: Activity Guide | Manipulative
Week 3
Lesson 9: Sprite Movement
Game Lab
- Warm Up (5 minutes)
- Activity (40 minutes)
- Wrap Up (5 minutes)
By combining the Draw Loop and the Counter Pattern, the class writes programs that move sprites across the screen, as well as animate other sprite properties.
Lesson 10: Booleans Unplugged
Unplugged
- Warm Up (10 min)
- Activity (30 min)
- Wrap Up (5 min)
This lesson introduces boolean values and logic, as well as conditional statements. The class starts by playing a simple game of Stand Up, Sit Down in which the boolean (true/false) statements describe personal properties (hair or eye color, clothing type, age, etc). The class then groups objects based on increasingly complex boolean statements, then looks at how conditionals can impact the flow of a program.
Student Links: Activity Guide
Lesson 11: Booleans and Conditionals
Game Lab
- Warm Up (5 min)
- Activity (40 min)
- Wrap Up (5 min)
The class starts by using booleans to compare the current value of a sprite property with a target value, using that comparison to determine when a sprite has reached a point on the screen, grown to a given size, or otherwise reached a value using the counter pattern. After using booleans directly to investigate the values or sprite properties, the class adds conditional if statements to write code that responds to those boolean comparisons.
Lesson 12: Conditionals and User Input
Game Lab
- Warm Up (5 min)
- Activity (40 min)
- Wrap Up (5 min)
Following the introduction to booleans and if statements in the previous lesson, students are introduced to a new block called keyDown() which returns a boolean and can be used in conditionals statements to move sprites around the screen. By the end of this lesson students will have written programs that take keyboard input from the user to control sprites on the screen.
Student Links: Video
Week 4
Lesson 13: Other Forms of Input
Game Lab
- Warm Up (5 minutes)
- Activity (40 minutes)
- Wrap Up (5 minutes)
The class continues to explore ways to use conditional statements to take user input. In addition to the simple keyDown() command learned yesterday, the class learns about several other keyboard input commands as well as ways to take mouse input.
Lesson 14: Project - Interactive Card
Game Lab | Project
- Warm Up (10 min)
- Activity (2 days)
- Wrap Up (10 minutes)
- Assessment
In this cumulative project for Chapter 1, the class plans for and develops an interactive greeting card using all of the programming techniques they've learned to this point.
Teacher Links: Peer Review Exemplar | Project Guide Exemplar Student Links: Project Guide | Rubric | Peer Review
Chapter Commentary
Students build up toward programming interactive animations in the Game Lab environment. They begin with simple shapes and sprite objects, then use loops to create flipbook style animations. Next, they learn to use booleans and conditionals to respond to user input. At the end of the chapter, students design and create an interactive animation that they can share with the world.
Chapter 2: Building Games
Big Questions
- How do software developers manage complexity and scale?
- How can programs be organized so that common problems only need to be solved once?
- How can I build on previous solutions to create even more complex behavior?
Week 5
Lesson 15: Velocity
Game Lab
- Warm Up (15 min)
- Activity (75 minutes)
- Wrap Up (5 min)
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.
Lesson 16: Collision Detection
Game Lab
- Warm Up (10 min)
- Activity
- Wrap Up (5 min)
The class learns about collision detection on the computer. Pairs explore how a computer could use sprite location and size properties and math to detect whether two sprites are touching. The class then uses the isTouching() block to create different effects when sprites collide, including playing sounds. Last, they use their new skills to improve the sidescroller game that they started in the last lesson.
Teacher Links: Exemplar Student Links: Activity Guide
Lesson 17: Complex Sprite Movement
Game Lab
- Warm Up (10 mins)
- Activity (60 mins)
- Wrap Up (10 mins)
The class learns to combine the velocity properties of sprites with the counter pattern to create more complex sprite movement, such as simulating gravity, making a sprite jump, and allowing a sprite to float left or right. In the final levels the class combine these movements to animate and control a single sprite and build a simple game in which a character flies around and collects coins.
Lesson 18: Collisions
Game Lab
- Warm Up
- Activity
- Wrap Up (10 mins)
The class programs their sprites to interact in new ways. After a brief review of how they used the isTouching block, the class brainstorms other ways that two sprites could interact. They then use isTouching to make one sprite push another across the screen before practicing with the four collision blocks (collide, displace, bounce, and bounceOff).
Week 6
Lesson 19: Functions
Game Lab
- Warm Up (10 mins)
- Activity (60 mins)
- Wrap Up (10 mins)
This lesson covers functions as a way to organize their code, make it more readable, and remove repeated blocks of code. The class learns that higher level or more abstract steps make it easier to understand and reason about steps, then begins to create functions in Game Lab. At the end of the lesson the class uses these skills to organize and add functionality to the final version of their side scroller game.
Lesson 20: The Game Design Process
Game Lab
- Warm Up (15 mins)
- Activity (60 mins)
- Wrap Up (20 mins)
This lesson introduces the process the class will use to design games for the remainder of the unit. The class walks through through this process in a series of levels. As part of this lesson the class also briefly learn to use multi-frame animations in Game Lab. At the end of the lesson they have an opportunity to make improvements to the game to make it their own.
Student Links: Project Guide (Filled Out)
Lesson 21: Using the Game Design Process
Game Lab
- Warm Up
- Activity
- Wrap Up
In this multi-day lesson, the class uses the problem solving process from Unit 1 to create a platform jumper game. After looking at a sample game, the class defines what their games will look like and uses a structured process to build them. Finally, the class reflects on how the games could be improved, and implements those changes.
Teacher Links: Exemplar Student Links: Project Guide
Week 7
Lesson 22: Project - Design a Game
Game Lab | Project
- Warm Up (10 mins)
- Activity (80-200 mins)
- Wrap Up (10 mins)
The class plans and builds original games using the project guide from the previous two lessons. Working individually or in pairs, the class plans, develops, and gives feedback on the games. After incorporating the peer feedback, the class shares out the completed games.
Student Links: Project Guide | Rubric | Peer Review
Chapter Commentary
In this chapter students combine the constructs that they learned in the first chapter to program more complex movement and collisions in their sprites. As they create more complex programs, they begin to use functions to organize their code. In the end, students use a design process to create an original game.