Lesson 6: Sprites

Game Lab

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

Links

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

For the Teacher

For the Students

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

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).

  • Intro to Sprites
  • 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

When run, where will the sprite mySprite be located?

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

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 setAnimation command to change the look of the sprite.
  • Try out all the different images.
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

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 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

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.

View on Code Studio

Student Instructions

  • Making Scenes
  • 13
  • 14
  • (click tabs to see student view)
View on Code Studio

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.

View on Code Studio

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?

View on Code Studio

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 text and how to compose a scene.

View on Code Studio

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.
View on Code Studio

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.

View on Code Studio

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() and 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.

View on Code Studio

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.

View on Code Studio

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.