Lesson 6: Sprites
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.
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.
Warm Up (5 minutes)
Wrap Up (5-10 min)
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
- (Optional) Print a copy of Sprite Scene Planning - Activity Guide for each student
For the Teacher
- Sprite Scene Planning - Exemplar
For the Students
- Sprite Scene Planning - Activity Guide
- Property - Attributes that describe an object's characteristics
- Sprite - A graphic character on the screen with properties that describe its location, movement, and look.
Warm Up (5 minutes)
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?
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)
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.
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: Allow students to share their Sprite Scenes. Encourage students to reflect on their scenes and identify ways in which they'd like to improve.
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).
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.
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.
var sprite = createSprite(200, 200)under the comment
- You can ignore the yellow triangle warning for now. It's just telling you that you haven't used your sprite yet.
drawSprites()under the comment
- 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).
When run, where will the sprite
mySprite be located?
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.
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.
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.
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:
Upload your own image
You can also use the Animation tab to upload or draw your own image.
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 your
kitesprite 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.
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.
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
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.
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
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
text and how to compose a scene.
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.
- 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.
Create Your Scene - Sprites
With your background in place, it's time to add your sprites.
- 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.
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.
Create Your Scene - Text
The final piece of your scene is to add text.
- Add a
text()command for each separate line of text.
- If necessary, use
textSize()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
Check with your teacher before starting this challenge.
Now that you've finished your scene, consider adding to it or creating another.
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.