Objective 2

Objectives for today’s class: Students will design their own Sprites and enhance their scenes.

Outline:

• Design Thinking Intro 
• Intro to Sprites
  • Sprite Gallery
  • DIY Sprites
• Hands-on Simulation with Sprites
• Checkpoint Activity 
• Creative time

—————————————————————————————————–

• Before students arrive make sure you have the class objective written on the board

Activity 1: Design Thinking Intro

Duration:  15 minutes

• Ask students to imagine that they are an author writing their very own book. You need to create your own story from scratch. What are the different elements you need to consider?
  • Characters – are there one or many? What kind of characters (hero, antagonist, background character, etc.)
  • Background – what setting does the story take place in? What universe, what time period, what does it look like?
  • Storytelling – what events are taking place? Where is the plot going? Does the story make sense? Is the story entertaining to the audience?
  • Theme – Why are we telling this story? What is the the moral of the story? What morals/ethics do we want to portray to the audience?
• Divide students into small groups of 3-6. 
• Ask each group to decide on a book, movie, TV show, fairytale, or story that they are all familiar with. 
• Have them identify the different elements of the story (characters, background, storytelling, theme)
• Have each group assign roles for the different characters and ask them to recreate a scene from the story – let students get creative with this. 

Activity 2: Sprites Hands-On Simulation

Duration:  30 minutes

• Now, we’ll be focusing on sprites! Has anyone heard of Sprite before or seen a Sprite anywhere? Call on students to share their answers. 

• Imagine you were a sprite in a video game.
• Discuss as a whole class and ASK students to THINK-PAIR-SHARE about the following:
  • What type of sprite they would like to be represented by in the game.
  • What types of clothes would they wear?
  • Would they have a hat or a cape?
  • Would they have any special sound effects?
  • What would their special abilities be?
• With THINK-PAIR-SHARE make sure to:
  • Have students work together to solve a problem or answer a question about the assigned questions.
  • This strategy requires students to (1) think individually about a topic or answer to a question; and (2) share ideas with classmates.

• Let students know that sprites are 2-dimensional custom characters in video games that represent your character!
  • Famous examples of sprites are Animal Crossing, Mario and Pokemon.

• Now, have students open up their laptops and follow along as you SCREEN SHARE and walk students through the following activities on MakeCode Arcade.

• Students can open up their devices and follow along, but make sure they follow along and don’t get distracted by other applications

• Now, we’ll be focusing on sprites! Has anyone heard of Sprite before or seen a Sprite anywhere? Call on students to share their answers. 

• Imagine you were a sprite in a video game.
• ASK students to put their devices face down or close them, and turn to their classmate next to them and discuss:
  • What type of sprite they would like to be represented by in the game.
  • What types of clothes would they wear?
  • Would they have a hat or a cape?
  • Would they have any special sound effects?
  • What would their special abilities be?
• Once you give students a few minutes, have a few students share with the class

• Let students know that sprites are 2-dimensional custom characters in video games that represent your character!
  • Famous examples of sprites are Animal Crossing, Mario and Pokemon.

• Now, have students open up their devices and follow along as you SCREEN SHARE and walk students through the following activities on MakeCode Arcade.

1. Once students open up their devices. Make sure they use Chrome if accessible.
2. Make sure to screen share and go to https://arcade.makecode.com/.  If students are having difficulty finding the site, ask them to Google MakeCode Arcade and help them get set up on their device. Only proceed once all students are ready to go. 

3. Click on New Project, to create a new project
4. Give a name to your project and click on Create

5. Start with the On Start block

4. Let’s review the components of a sprite. Feel free to write the following notes on the board so it’s easy for students to follow along.

A sprite consists of a: 

Name – 

• Ask students to raise their hand if they have a name? 
• Ask students why names are important? 
• A Sprite’s name is used to distinguish it from other sprites or objects in your game. Give each sprite a meaningful name.

Image – 

• A sprite’s image is the look of a sprite.
• Ask students to describe from their sketch how they imagine their sprites looking? 
  • Call on a few students to share their responses. 
• Ask students to raise their hand for the following: 
  • Who wants their Sprite to look happy? 
  • Who wants their Sprite to look scary? 
  • Who wants their Sprite to look surprised?  

Type – 

• A sprite’s type defines the category for the sprite. For example, in an alien invader game, the types could include: aliens, spaceships, missiles etc.
• Ask students the following: 
  • What type of Sprite do you want to create? 
    • Call on a few students to share their responses. 

6. Let’s create a spaceship sprite using an existing image. Select the menu option 
7.  Find , drag and drop it onto the canvas 

