Lesson 7: Sprites

Overview

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, students are 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 will greatly increase the complexity of what they can draw on the screen.

Purpose

Keeping track of many shapes and the different variables that control aspects of those shapes can get very complex. There will be lots of variables with different variable names. Instead, computer scientists created something called an object which allows for one variable name to control both the shape and all its aspects. In Game Lab we use a certain type of object called a sprite. A sprite is just a rectangle with properties for controlling its look. Properties are the variables that are attached to a sprite. You can access them through dot notation.

Using the Animation Tab, students can create or import images to be used with their sprites. Later on, these sprites will become a useful tool for creating animations, as their properties can be changed and updated throughout the course of a program.

Assessment Opportunities

  1. Create and use a sprite

    See levels 12 and 17 on Code Studio.

  2. Use dot notation to update a sprite's properties

    See level 17 on Code Studio.

Agenda

Lesson Modifications

Warm Up (5 min)

Activity (40 min)

Wrap Up (5 min)

View on Code Studio

Objectives

Students will be able to:

  • Create and use a sprite

Preparation

  • (Optional) Print a copy of the activity guide for each student

Links

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

For the Teachers

Vocabulary

  • Dot notation - the way that sprites' properties are used in Game Lab, by connecting the sprite and property with a dot.
  • Property - A label for a characteristic of a sprite, such as its location and appearance
  • Sprite - A character on the screen with properties that describe its location, movement, and look.

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)

Discussion Goal

The goal here is to get students thinking about all of the different values that go into drawing a single shape on the screen, and how many more values they may need to control a more detailed character in a program. If students are struggling to come up with ideas, you might use some of the following prompts: How do you tell a shape where to go on the screen? How do you tell a shape what size it needs to be? How do you tell a shape what color it should be? What about its outline? What if you wanted to change any of those values during your program, or control other things like rotation?

How Much Information?

Review: So far we've written programs that put simple shapes on the screen. List of all of the different pieces of information that you have used to control how these shapes are drawn.

Prompt:If you wanted to create programs with more detailed images, maybe even characters that you could interact with, what other pieces of information might you need in your code?

Share: Allow students to share out their lists.

Remarks

Today we'll learn how to create characters in our animations called sprites. These sprites will help us keep track of all of the information that we need in our programs.

Question of the Day: How can we use sprites to help us keep track of lots of information in our programs?

Activity (40 min)

Introduction to Sprites

Transition: Send students to Code Studio

Wrap Up (5 min)

Key Vocabulary:

  • Sprite - A character on the screen with properties that describe its location, movement, and look.
  • Property - A label for a characteristic of a sprite, such as its location and appearance.
  • Dot Notation - the way that sprites' properties are used in Game Lab, by connecting the sprite and property with a dot.

Discussion Goal

This discussion prompts students to think about the different properties that a sprite might have, and prepares them for the next lesson, which explicitly covers sprite properties.

Journal

Question of the Day: How can we use sprites to help us keep track of lots of information in our programs?

Prompt: So far we've been able to chance a sprite's location and image. What else might you want to change about your sprites?

Share: Allow students to share out their ideas.

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

Student Instructions

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

Student Instructions

Exploring Sprites

This program uses some new blocks that you haven't seen before.

Do This

With your partner, read the code and discuss how you think it works. Change some lines and see what happens. What do you think each line is doing?

  • Video: Introduction to Sprites
  • 3
  • (click tabs to see student view)
View on Code Studio

Teaching Tip

Discussion Goals

Key Vocabulary:

  • Sprite - A character on the screen with properties that describe its location, movement, and look.
  • Property - A label for a characteristic of a sprite, such as its location and appearance.
  • Dot Notation - the way that sprites' properties are used in Game Lab, by connecting the sprite and property with a dot.

Sprites are a very complex concept, and students may have difficulty understanding exactly what they are. The most important aspect for students to understand is that sprites allow them to organize a lot of information about something that they want to draw to the screen.

