Unit 3 - Interactive Animations and Games
In the Animations and Games 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.
Modifications for Virtual and Socially-Distanced Classrooms
Are you teaching in a virtual setting or in a socially-distanced classroom?
Check out this document for ideas and resources to help you tailor common practices like Think Pair Share or Peer Feedback to your learning environment. We also have general modifications for Unit 3.
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
- Lesson Modifications
- Warm Up (10 min)
- Activity (45 min)
- Wrap Up (5 min)
Question of the Day: How is computer science used in entertainment?
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: Slides | Exemplar Student Links: Activity Guide
Lesson 2: Plotting Shapes
Unplugged
- Lesson Modifications
- Warm Up (10 min)
- Activity (35 min)
- Wrap Up (5 min)
Question of the Day: How can we clearly communicate how to draw something on a screen?
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, which accounts for many of the challenges of programming in Game Lab.
Teacher Links: Slides | Exemplar | Exemplar Student Links: Activity Guide | Activity Guide
Lesson 3: Drawing in Game Lab
Game Lab
- Lesson Modifications
- Warm Up (5 min)
- Activity (30 min)
- Wrap Up (10 min)
Question of the Day: How can we communicate to a computer how to draw shapes on the screen?
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, students will be able to program images like the ones they made with the drawing tool in the previous lesson.
Teacher Links: Slides
Lesson 4: Shapes and Parameters
- Lesson Modifications
- Warm Up (5 min)
- Activity (40 min)
- Wrap Up (5 min)
Question of the Day: How can we use parameters to give the computer more specific instructions?
In this lesson, students continue to develop a familiarity with Game Lab by manipulating the width and height of the shapes they use to draw. The lesson kicks off with a discussion that connects expanded block functionality (e.g. different sized shapes) with the need for more block inputs, or "parameters." Finally, the class learns to draw with versions of ellipse() and rect() that include width and height parameters and to use the background() block.
Teacher Links: Slides
Week 2
Lesson 5: Variables
Game Lab
- Lesson Modifications
- Warm Up (10 min)
- Activity (30 min)
- Wrap Up (5 min)
Question of the Day: How can we use variables to store information in our programs?
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, then completes a level progression that reinforces the model of a variable as a way to label or name a number.
Teacher Links: Slides Student Links: Video
Lesson 6: Random Numbers
- Lesson Modifications
- Warm Up (5 min)
- Activity (35 min)
- Wrap Up (5 min)
Question of the Day: How can we make our programs behave differently each time they are run?
Students are introduced to the randomNumber() block and how it can be used to create new behaviors in their programs. They then learn how to update variables during a program, and use those skills to draw randomized images.
Teacher Links: Slides
Lesson 7: Sprites
Game Lab
- Lesson Modifications
- Warm Up (5 min)
- Activity (40 min)
- Wrap Up (5 min)
Question of the Day: How can we use sprites to help us keep track of lots of information in our programs?
In order to create more interesting and detailed images, the class is introduced to the sprite object. The lesson starts with a discussion of the various information that programs must keep track of, then presents sprites as a way to keep track of that information. Students then learn how to assign each sprite an image, which greatly increases the complexity of what can be drawn on the screen.
Teacher Links: Slides
Lesson 8: Sprite Properties
- Lesson Modifications
- Warm Up (5 min)
- Activity (40 min)
- Wrap Up (5 min)
Question of the Day: How can we use sprite properties to change their appearance on the screen?
Students extend their understanding of sprites by interacting with sprite properties. The lesson starts with a review of what a sprite is, then moves on to Game Lab for more practice with sprites, using their properties to change their appearance. The class then reflects on the connections between properties and variables.
Teacher Links: Slides
Week 3
Lesson 9: Text
- Lesson Modifications
- Warm Up (5 min)
- Activity (35 min)
- Wrap up (5 min)
Question of the Day: How can we use text to improve our scenes and animations?
This lesson introduces Game Lab's text commands, giving students more practice using the coordinate plane and parameters. At the beginning of the lesson, they are asked to caption a cartoon created in Game Lab. They then move onto Code Studio where they practice placing text on the screen and controlling other text properties, such as size.
Teacher Links: Slides
Lesson 10: Mini-Project - Captioned Scenes
Game Lab | Project
- Lesson Modifications
- Warm Up (5 min)
- Activity (35 min)
- Wrap up (5 min)
Question of the Day: How can we use Game Lab to express our creativity?
After a quick review of the code learned so far, the class is introduced to the first creative project of the unit. Using the problem solving process as a model, students define the scene that they want to create, prepare by thinking of the different code they will need, try their plan in Game Lab, then reflect on what they have created. They also have a chance to share their creations with their peers.
Teacher Links: Exemplar | Slides Student Links: Rubric | Activity Guide
Lesson 11: The Draw Loop
Game Lab
- Lesson Modifications
- Warm Up (5 min)
- Activity (60 min)
- Wrap Up (10 min)
Question of the Day: How can we animate our images in Game Lab?
This lesson introduces the draw loop, one of the core programming paradigms in Game Lab. Students learn how to combine the draw loop with random numbers to manipulate some simple animations first with dots and then with sprites.
Teacher Links: Slides | Manipulative | Manipulative | Video
Lesson 12: Sprite Movement
Game Lab
- Lesson Modifications
- Warm Up (5 min)
- Activity (40 min)
- Wrap Up (5 min)
Question of the Day: How can we control sprite movement in Game Lab?
In this lesson, the class learns how to control sprite movement using a construct called the counter pattern, which incrementally changes a sprite's properties. After brainstorming different ways that they could animate sprites by controlling their properties, students explore the counter pattern in Code Studio, using the counter pattern to create various types of sprite movements.
Teacher Links: Slides Student Links: Video
Week 4
Lesson 13: Mini-Project - Animation
Game Lab | Project
- Lesson Modifications
- Warm Up (5 min)
- Activity (35 min)
- Wrap up (5 min)
Question of the Day: How can we combine different programming patterns to make a complete animation?
In this lesson, the class is asked to combine different methods from previous lessons to create an animated scene. Students first review the types of movement and animation that they have learned, and brainstorm what types of scenes might need that movement. They then begin to plan out their own animated scenes, which they create in Game Lab.
Teacher Links: Slides | Exemplar Student Links: Activity Guide | Rubric
Lesson 14: Conditionals
Game Lab
- Lesson Modifications
- Warm Up (5 min)
- Activity (40 min)
- Wrap Up (5 min)
Question of the Day: How can programs react to changes as they are running?
This lesson introduces students to booleans and conditionals, which allow a program to run differently depending on whether a condition is true. The class starts by playing a short game in which they respond according to whether particular conditions are met. They then move to Code Studio, where they learn how the computer evaluates boolean expressions, and how they can be used to structure a program.
Teacher Links: Slides
Lesson 15: Keyboard Input
Game Lab
- Lesson Modifications
- Warm Up (5 min)
- Activity (40 min)
- Wrap Up (5 min)
Question of the Day: How can our programs react to user input?
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 they will have written programs that take keyboard input from the user to control sprites on the screen.
Teacher Links: Slides
Lesson 16: Mouse Input
Game Lab
- Lesson Modifications
- Warm Up (5 min)
- Activity (40 min)
- Wrap Up (5 min)
Question of the Day: What are more ways that the computer can react to user input?
The class continues to explore ways to use conditional statements to take user input. In addition to the keyboard commands learned yesterday, they learn about several ways to take mouse input. They also expand their understanding of conditionals to include else, which allows for the computer to run a certain section of code when a condition is true, and a different section of code when it is not.
Teacher Links: Slides
Week 5
Lesson 17: Project - Interactive Card
Game Lab | Project | Pair Programming
- Lesson Modifications
- Warm Up (10 min)
- Activity (2 days)
- Wrap Up (10 min)
Question of the Day: What skills and practices are important when creating an interactive program?
In this culminating project for Chapter 1, students plan for and develop an interactive greeting card using all of the programming techniques they've learned to this point.
Teacher Links: Exemplar | Exemplar | Slides Student Links: Project Guide | Rubric | Peer Review | Reflection
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 6
Lesson 18: Velocity
Game Lab
- Lesson Modifications
- Warm Up (5 min)
- Activity (30 min)
- Wrap Up (5 min)
Question of the Day: How can programming languages hide complicated patterns so that it is easier to program?
After a brief review of how the counter pattern is used to move sprites, the class is introduced to the idea of hiding those patterns in a single block, in order to help manage the complexity of programs. They then head to Code Studio to try out new blocks that set a sprite's velocity directly, and look at the various ways that they are able to code more complex behaviors in their sprites.
Teacher Links: Slides
Lesson 19: Collision Detection
Game Lab
- Lesson Modifications
- Warm Up (10 min)
- Activity (30 min)
- Wrap Up (5 min)
Question of the Day: How can programming help make complicated problems more simple?
In this lesson, the class learns about collision detection on the computer. Working in pairs, they explore how a computer could use math, along with the sprite location and size properties, to detect whether two sprites are touching. They then use the isTouching() block to create different effects when sprites collide, and practice using the block to model various interactions.
Teacher Links: Exemplar | Slides Student Links: Activity Guide | Activity Guide
Lesson 20: Mini-Project - Side Scroller
Game Lab | Project
- Lesson Modifications
- Warm Up (5 min)
- Activity (35 min)
- Wrap up (5 min)
Question of the Day: How can the new types of sprite movement and collision detection be used to create a game?
Students use what they have learned about collision detection and setting velocity to create simple side scroller games. After looking at a sample side scroller game, they brainstorm what sort of side scroller they would like to make, then use a structured process to program the game in Code Studio.
Teacher Links: Slides | Exemplar Student Links: Project Guide | Rubric
Week 7
Lesson 21: Complex Sprite Movement
Game Lab
- Lesson Modifications
- Warm Up (10 min)
- Activity (30 min)
- Wrap Up (10 min)
Question of the Day: How can previous blocks be combined in new patterns to make interesting movements?
The class learns to combine the velocity properties of sprites with the counter pattern to create more complex sprite movement. After reviewing the two concepts, they explore various scenarios in which velocity is used in the counter pattern, and observe the different types of movement that result. In particular, students learn how to simulate gravity. They then reflect on how they were able to get new behaviors by combining blocks and patterns that they already knew.
Teacher Links: Slides
Lesson 22: Collisions
Game Lab
- Lesson Modifications
- Warm Up (5 min)
- Activity (30 min)
- Wrap Up (10 min)
Question of the Day: How can programmers build on abstractions to create further abstractions?
In this lesson, the class programs their sprites to interact in new ways. After a brief review of how they used the isTouching block, students brainstorm 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).
Teacher Links: Slides
Lesson 23: Mini-Project - Flyer Game
Game Lab | Project
- Lesson Modifications
- Warm Up (5 min)
- Activity (35 min)
- Wrap up (5 min)
Question of the Day: How can the new types of collisions and modeling movement be used to create a game?
Students use what they have learned about simulating gravity and the different types of collisions to create simple flyer games. After looking at a sample flyer game, they brainstorm what sort of flyer they would like, then use a structured process to program the game in Code Studio.
Teacher Links: Exemplar | Slides Student Links: Project Guide | Rubric
Week 8
Lesson 24: Functions
Game Lab
- Lesson Modifications
- Warm Up (5 min)
- Activity (30 min)
- Wrap Up (10 min)
Question of the Day: How can programmers use functions to create their own abstractions?
This lesson covers functions as a way for students 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.
Teacher Links: Slides
Lesson 25: The Game Design Process
Game Lab
- Lesson Modifications
- Warm Up (15 min)
- Activity (60 min)
- Wrap Up (5 min)
Question of the Day: How does having a plan help to make a large project easier?
This lesson introduces the process that students will use to design games for the remainder of the unit. This process is centered around a project guide that asks students to define their sprites, variables, and functions before they begin programming their game. They walk through this process in a series of levels. At the end of the lesson, students have an opportunity to make improvements to the game to make it their own.
Teacher Links: Slides Student Links: Project Guide (Filled Out)
Lesson 26: Using the Game Design Process
Game Lab
- Lesson Modifications
- Warm Up (10 min)
- Activity (60 min)
- Wrap Up (5 min)
Question of the Day: How can the problem solving process help programmers to manage large projects?
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, they define what their games will look like and use a structured process to build them. Finally, the class reflects on how the games could be improved, and implements those changes.
Teacher Links: Slides | Exemplar Student Links: Project Guide
Week 9
Lesson 27: Project - Design a Game
Game Lab | Project | Presenting Information
- Lesson Modifications
- Warm Up (5 min)
- Activity (100-200 min)
- Wrap Up (10 min)
- Post-Project Test
Question of the Day: How can the five CS practices (problem solving, persistence, communication, collaboration, and creativity) help programmers to complete large projects?
Students plan and build original games using the project guide from the previous two lessons. Working individually or in pairs, they plan, develop, and give feedback on the games. After incorporating the peer feedback, students share out their completed games.
Teacher Links: Exemplar | Exemplar | Slides Student Links: Project Guide | Rubric | Peer Review | Reflection
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.