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

Support

Report a Bug

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
  • (click tabs to see student view)
View on Code Studio

Teaching Tip

Student Instructions

  • Prediction
  • 2
  • (click tabs to see student view)
View on Code Studio

Student Instructions

Predict

Read the code below and make a prediction.

  • What will show on the screen?
  • Where will it be displayed?
  • Skill Building
  • 3
  • 4
  • (click tabs to see student view)
View on Code Studio

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 text block to write in a different part of the screen.
View on Code Studio

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 textSize block to make the word "large" the biggest.
View on Code Studio

Student Instructions

Try out your text skills on these activities.


Choose from the following activities:
a
Debug: Snake

Change the order so that the text appears above the bars, but the snake is behind it.

b
Debug: Flying Riddle

Fix the bug so that the text appears.

View on Code Studio

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.

View on Code Studio

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
  • (click tabs to see student view)
View on Code Studio

Assessment Opportunities

Key Concepts:

Place text on the screen using a coordinate plane, use arguments to change the appearance of text.

Assessment Criteria:
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.
View on Code Studio

Student Instructions

Try out these new blocks and challenges.


Choose from the following activities:
a
Text Color

Learn how to change the color of your text.

b
White Text on White Background

Learn how to make text stand out with a colorful stroke.

c
Wrap Text

Learn how to make big text fit inside a text box.

d
Free Play

None

View on Code Studio

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.
View on Code Studio

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.
View on Code Studio

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.
View on Code Studio

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.