Lesson 9: Text
Overview
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, students 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. Students who complete the assessment early may go on to learn more challenging blocks related to text properties.
Purpose
This lesson introduces text, which students will need as they begin to build more complex programs (e.g. games with scoreboards). This is the last type of element that students will be placing on the screen. After this, students will focus on how they can control the movement and interactions of these elements.
Agenda
Lesson Modifications
Warm Up (5 min)
Activity (35 min)
Wrap up (5 min)
View on Code Studio
Objectives
Students will be able to:
- Place text on the screen using a coordinate plane.
- Use arguments to control how text is displayed on a screen.
Links
Heads Up! Please make a copy of any documents you plan to share with students.
For the Teachers
- Text - Slides
Teaching Guide
Lesson Modifications
Attention, teachers! If you are teaching virtually or in a socially-distanced classroom, please see these modifications for Unit 3.
Warm Up (5 min)
Journal
Display: Display the cartoon for students to see.
Prompt: Look at the cartoon that was made in Game Lab. What do you think the alien should be saying?
Share: Allow volunteers to share out their ideas.
Remarks
We've had a lot of fun drawing things and using our sprites, but there's been one thing missing from our Game Lab pictures: text! Today we're going to learn how to add text to Game Lab projects.
Question of the Day: How can we use text to improve our scenes and animations?
Activity (35 min)
Transition Send students to Code Studio.
Wrap up (5 min)
Journal
Discussion Goal
Student answers to the question may vary, but some similarities are that they both use the coordinate plane, and that they are drawn automatically, unlike sprites, which must use the drawSprites command. One possible difference that it is more difficult to control the exact size of text, since the amount of text and font size are not as specific as height and width parameters.
Question of the Day: How can we use text to improve our scenes and animations?
Prompt: You've drawn with both text and shapes on the screen.
- What are two ways drawing with text is similar to drawing shapes?
- What is one way that drawing with text is different from drawing with shapes?
Share: If there is time, allow students to share out their answers.
- Lesson Overview
- 1
Teaching Tip
- Sprite Scene Planning - Activity Guide Exemplar (PDF | DOCX)
Student Instructions
- Prediction
- 2
Student Instructions
Predict
Read the code below and make a prediction.
- What will show on the screen?
- Where will it be displayed?
Student Instructions
Text
You can put text anywhere you'd like on the screen using text. Read the documentation by clicking on the block in the toolbox to see how to change the size and color of your text.
Do This
- Change the displayed text in the provided code.
- Add a second
textblock to write in a different part of the screen.
Student Instructions
Text Size
You can change the size of the text using the textSize() block.
Do This
- Read the code to see how it works.
- Add a new
textSizeblock to make the word "large" the biggest.
Student Instructions
Try out your text skills on these activities.
Choose from the following activities:
Change the order so that the text appears above the bars, but the snake is behind it.
Fix the bug so that the text appears.
Student Instructions
Debug
This scene has all the right code, but it's not in the right order. The scene should look like the image to the right. Can you reorder the blocks so that each part of the scene is drawn in the correct order?
Hint: You often want to call drawSprites() at the very end of your program so the sprites are on top of your background, but for some designs you may want to call drawSprites() earlier so that your sprites are on top of some shapes but below others.
Student Instructions
Debug Text
This scene is supposed to draw a cartoon, but it has a bug.
| What I expected to happen | What happened instead |
|---|---|
| The image shows on the screen. | The code doesn't run at all, |
Do this
- Run the code, and see the error message.
- Look for clues as to where the big is in the code.
- Once you have found the bug, fix it.
- What clues helped you to find the problem?
- Assessment
- 6
Assessment Opportunities
Place text on the screen using a coordinate plane, use arguments to change the appearance of text.
Extensive Evidence
Two pieces of text appear on the screen in reasonable places, and the text pieces are different sizes.
Convincing Evidence
The text block is used, and it appears on the screen in a reasonable place.
Limited Evidence
The text block is used, but the text does not appear completely on the screen.
No Evidence
No text blocks are used, or it contains so many errors that the program cannot run.
Student Instructions
Add Text
Here is a scene, but it needs text.
Do this
- Add two pieces of text to the following scene.
- Make the two pieces of text different sizes.
Student Instructions
Try out these new blocks and challenges.
Choose from the following activities:
Learn how to change the color of your text.
Learn how to make text stand out with a colorful stroke.
Learn how to make big text fit inside a text box.
None
Student Instructions
Text Color
You can change the color of your text using the fill block.
Do This
- Read the code to see how it works.
- Add a new block to make the word "sky" a different color.
- Add more text with even more colors.
Student Instructions
White Text on White Background
You can add a border to your text using the stroke() command, shown below. Like other shapes, you can also use the strokeWeight() command to change the thickness of the stroke. By running the code below, you'll notice that the normal stroke weight for text doesn't give it much contrast when the background is the same color.
Do This
- Read the code to see how it works.
- Add a
strokeWeight()command to make the text stand out more.
Student Instructions
Wrapping Text
You already know that the first two parameters to the text() block indicate the upper-left corner of the text area. There are also two more optional parameters that are hidden by default. These last two parameters indicate the bottom-right of the text area. If all 5 parameters are used, Game Lab will try to fit the text inside the rectangle defined by the two points.
Do This
- Read the code to see how it works.
- In Block Mode, use the arrow buttons on the
text()block to add the optional parameters. - Enter values into the optional parameters that will make the text fit on the screen.
- Hint: Use values for x1 and y1 that are near the bottom right corner of the screen.
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-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-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.