Lesson 8: Sprite Properties

Overview

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. Students start with a review of what a sprite is, then move on to Game Lab to practice more with sprites, using their properties to change their appearance. They then reflect on the connections between properties and variables.

Purpose

In the last lesson, when students were introduced to sprites, they focused mainly on creating a sprite and assigning it an animation. This lesson starts to dig into what makes sprites such a powerful programming construct--that they have properties that can be modified as a program is running. This lays the foundation for much of what students will be doing in the rest of the unit in terms of accessing and manipulating sprite properties to create interesting behaviors in their programs.

Assessment Opportunities

Use dot notation to update a sprite's properties

See Code Studio level 6.

Agenda

Lesson Modifications

Warm Up (5 min)

Activity (40 min)

Wrap Up (5 min)

View on Code Studio

Objectives

Students will be able to:

  • Use dot notation to update a sprite's properties

Links

Heads Up! Please make a copy of any documents you plan to share with students.

For the Teachers

Vocabulary

  • Property - A label for a characteristic of a sprite, such as its location and appearance

Introduced Code

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)

Prompt: What is your definition of a sprite? What sprite properties do you know how to use? What other sprite properties might be useful?

Allow students time to reflect on their own and then with a partner before sharing out to the entire group. It's okay if students do not have a canonical definition of a sprite, but they should recognize that a sprite is a part of the program that has several different properties that control its location and appearance.

Remarks

So far, we've only been able to control our sprite's location and animation, but today, we're going to learn how to update other sprite properties so we can make even better programs.

Question of the Day: How can we use sprite properties to change their appearance on the screen?

Activity (40 min)

Group: Put students in pairs.

Transition: Send students to Code Studio.

Wrap Up (5 min)

Discussion Goal

Students may note that sprite properties and variables are similar in that they both store information. They are different in that variables can be anything, but sprites have particular properties that are used in certain ways on the screen.

Question of the Day: How can we use sprite properties to change their appearance on the screen?

Journal Prompt: What is one way sprite properties are the same as variables? What's one way that sprite properties are different from variables?

Discuss: Allow students to discuss in pairs or small groups before sharing out to the entire group.

  • Lesson Overview
  • 1
  • (click tabs to see student view)
View on Code Studio

Student Instructions

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

Student Instructions

What will the program show?

a bee sprite in the middle of the screen

a bee sprite in the bottom right corner

two bee sprites, one in the middle and one in the bottom right corner

three bee sprites, all in different places

nothing, there will be an error

  • Skill Building
  • 3
  • 4
  • (click tabs to see student view)
View on Code Studio

Student Instructions

Sprite Properties

Sprite properties keep track of all the information your program needs to know about a sprite, such as its size and location. You can change the values of these properties just like you do variables, and see the results when your sprite is drawn to the screen.

Do this

  • Run the program to see where the sprites appear.
  • Change the x and y properties of the paint brush sprite to move it to the palette.
View on Code Studio

Student Instructions

New Properties

Sprites have lots of properties. Check out the two new blocks in this activity and try them out for yourself. Notice that different sprites can use the same animation, and still look different because of properties.

Do this

  • Run the program to see how the rotation and scale blocks make the first two notes look different.
  • Use the rotation and scale blocks on the last two notes to make them look different, too.
View on Code Studio

Student Instructions

Try out the sprite properties you have learned here


Choose from the following activities:
a
Scale Property

Use the scale property to make the animals the right size.

b
Rotation Property

Rotate the cars so they fit in the traffic lanes.

View on Code Studio

Student Instructions

Scale Property

The scale property changes the size of the sprite. Scale of 1 is the normal size, scale of 2 is twice as big, and a scale of 0.5 is half as big.

Do this

  • Use the scale property to make it look like the picture.
  • Make sure that each animal is as big as it should be.
  • Make sure the fish fits in the pond.
View on Code Studio

Student Instructions

Rotation

The .rotation sprite property rotates an image by between 0 and 360 degrees. The image is rotated clockwise. For example, mySprite.rotation = 90 will turn it one quarter rotation to its right.

Do This

  • Add .rotation blocks to the code to make all of the cars look like they are traveling correctly down the roads.
  • Assessment
  • 6
  • (click tabs to see student view)
View on Code Studio

Student Instructions

Make it Fit!

The food is way too big to fit on the plate. Use your knowledge of sprite properties to make it fit.

Do this

  • Run the program to see how big the food is.
  • Use sprite properties to scale all of the food sprites down so they fit on the plate.
View on Code Studio

Student Instructions

Try these new challenges with sprite properties


Choose from the following activities:
a
New Block : Tint

Adjust the sprite's color with tint.

b
New Blocks : Height & Width

Stretch your sprite horizontally or vertically.

View on Code Studio

Student Instructions

Tint

Tint is a property that will overlay a color on top of a sprite to tint it. This tint doesn't change the existing colors of a sprite, but is more like putting a pane of colored glass over the top of the sprite.

Do This:

Using either the sprite already created for you or with any other sprites of your choosing, play around with the tint property and see how it works and how it changes on different colored sprites!

View on Code Studio

Student Instructions

Height and Width

You learned about the scale property, which grows or shrinks a sprite while keeping their height to width ratio the same. But it is possible to only change the height or width of a sprite with other properties!

Do This:

Using either the sprite already created for you or with any other sprites of your choosing, play around with the height and width properties and think about when you would want to use these properties versus using the scale property.

Standards Alignment

View full course alignment

CSTA K-12 Computer Science Standards (2017)

AP - Algorithms & Programming
  • 2-AP-11 - Create clearly named variables that represent different data types and perform operations on their values.
  • 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.