Create Your Own Sprite
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.
- Understand what a sprite is.
- Be able to create their own sprite.
- 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 How to Create Pixel Art and Animations with Piskel Tutorial 1 - What is Piskel?
- To save the sprite you create, you will need to create a login and password or login with Google.
- You can choose to make your sprite private or public for others to use.
See Accommodations Page and Charts on the 21things4students.net site in the Teacher Resources.
Directions for this activity:
- 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.
- The teacher will introduce Piskel to the students.
- The students will practice first by going to Create and learn how to use all the features to create their Piskel.
- Show the students the video How to Create Pixel Art and Animations with Piskel Tutorial 1 - What is Piskel?
- Have the students log in to save their sprites for their coding projects.
- Have them watch the video Stencyl: Creating a Walking Animation from Piskel if they need assistance making their sprite walk.
- 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:
- Check for understanding
- Create a rubric to assess the sprite and its features.
MITECS COMPETENCIES & ISTE STANDARDS
MITECS: Michigan adopted the "ISTE Standards for Students" called MITECS (Michigan Integrated Technology Competencies for Students) in 2018.
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.
Devices and Resources
Device: PC, Chromebook, Mac
Browser: Chrome, Safari, Firefox, Edge, ALL
CONTENT AREA RESOURCES
Create a short story to base the game and sprite on.
Create the sprite in art class.
This task card was created by Melissa White, 21Things Project Manager, REMC Association of Michigan, April 2018.