Students should make the connection between properties and variables, that both hold information that their program needs to run. Properties are accessed through their sprites, and Game Lab sprites already have specific properties that are automatically created when students create each sprite, such as x position, height, and rotation.

Sprites solve the problem of organizing a lot of information about how something should be drawn to a screen. Rather than creating new variables to hold all of that information, sprites use properties to hold all of the information about one thing that is drawn to the screen.

Content Corner: The sprite is a type of data called an object. While we aren't yet explicitly introducing the concept of objects, students do need to understand that a sprite is a different type of value from the ones we've seen before, one that can hold references to many more values.

Student Instructions

Questions to Consider

  • What is a sprite?
  • What are properties?
  • What problem do sprites solve?
  • Skill Building
  • 4
  • 5
  • 6
  • (click tabs to see student view)
View on Code Studio

Student Instructions

Sprites

Creating Sprites: creates a new sprite and assigns it to a variable. The default name is sprite, so you'll want to change it to something more meaningful.

Drawing Sprites: Sprites only appear on the screen when you draw them there. Calling will draw all of your created sprites on the screen.

Do This

This program includes comments that let you know where to place code but otherwise is blank. Your program should look like the image on the right.

  • Add var sprite = createSprite(200, 200) under the comment Creating Sprites.
    • You can ignore the yellow triangle warning for now. It's just telling you that you haven't used your sprite yet.
  • Add drawSprites() under the comment Drawing.
  • Run the code to draw your first sprite on the screen.

Hint: Sprites are drawn from their center, which means that center of the square (not the top left corner) is at (200, 200).

View on Code Studio

Student Instructions

Debug

This program should create two new sprites, one on the left of the screen and one on the right, but it's only drawing one. You don't need to add any code, just rearrange the code already present to make sure that both sprites show up like the picture on the right.

View on Code Studio

Student Instructions

Adding Animations

This program draws four sprites to the screen, and one of them has an animation from the Animation Tab!

Do This

  • Run the code to see what happens.
  • Look in the Animation Tab to see what animations are available to you Show me where
  • Feel free to alter your animations or choose a new one.
  • Use the setAnimation command to change the look of your other sprites.
  • Video: The Animation Tab
  • 7
  • (click tabs to see student view)
View on Code Studio

Teaching Tip

Discussion Goals

Make sure students understand that they will need to both create the image (or animation) in the Animation Tab and then add the animation to the sprite using the setAnimation block. Students may be confused by the use of the word "animation" for single images, but in Game Lab, still images are considered "animations" with only one frame.

Students can use an animation already in the animation tab library, upload one from their computer, or create their own using the provided drawing tools. Additionally, students can use the drawing tools to modify the images they have chosen from the library or uploaded.

Misconception Alert!

Many students may now confuse the concepts of a sprite, its animation, and the image that it draws to the screen. In the next few lessons, watch out for this misconception, and reinforce the idea that a sprite's animation is just one of its properties, the one that controls what image is drawn to the screen. Remind students that a single sprite may have different animations throughout the course of the program, just as other properties can change, and that two or more sprites might share the same animation.

Student Instructions

Questions to Consider

  • What are the steps to adding an image to a sprite?
  • What are the different ways to get an image?
  • Skill Building
  • 8
  • 9
  • (click tabs to see student view)
View on Code Studio

Student Instructions

Debug some sprites

This program draws three sprites to the screen, but it's not working yet. The wrong sprite is in front, and one sprite's animation isn't showing up.

Do This

  • Run the code to see what happens.
  • Fix the two problems in the code.

Hint: Just like shapes, sprites are drawn in the order they are created.

View on Code Studio

Student Instructions

View on Code Studio

Student Instructions

Use your new sprite and animation skills to complete these levels.


Choose from the following activities:
a
Where Are the Sprites?

The sprites are being created, but you need to change the code to make the sprites appear

