Kids Code & Computer Science

Learn how to use animated GIFs to create proper animation loops in Scratch.

If you’ve been making games in Scratch for even a little while, you’ve probably wondered how to do proper animation loops in your games!

Scratch is really good at making it easy to move single images around the screen, but what about animations? That’s what we’re going to cover in this issue:

• How to load animated GIFs into Scratch
• How to cycle through frames of animation for moving around the screen
• How to have an idle animation that plays whenever you’re not moving

First, loading animated GIFs into Scratch is the easiest way to get animation loops into your game. You can just click on the button that creates a new sprite from an image and select the GIF! Scratch will create a new sprite that has a costume for each frame of the GIF. You can also add an animated GIF as a sequence of costumes by clicking on the button to add a new costume from an image. For a lot of Scratchers, this is how they get classic video game characters like Mario, Sonic, or Link into their games.

For the purposes of this piece, I’m going to be using the website Piskel to make my animated sprites.

I made a sprite that has both frames for an idle animation:

And moving animation:

Please don’t be intimidated by the sheer artistic quality of my stick figures!

There’s a couple of concepts that are important for making the animations work. We need to first note which of the costumes constitute the loops we want. It doesn’t come up frequently, but each costume has a number associated with it that’s in the upper-left corner of the costume. In this case, my idle-frames are numbers one through three and my walking animation frames are numbers four through eight.

We’re also going to make a variable to tell the game whether we’re moving or standing still. In this case, I call the variable isMoving. We’ll make sure that we only put the values 0 and 1in isMoving, where 0 means “the sprite isn’t moving” and 1 means “the sprite is currently moving”.

Here’s what my code looks like before we go any further:

There’s two main blocks of code here. The first one is the movement loop. It detects key-presses and then moves the sprite, setting the isMoving variable to one if a key is pressed. If none of the keys are held down then it sets isMoving to 0.

The second block controls the animations. The code starts by checking whether the sprite is moving. If the sprite isn’t moving, it starts the idle-animation loop. The idle-animation loop starts by moving to the next costume and then checking whether the costume number is greater than three, i.e. has moved out of the idle animation frames, and if so puts it back at the start of the idle loop. The “else” part of the “if-then-else” does the same thing but for the moving loop.

Now, I didn’t put any delays between frames of animation but if the loop is moving too fast you can add a “wait” block into the code just after the “if-then”s that check the costume number. Even a delay like 0.05 seconds will make the animation look a lot less like the sprite is flailing wildly!

Now, if you’re making an action game you might want to have an attack animation as well. It’s not much harder to add attacks than it was to add these loops in the first place. Basically what you need to do is:

• Rename the isMoving variable to something like animationState to help you remember what it’s used for
• Figure out how many attacks you want and which costume numbers their animations correspond to
• Modify the control loop to add the keypresses for the attacks that set the animationState variable to the appropriate number, e.g. “pressing F means punch, and punch means set animationState to 2″
• Add extra “if-then” clauses to play through the animation loop of the attacks.

Learn More

My demo

https://scratch.mit.edu/projects/251309687/#player

Piskel, a sprite art editor that’s good for making quick animation loops

https://www.piskelapp.com/

A more sophisticated pixel art editor

https://www.pixilart.com/