Lesson 6: Sprites
Overview
In order to create more interesting and detailed images, students are introduced to the sprite object. Every sprite can be assigned an image to show, and sprites also keep track of multiple values about themselves, which will prove useful down the road when making animations.
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.
Agenda
Warm Up (5 minutes)
Activity
Wrap Up (5-10 min)
Assessment
View on Code Studio
Objectives
Students will be able to:
- Assign a sprite to a variable
- Use dot notation to update a sprite's properties
- Create a static scene combining sprites, shapes, and text
Preparation
- (Optional) Print a copy of Sprite Scene Planning - Activity Guide for each student
Links
Heads Up! Please make a copy of any documents you plan to share with students.
For the Teachers
- Sprite Scene Planning - Exemplar
For the Students
- Sprite Scene Planning - Activity Guide
Vocabulary
- 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
Teaching Guide
Warm Up (5 minutes)
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?
Think, Pair, Share: So far we've only written programs that put simple shapes on the screen. Come up with a list of all of the different pieces of information that you have used to control how these shapes are drawn.
Prompt: What if we 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?
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. For students who are curious about whether there are other objects in our programs, ask them to see if there are more blocks in the toolbox that follow the same dot notation (such as World.width and World.height)
Remarks
Today we'll learn how to create characters in our animations called sprites. These sprites will be stored in variables, just like you've stored numbers in the past, but sprites can hold lots of pieces of data, which will allow you to create much more interesting (and eventually animated!) programs.
Activity
Introduction to Sprites
Distribute: (Optional) pass out copies of Sprite Scene Planning - Activity Guide. Students can use this sheet to plan out the Sprite Scene they create at the end of this lesson, but the planning can also be completed on scratch paper.
Transition: Send students to Code Studio
Wrap Up (5-10 min)
Share Out
Share: Allow students to share their Sprite Scenes. Encourage students to reflect on their scenes and identify ways in which they'd like to improve.
Assessment
Assessing Sprite Scenes
To assess Sprite Scenes, ask students to do a "talk through" of their code with you. Check to ensure that students know why they sequenced their code the way they did, and in particular look for "dead code", or code that doesn't impact the final scene. At this point it's likely that students are still drawing shapes before they draw the background (which then won't be seen) or that they are calling drawSprites() multiple times (it only needs to be called once).
- Lesson Overview
- Teacher Overview
- Student Overview
- Sprite Scene Planning - Activity Guide Exemplar (PDF | DOCX)
Overview
In order to create more interesting and detailed images, the class is introduced to the sprite object. Every sprite can be assigned an image to show, and sprites also keep track of multiple values about themselves, which will prove useful down the road when making animations. At the end of the lesson, everyone creates a scene using sprites.
Vocabulary
- Property - Attributes that describe an object's characteristics
- Sprite - A graphic character on the screen with properties that describe its location, movement, and look.
Introduced Code
Resources
- Video: Introduction to Sprites
- Student Overview
- Creating Sprites
- Student Overview
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 commentCreating 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 commentDrawing. - 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).
Student Instructions
When run, where will the sprite mySprite be located?
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.
- Video: The Animation Tab
- Student Overview
- The Animation Tab
- Student Overview
Student Instructions
Images
Over on the Animations Tab, you'll see three images that have been loaded for you. You can get to the animations tab by clicking the Animation button above the display area.
Once you have created a sprite, you can use the sprite.setAnimation() command to change the look of your sprite from a rectangle to a picture. All the images you have loaded in the Animation Tab show up in the sprite.setAnimation() dropdown. The alien is set up for you as an example.
Do This
Change the sprite to your favorite image from the animations tab.
- A sprite that is set to an image has already been created for you.
- Run the code to see how it works.
- Change the input to the
setAnimationcommand to change the look of the sprite. - Try out all the different images.
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
Upload your own image
You can also use the Animation tab to upload or draw your own image.
Do This
You are going to make a flying kite. You can search the web for an image or create a new animation from scratch by drawing your own kite.
- Download your kite image. Images with transparent backgrounds work best.
- 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 yourkitesprite 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.
Student Instructions
Resizing with Scale
In the Sprites drawer of the toolbox, you'll see a new block called sprite.scale. It lets you change the size of a sprite in relation to its original size. sprite.scale = 1 is the normal size. sprite.scale = 0.5 makes your sprite half as big, while sprite.scale = 2 makes it twice as big.
Do This
The program should already include your newly uploaded image, but it's probably not the perfect size. Use sprite.scale to change the size of your kite sprite.
Hint: the order of your code matters! You need to add sprite.scale after you've created the sprite, but before you draw the sprite with drawSprites(). For clarity, try to keep all of your sprite code together at the top of your program.
- Sprite Scenes
- Student Overview
Sprite Scenes
By combining shapes, sprites, and a new block called text, you can create simple scenes, stories, or comics. While this example is fairly simple, you can combine as many sprites and shapes as you like to create scenes as complex or detailed as you like.
Sketch It Out
Before moving on, take a second to sketch out a scene that you'd like to make at the end of this lesson. Consider the simple shapes that you've used in the past, sprites for your characters, and any text that you'd like on the screen. Once you've sketched out an idea, you'll learn about text and how to compose a scene.
Student Instructions
Adding Text
You can put text anywhere you'd like on the screen using text. Change the displayed text in the provided code, then add a second text to write in a different part of the screen.
Tip: The default text size is pretty small, but you can use the textSize block to change that. You can also use fill to change the color of your text.
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?
Student Instructions
Create Your Scene - Drawing
You're going to start creating a scene of your own. If you haven't already, take a minute to sketch out a picture of your scene (consider using graph paper). Once you have an idea and plan for your scene, start drawing the background.
Do This
- Use a
background()command to fill the screen with a color. - Add any necessary shape commands to draw the non-sprite elements of your scene.
Student Instructions
Create Your Scene - Sprites
With your background in place, it's time to add your sprites.
Do This
- Add or create all of your sprite images in the Animation Tab.
- Create a variable for each sprite at the top of your program and use
setAnimation()to assign the images you created in the Animation Tab. - Call
drawSprites()once at the end of your program.
Hint: You probably 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
Create Your Scene - Text
The final piece of your scene is to add text.
Do This
- Add a
text()command for each separate line of text. - If necessary, use
fill()andtextSize()to change the appearance of your text.
Hint: Most scenes have the text on top of everything else, which would require your text() commands to be the last lines in your program. If, however, you want the text layered in with other elements, you might consider changing the order.
- Challenge: Extend Your Scene
- Student Overview
Challenge: Extend your scene
Check with your teacher before starting this challenge.
Now that you've finished your scene, consider adding to it or creating another.
- Free Play
- Student Overview
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-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.