8. Lets keep the name of the sprite as mySprite
9. Click on the gray box , the image editor will open. The image editor is used to design an image for the sprite, or select from one of the predefined images or from your custom image library 
10. For this step we are going to use a predefined image for the sprite.  Click on the Gallery button  on the top of the window and you should see a palette of images

11. Scroll down the list of images and look for a spaceship image

12. Select one of the images you like, by clicking on the image. On selection of an image, it will be displayed in the editor

13. Next click on  button to close the editor

14. Now the sprite image will be displayed in the block

15. The sprite should now display on the game simulator

16. Explore the image editor, is there a different way to select an image instead of scrolling through the list of images? Hint: Use the filter button 

• Give students 2-3 minutes to explore on their own and navigate through the different sprites in the image gallery 
• Ask students to identify some of the cool sprites they find. What types of games do they want to create with these sprites?
  • Call on a few students to share their responses  
• Call on students to identify the following and come up to the board to show the class where they find the following sprites: 
  • Fish sprite
  • Monkey sprite
  • Sofa sprite
  • Shark sprite
  • Plane sprite
  • Bat sprite

Activity 3: Designing Your Own Sprites 

Duration: 10-15 minutes

• Now, we’re going to design our own sprites!

• What’s even more fun is designing your own sprites! Let’s design our own Sprite using the MakeCode Arcade Image Editor

Part 1: Breaking Down the Components of the Image Editor

1. Ask students to closely pay attention. Drag and drop on the Canvas

2. Lets keep the name of the sprite as mySprite
3. Click on the gray box , the image editor will open

4. Let’s review the components of the image editor

• Ask students to share what they observe with the following tools and to take guesses as to what each tool does. This tools section is on the top left corner of their screens
  • Call on students to come to the board and as you navigate your mouse through each of the tool icons, ask them to take a guess as to what it does 

Part 2: Let’s Make a Smiley Face

1. Let’s start by selecting the Circle Tool and then selecting a color. 
2. Click on the center. The location of your cursor should be (8,8). Move the cursor upward or sideways and you should see the circle expanding. Stop when you are closer to the border 

3. Once you have a circle, select the Pen tool and draw two eyes and mouth for the smiley face

4. Enter a name for your image

5. Next click on the button to save the image. You should now see the block with the smiley face and the smiley face on the game simulator

• To get students more comfortable with creating Sprites, create a few more examples with them. Try playing around with these examples ahead of class so you’re comfortable. With the class create:
  • Sad face sprite
  • Pacman sprite
  • Tree sprite
• When you see that students are comfortable, then have them follow along and create their sprites on their own. It’s good to walk students through a few examples so they understand the step by step process of how to design their own Sprite.

Checkpoint Activities: 

These checkpoint activities let students get creative and explore creating Sprites on their own. Help a student out if they’re stuck or have a question and walk around and observe their creations!  

1. Have students create a sprite of a car or some type of vehicle?
2. Have students create a sprite of some type of animal?
3. Have students create an enemy sprite? What do they imagine this enemy would look like?

• Now, have students take a look at the Sprites their classmates created. If they would like, students can continue creating more Sprite designs. 

Walking Sprite

• Find set mySprite to in Sprites. Drag it into the on start. Click on mySprite, select rename variable…, and change the name to Hero. Open the image editor for Hero, and select a person sprite from the gallery of preset images. 
• Find move mySprite with buttons in Controller. Drag and drop it onto the on start. Change the variable name from mySprite to Hero.

Activity 3: Checkpoint

Duration:  15 minutes

• This is a perfect time for students to test their knowledge of sprites and walking sprites while creating an example on their own!
• Student Task:
  • Create a new file and name it “Snow White and the Seven Dwarves”
  • 1 main character princess sprite, named “Snow White”
  • The princess sprite can move using the keys
  • 7 dwarf sprites, named “Happy”, “Grumpy”, “Dopey”, “Bashful”, “Sleepy”, “Sneezy” and “Doc”.
  • All sprites have appropriate variable names
• Instructors can watch the video tutorial which demonstrates how to complete the checkpoint activity

Activity 4: Creative Time

Duration:  Remainder of Class Time

• Once students are finished with the checkpoint activity and you review their work, give them time to pick their own themes, Sprites, and game objectives to design their own game. Encourage them to include sprites and walking sprites.
• If students are stuck on idea help them brainstorm by asking them the following questions:
  • What characters are you including (hero, villain, etc.?)
  • What story are you trying to tell?
  • What is the theme?
  • Which sprites can move?