Grade 5

Create Your Own Sprite

Innovative Designer

Overview‚Äč

When students are learning to code they use often sprites as icons to move around the screen. When you hear the word sprite, you think of an item that may be small in size, but in web design, a sprite actually refers to a large image composed of several variations of smaller images. 

Piskel is a free online sprite creator for creating animated sprites and pixel art. If you sign in, you can save your sprite to your own gallery. 

Learning Objectives

Students will:

  • Understand what a sprite is.
  • Be able to create their own sprite.

Vocabulary

  1. Sprite: A sprite is a type of stand-alone computer graphic element that has evolved along with modern computer graphics technologies. A sprite is defined as a two-dimensional image or animated image that plays a specific role, often independently manipulated, within a larger image environment.

    Sprites are also known as icons.

Pre-planning

Accommodations

Steps

  1. The students will be learning about coding in the classroom and want to be able to create their own sprite to use in a coding project. 
  2. The teacher will introduce Piskel to the students. 
  3. The students will practice first by going to Create and learn how to use the all the features to create their piskel. 
  4. Show the students the video How to Create Pixel Art and Animations with Piskel Tutorial 1 - What is Piskel?
  5. Have the students login to save their sprites for their coding projects. 

Additional Activity:

  • Have them watch the video Stencyl: Creating a Walking Animation from Piskel if they need assistance making their sprite walk. 
  • Show the students the shortcuts icon in the bottom left corner if they would like to use shortcuts when creating their sprite. 

Assessment Options

  • Observations
  • Check for understanding
  • Create a rubric to assess the sprite and its features. 

ISTE Standards

Innovative Designer
4a. Students know and use a deliberate design process for generating ideas, testing theories, creating innovative artifacts or solving authentic problems.
4b. Students select and use digital tools to plan and manage a design process that considers design constraints and calculated risks.
4c. Students develop, test and refine prototypes as part of a cyclical design process.

MITECS: Michigan adopted the "ISTE Standards for Students" called MITECS (Michigan Integrated Technology Competencies for Students) in 2018.

Devices and Resources

Device: PC, Chromebook, Mac

Browser: Chrome, Safari, Firefox, Edge, ALL

Websites:
How to Create Pixel Art and Animations with Piskel Tuturial 1

Piskel

Stencyl: Creating a Walking Animation from Piskel

CONTENT AREA RESOURCES

ELA

  • Create a short story to base the game and sprite on. 

Integrated Arts

  • Create the sprite in art class. 

Credits
This task card was created by Melissa White, 21Things Project Manager, REMC Association of Michigan, April 2018.