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.

• 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

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.

• 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.

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.

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!

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.

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

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

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.

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

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.

Its a GIF, click it to animate it

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.

Duplicate the last frame

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

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.

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

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

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

Select "Upload Sprite" in the bottom right corner.

Select the file you downloaded from Piskel

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)

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.

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

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.

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

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.

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.