beanz Magazine

Scratch Animations

DAXKO on Flickr

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/

Also In The December 2018 Issue

Create colourful geometric patterns in SketchUp inspired by the Great Mosque of Cordoba.

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

Create an electronic obstacle course and test the steadiness of your hands as you navigate through.

What’s allowed in an e-mail address? Let’s break down the syntax.

Throwing your old tech in the trash is bad for the environment. Check out some safer, cleaner alternatives.

New, crafty mods that’ll push your Minecraft design skills to new levels.

Part philosophical paradox, part coding puzzle, quines are sure to tease and challenge your brain!

5 questions with the designer pushing innovation in 3D printed clothes.

All work and no play makes it harder for kids to learn, especially those with anxiety and learning disabilities.

Dive into the nuts & bolts of storing pictures and files on your computer.

A clever AI is creating twisted, surreal art. Math or magic?

Two doors hide a zonk, and one door hides a prize. Can probability & statistics help you pick the right one?

How can you tell if a credit card number is valid or invalid? Meet the Luhn algorithm, one of many checksums helping us keep the internet in order.

Learn about the Destination Dispatch algorithm and create your own robotic lift.

Grab your friends & disconnect from the digital world with these fun science & tech board games.

Interesting stories about computer science, software programming, and technology for December 2018.

Links from the bottom of all the December 2018 articles, collected in one place for you to print, share, or bookmark.