b
Sprite Animations

Fix the names of the animations so that the errors go away

c
Sprite Name

Fix the sprite name so that all three cherries appear

d
Sprite Order

Change the code so that we can see the ladybug and the snail

e
Fish Scene

Get creative and make a fish scene :)

f
Combine Ideas

Create your own scene using both drawing and sprites

View on Code Studio

Student Instructions

Debug: Missing Sprites

Looking at the code below, we can see that many sprites are created, and yet when we run the program, nothing shows up. Can you fix it?

View on Code Studio

Student Instructions

Debug: Sprites Animation Error

Errors are being hit whenever we try to run our program! It looks like something is wrong with our animations, can you try and fix it?

View on Code Studio

Student Instructions

Debug: Sprite Name

The program below is trying to draw the same sprite in three different positions, but only one of them is showing up. What's happening here and can you fix it?

View on Code Studio

Student Instructions

Debug: Sprite Order

Something is wrong with the scene below. Some sprites are behind other sprites when they should be in front of them. Can you fix it?

View on Code Studio

Student Instructions

Create A Scene

We've started you off with three different fish sprites. Using anything else that you want like drawings or other sprites, customize the fish sprites to make a fun looking scene!

View on Code Studio

Student Instructions

Combine Ideas

You have now learned how to draw images as well as create sprites in GameLab now. So using both of these techniques, create a fun scene!

  • Assessment
  • 11
  • (click tabs to see student view)
View on Code Studio

Student Instructions

Create your own sprites

Use what you've learned to create your own sprites. The example is just one way to complete the level. Decide for yourself what you want your sprites to look like.

Do This

  • Go to the animation tab and add at least two animations to your project.
  • In the code tab, create at least two sprites in two different places on the screen.
  • Assign each sprite a different animation.
  • Draw your sprites to the screen.
View on Code Studio

Student Instructions

Try these extra challenges that will help you make your sprites even more special.


Choose from the following activities:
a
Find an image online

Upload an image from another website to complete a kite scene.

b
Draw Your Own Character

Create a sprite animation from scratch.

c
Combine Ideas

None

View on Code Studio

Teaching Tip

Recommended Search Engines

Because we can't know which sites might be blocked in your district, we've avoided pointing students to a specific search engine. Not all search engines make it easy to set Creative Commons filters - some of the easiest include:

Student Instructions

Uploading Images

You can also use the Animation tab to upload! You are going to make a flying kite. You can search the web for an image.

Do This

  • Search online for an image of a kite. Small images with transparent backgrounds work best.
  • Download your kite image.
  • Open the animations tab.
  • Click and then to upload an image.
  • Select the file from your computer.
  • Rename your image so it is easy to remember. To rename it click the text below the image.
  • Back in code mode, use sprite.setAnimation() to make your kite sprite show your new animation.

Don't worry if your kite image is too big! You'll learn how to fix that in the next level.

View on Code Studio

Student Instructions

Drawing your own image

You can also use the Animation tab to draw your own image. You are going to make your own character by drawing it.

Do This

  • Open the animations tab.
  • Click and then to draw your own picture to use as a sprite.
  • Rename your picture so it is easy to remember. To rename it click the text below the picture.
  • Back in code mode, use sprite.setAnimation() to make your character sprite show your new animation.

For now, don't worry if your character picture is too big or small. You'll learn how to resize sprites in the next lesson.

View on Code Studio

Teaching Tip

Recommended Search Engines

Because we can't know which sites might be blocked in your district, we've avoided pointing students to a specific search engine. Not all search engines make it easy to set Creative Commons filters - some of the easiest include:

Student Instructions

Combine Ideas

It's time to combine all the different ways to create sprites and have fun!

Do This

Using the sprites we give you or by uploading images or drawing your own sprites, create a fun scene with different kinds of sprites! Be creative!

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-16 - Incorporate existing code, media, and libraries into original programs, and give attribution.
  • 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.