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 an on screen element with properties that control 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
-
Create and use a sprite
See levels 12 and 17 on Code Studio.
-
Use dot notation to update a sprite's properties
See level 17 on Code Studio.
Agenda
Warm Up (5 minutes)
Activity (45 min)
Wrap Up (5-10 min)
Assessment
View on Code Studio
Objectives
Students will be able to:
- Create and use a sprite
- Use dot notation to update a sprite's properties
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
- 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
Activity (45 min)
Introduction to Sprites
Distribute: (Optional) pass out copies of the 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)
- Video: Introduction to Sprites
- Teacher Overview
- Student Overview
Discussion Goals
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.
Questions to Consider
- What is a sprite?
- What are properties?
- What problem do sprites solve?
- 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
- Teacher Overview
- Student Overview
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.
Questions to Consider
- What are the steps to adding an image to a sprite?
- What are the different ways to get an image?
- 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.
Student Instructions
Student Instructions
Adding Text
You can put text anywhere you'd like on the screen using text.
Do This
- Change the displayed text in the provided code.
- Add a second
textto 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?
- Sprite Scenes
- Student Overview
Sprite Scenes
By combining shapes, sprites, and 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 how to compose a scene.
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.
Assessment Opportunities
Create and modify objects (sprites) to manage the complexity of on-screen elements. Use dot notation to get and set sprite properties.
Extensive Evidence
At least one sprite is created, given an animation, scaled to a good size, and drawn to the screen. The sprite variable has a reasonable name. drawSprites is called after all sprite properties have been updated.
Convincing Evidence
At least one sprite is created, given an animation, and drawn to the screen. The sprite variable has been renamed.
Limited Evidence
At least one sprite has been created and drawn to the screen. There may be problems with the animation or conflicts from using the same variable name for multiple sprites.
No Evidence
No sprites are created.
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.
Student Instructions
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.
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-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.