Lesson 3: Drawing in Game Lab
Overview
Students are introduced to Game Lab, the programming environment for this unit, and begin to use it to position shapes on the screen. They learn 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.
Purpose
The main purpose of this lesson is to give students a chance to get used to the programming environment, as well as the basic sequencing and debugging that they will use throughout the unit. Students begin with an introduction to the GameLab interactive development environment (IDE), then learn the three commands (rect, ellipse, and fill) that they will need to code the same types of images that they created on paper in the previous lesson. Challenge levels provide a chance for students who have more programming experience to further explore Game Lab.
Assessment Opportunities
-
Use a coordinate system to place elements on the screen.
See level 9 in Code Studio, in particular the placement of the square in the picture.
-
Sequence code correctly to overlay shapes.
See level 9 in Code Studio, in particular that the square is displayed in front of the circles.
Agenda
Warm Up (5 minutes)
Activity (30 minutes)
Wrap Up (10 minutes)
View on Code Studio
Objectives
Students will be able to:
- Use a coordinate system to place elements on the screen.
- Sequence code correctly to overlay shapes.
Preparation
- Read the Forum
- Prepare projector or other means of showing videos if you wish to watch as a class
Vocabulary
- Bug - Part of a program that does not work correctly.
- Debugging - Finding and fixing problems in an algorithm or program.
- Program - An algorithm that has been coded into something that can be run by a machine.
Introduced Code
Teaching Guide
Warm Up (5 minutes)
Programming Images
Discussion Goal
Goal From Unit 2, students may remember that a computer can only understand what to do if you use a particular language in order to communicate with it. For Web Development, that language was HTML. Computers can't "figure out" what you mean in the same way that a human can, and they are usually much more specific in how they follow instructions.
Remarks
In the last lesson we created images on the computer by organizing squares and circles on a grid. For each image you wanted to create, you had to lay those images out manually, and if you wanted to recreate an image it was a lot of work. Today, we're going to program the computer to draw those images for us. Based on what you know about computers, what do you think will be different between telling a person about your image and telling a computer about your image?
Allow students time to think individually and discuss with a partner, then bring the class together and write their ideas on the board.
Remarks
In order to give instructions to a computer, we need to use a language that a computer understands. In the last unit, we used HTML, which is great for making web pages. To make our animations and games, we will use a version of Javascript that uses blocks. The environment that we'll be programming in is called Game Lab.
Activity (30 minutes)
Teaching Tip
Pair programming is a great way to increase student confidence and foster the practices of collaboration and communication. You can read more about how to use Code Studio's pair programming feature here.
Teaching Tip
Students that are new to programming often have some common misconceptions they run into. In order to prevent those keep reminding students about the following things
- One command per line
- Commands run in order from top to bottom
- Order of inputs into shape commands matter
- Each input into shape commands are separated by commas
- (0,0) is in the upper left corner of the display
- All x and y values on the display are positive
Simple Drawing in Game Lab
Group: Place students in pairs to program together.
Transition: Send students to Code Studio.
Support: As students work on the levels you can help them but encourage them to try to spend some time figuring things out themselves first. If you need help supporting students, see the exemplars in the teacher answer viewer. When students hit the challenge levels, they can choose to pursue one or more of the challenges, return to improve upon previous levels, or help a classmate.
Wrap Up (10 minutes)
Share Drawings
Goal: Students get to see the variety of different things you can create with just simple shape drawings.
Share: Once students have completed their drawings have them share their drawings with the class. One way to do this is with a gallery walk.
Exit Ticket
Goal : Students share tricks they learned as they went through levels.
Prompt: Today you learned how to draw in Game Lab for the first time. What type of advice would you share with a friend who was going to learn about drawing in Game Lab to make it easier for them? Write it down on a piece of paper.
Collect: Collect answers from students and pick out a few that might be helpful for all students to hear. Share those at the beginning of the next class.
- Lesson Overview
- Student Overview
- Introduction to Game Lab
- Teacher Overview
- Student Overview
Tour of Game Lab
Depending on the age and comfort level of your students, you may choose to use this level to tour the environment as a whole class. Make sure that students can find the level instructions, coding area, display area, and block drawers. This is also a good opportunity to point out some of the useful resources like documentation and the blocks to text button.
Explore Game Lab
Welcome to Game Lab, where you can create interactive animations and games!
You've already practiced the basics of putting shapes on a grid. In Game Lab, you'll do the same with the display area on the left.
Do This
- Look at the line of code in the workspace below these instructions ( Show me where ) and discuss with your partner where you think the shape will be drawn on the grid.
- Click
to run the program and see what happens. - Change the numbers inside the block, then try running the program again.
- Try to place the rectangle near the bottom right of the screen.
- Video: Drawing in Game Lab - Part 1
- Teacher Overview
- Student Overview
Discussion Goals
Make sure students understand how to access the block documentation by clicking on the blocks inside the toolbox and clicking "see examples".
As students think of ideas of why they might prefer to use block mode, make sure that they understand that the block-based version of the programming language is just as legitimate as the text-based version. Students may offer that blocks make it easier to remember the exact commands or that they don't have to worry about the details of the parentheses or semicolons.
(Alternatively, advantages to text might be that it's easier to edit or that the text takes up less space.)
Questions to Consider
- Where can you find more information about how to use the blocks?
- What’s an advantage of using block mode?
- Using the Grid
- Student Overview
Place Squares in Corners
A big part of using Game Lab is understanding position. Remember you can always turn on the grid or hover with the mouse to help find the x and y position you want.
Do This
- Place two rectangles exactly in the corners of the screen, just like the picture.
- Video: Drawing in Game Lab - Part 2
- Teacher Overview
- Student Overview
Discussion Goals
Stroke controls the border color of the shape, and fill controls the color inside of it.
Questions to Consider
- What’s the difference between stroke and fill?
Student Instructions
fill(color)
You can also make your rectangles different colors with fill. It will set the color for every shape that comes after it in the code.
Do This
- Look at the code that sets the color. ( Show me where )
- Change the color from blue to yellow.
- Add a new square by dragging a
rectblock into the code area below the fill command ( Show me where ). The new square can go any location on the screen you like.
Student Instructions
Order Matters
In Game Lab, it matters what order your code is in. New shapes are drawn on top of the ones that came before, covering up the shapes that are drawn first. You can see the difference when you use more than one color in your code.
Do This
- Look at the code that draws the two rectangles. The first is drawn red, and the second is drawn blue.
- Change the red rectangle's color to green.
- Change the order of the code so the green rectangle appears on top.
Student Instructions
ellipse
You can use ellipse to make a circle.
Do This
- Look at the code that makes the ellipse.
- Add a new ellipse of a different color.
Assessment Opportunities
Use a coordinate system to place elements on a screen, accounting for object size and overlay.
Extensive Evidence
The programmatic drawing is identical to the example and in contained within the seven lines of code.
Convincing Evidence
The programmatic drawing is mostly the same as the drawing, but there may be some slight positioning errors, and there may be extra lines of code.
Limited Evidence
The square has been moved, is purple, and appears in front of the circles.
No Evidence
The picture is either the same, or any changes appear to be unrelated to the assignment.
Teaching Tip
This is a good puzzle to use as an assessment of whether or not students understand the basics of sequencing and positioning shapes in Game Lab.
Student Instructions
Debugging
Often, code doesn't work the first time it runs, and programmers have to debug it. The code below is supposed to make the picture on the right, but the programmer got confused about which order the code should be in, as well as how to put a square in the right place on the screen.
Do This
- Look at the code in the workspace.
- Change the code so it makes the picture on the right.
- (You'll need to move one line of code AND change the coordinates of the square.)
- Plotting Shapes in Game Lab
- Teacher Overview
- Student Overview
Simplified Shapes
The rect and ellipse commands that students were introduced to in this lessons are simplified versions of the full commands that they will see later. This allows the class to focus solely on the placement of shapes on the coordinate plane before also worrying about the width and height of those shapes.
Student Instructions
Challenge: Draw an Image
Check with your teacher before starting any of the challenges.
In the previous lesson you and your partner created several interesting images. See if you can recreate one of them using code.
Student Instructions
Challenge: Face
Check with your teacher before starting any of the challenges.
Write a program that uses rect, ellipse, and fill to create the face on the right. The colors used are "lightblue", "red", and "lightgreen".
Once you've finished, add your own personal touches to the image.
- 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-13 - Decompose problems and subproblems into parts to facilitate the design, implementation, and review of programs.
- 2-AP-19 - Document programs in order to make them easier to follow, test, and debug.