Teach Kids Pixel Art Animation for Games

Hi my name is Roo, I am a software engineer. Last summer, I was teaching elementary schoolers to code and to make games in Scratch (a week-long summer school class). I noticed that some students were really interested in making their own art for their games, so I would branch off of the teaching plan and show those students how to make their own sprites and to animate game characters. It worked so well that some parents told me their kids would work on their games during their free time at home, so I decided to share this online, hoping it would help someone else.

Grade levels: 4th, 5th

Applicable Subjects: Programming, Art

Learning Objectives: Understand animation concepts, improve creativity, practice interdisciplinary approach for game design.

Step 1: ​In This Instructable, I Will:

• Briefly explain why scratch is a great tool to teach code to elementary schoolers (4th-5th grades work better since they have better motoric skills)
• Explain why Piskel is a great tool for scratch and pixel art animation
• How I taught kids to use Piskel
• How to import your work from Piskel into Scratch
• Show some work made in piskel, like the instructables robot animation above(click to play it!)

If you are on mobile, you can view the animation above, here

Step 2: Why Scratch?

Short answer:

• Works on anything that has a browser
• Teaches fundamental blocks of any programming language
• Is simple enough for kids
• Has A LOT of documentation, resources, tutorials, and lesson plans you can follow
• Is fun!

Long answer:

I taught in a few different schools, and they all had different resources when it comes to computers. Some were great, but others had relatively old and slow computers, and would not allow to install any programs. However, all of them had an internet browser like Chrome, and that is all Scratch needs to work!

Scratch has a very simple interface and comes with a bunch of tutorials. If you go to https://scratch.mit.edu/ and click create sprite you should see tutorials. They are a great tool to teach kids. My favorite is the "make it fly" tutorial.

Step 3: Why Piskel?

• Also works on any browser
• Can be saved online to be accessed later from anywhere
• Easy to learn and use, and really easy to animate
• Has advanced tools like layering

Scratch has a sprite editing tool, but animating in it is not as convenient as in Piskel. Piskel can also output multiple formats like GIF that make it really easy to import into scratch.

Step 4: Making One of the Ghosts From Pac-man

I always teach kids by showing them how to make this character because its easy and it teaches them the most basic tools they need to get started.

Step 5: Go to Piskel

Go to this link https://www.piskelapp.com/

Optionally, you can sign in by clicking the button on the upper right corner. This way you can save your work online.

Whether you choose to sign in or not, just click "Create Sprite" and we will be ready to start!

Step 6: Navigating the Editor

First introduce the tool bar on the left to the students.

The tools are straightforward, if you play around with them for a bit you get a feel them. Maybe very briefly show what they do.

You can set colors at the bottom of the tool bar

Brush size is on top of the tool bar.

Step 7: Select the Pen Tool and Select Orange As the Color

Elementary schoolers wonder off fast, so make sure everyone has the pen tool and color selected. They can of course select any other color if they want

Step 8: Draw the Head of Clyde

Step 9: Then the Outline of the Body

Step 10: Introduce the Paint Bucket Tool and Fill the Body With Color

Step 11: Select White for the Color and Start Drawing the Eye

Step 12: Select Blue Color and Draw the Eye Ball

Step 13: Fill the Eye Ball With White Paint

Step 14: Select the Eye Ball With the Rectangle Selection Tool

This and the next step will be tough for most young students because you have to use keyboard shortcuts

Step 15: Copy and Paste the Eye in the Right Place

After the you select the eye, click Ctrl + C on windows, or cmd + C on mac, to copy it

Hover over the selected area (you should see a little hand appear), drag it to where you want the eye, and then click Ctrl + V on windows, or Cmd + V on mac to paste it.

Step 16: Starting to Animate

Now that we have our first ghost frame we can start to animate .

On the bottom right corner of the frame, click "Duplicate this frame". You should see a new identical frame

Step 17: Make a Small Change and Explain How Animation Works

This is just like a simple Flipbook. Frames with small differences add up to an illusion of motion. I start with Clyde's eyes by moving their position a bit every frame.

To move his eyes, set colors to blue and white, and use the pen tool to redraw the eyes looking in a different direction. Duplicate the last frame after each step.

Step 18: Should Look Like Something Like This

Its a GIF, click it to animate it

Step 19: Preview Your Animation

To preview your animation, go to the top right part of your screen. Hover over size preview and select "Full size preview". Then lower the FPS(frames per second). By default its at 12 FPS, you want it at around 2-4 FPS.

After that, click open in a preview pop up, and you will see bigger version of your animation.

Step 20: Animating the Legs

Duplicate the last frame

Pick eraser from the tool bar on the left, and remove Clyde's legs

Step 21: Onion Skin

Onion skin is a very useful tool that lets you see what the previous frame looked like. Its very useful for animation because you need to know that for making small changes.

Step 22: Shift Legs by One Pixel

Select pen and color of orange, and shift all of the legs to right or to the left by one pixel

Step 23: Duplicate the Last Frame and Repeat

Erase the bottom, shift legs by one more pixel, and repeat

Step 24: It Will Look Like Something Like This

Step 25: Exporting Animation to Scratch

When you are ready, you can export the animation into Scratch

Select export on the menu on the right

Scale the picture by about 8, so its visible on the screen when you upload it into scratch.

Make sure to select GIF, other formats tend to mess up the order of the frames

Step 26: Import Into Scratch

Select "Upload Sprite" in the bottom right corner.

Select the file you downloaded from Piskel

Step 27: It Should Look Like This

Step 28: A More Advanced Animation: Intructables Robot

After I teach kids the tools, I let them play around with the tools, and they usually come up with things they are interested in.

However, if they need more inspiration I show something like this to get them inspired. (This part of the instructable will be less detailed than the ghost one)

Step 29: Resize the Canvas

The robot is more detailed, so we will need more pixels for this.

In the toolbar to the right click "Resize".

I chose 100px by 100px because it seemed like not too big and not too small for it. You can resize it later using the same method without affecting content if you want.

Step 30: Make Pixel Drawing That Resembles What You Are Drawing

In case of this robot, I started with the rough outline using the rectangle tool and circle tools.

Then added all the details

And then all the colors

Step 31: Animate Head Opening

To animate the head opening, I would duplicate the frame, rectangle select top part of the head, move it up, and then fill in the resultant gap. I would repeat this process until the mouth had enough space for the laser.

Step 32: Build Up the Laser

When the laser is build-up, I would move the body to the left and right every other frame and the head too. This would give it an effect that the power of the lazer is strong and unstable

Step 33: Fire!

Once the laser is fired, knock the head back, again signifying the power of the laser, and change the beam every frame a little bit to make it seem alive.

Step 34: For More Details You Can Look Into the Piskel

You can make piskels public so anyone can view, and clone them if they want

Here is my piskel profile, it has the instructables robot and there you can see all the details on how I made it

There is also my attempt at making the Infinity Gauntlet from Marvel.

I will add more stuff to my profile in the future.

If you have any questions, do not hesitate to ask.