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.

Students will:

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

Vocabulary Words:

  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.

To prepare for this lesson:

  • Go to the Piskel app on your computer. 
  • Select Create Your Sprite. 
  • To learn how to use all the features of Piskels view the video Walking Animation in Piskel
  • To save the sprite you create, you will need to go to the icon that looks like a disc and save it as a .piskel on your drive. 
  • When the piskel is complete you can export it as an image or animated gif.  

See Accommodations Page and Charts on the 21things4students.net site in the Teacher Resources. 

Directions for this activity:

  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 all the features to create their Piskel. 
  4. Show the students the video Walking Animation in Piskel
  5. Have the students export their piskel as an image or animated gif. 

Additional Activity:

  • Show the students the shortcut's icon in the bottom left corner if they would like to use shortcuts when creating their sprite. 

Different options for assessing the students:

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

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

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.

Device: PC, Chromebook, Mac

Browser: Chrome, Safari, Firefox, Edge, ALL

Websites:
Piskel

Walking Animation with Piskel

CONTENT AREA RESOURCES

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

Create the sprite in art class. 

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