You can bring your MakeCode Arcade characters to life through the magic of animation! With just a few simple frames of pixel artwork and the right MakeCode blocks, you can make your player sprite react to actions in fun ways!

This guide will show you how to create frames of sprite animation, and how to set them up to play back depending on the game conditions. 

Parts

You can create this project entirely in the browser and test it using the MakeCode simulator, but it's even more fun to see your work come alive on hardware, such as the PyBadge!

Before we get started with sprite animation, it's important to have a solid foundation in static pixel art creation. If needed, check out this page on Pixel Art Fundamentals first.

Animation Basics

Animation is a HUGE topic! It can be overwhelming, in fact, to consider all there is that goes into creating beautiful animation. The good thing is that we can keep it very simple and still learn a lot and get going fast.

At its most basic, animation is the illusion of motion our brains trick us into perceiving when we view multiple still frames of artwork played back in quick succession. A flipbook you can doodle in the corner of your notebook is a great example of how this works and how simple it can be.

Typical film animation is created with somewhere between 12 and 24 unique frames per second, which can give it an incredibly fluid look, but is a heck of a lot of work, too!

We can get away with using just two unique frames of animation and still perceive the effect of animation, particularly when we're also using the game engine to move the sprites across the screen as they are animating!

Game Animation Frames

Pixel sprite animation used in games is normally created with many fewer frames of animation. This means we can typically get away with creating just a handful of unique sprites to convey the action. 

If a one second action of a character swinging a sword is comprised of 24 frames in a feature film animation, the same action may contain just three frames/sprites in a very simple game style, and up to nine or so frames for a more fluid style.

Here's a beautiful example from Pedro Medeiros's MiniBoss Studios tutorial set available here.

Cycles

Unlike a feature animation, nearly everything a character does in a game (excluding cinematic cut scenes) can be broken down into repeating cycles. Walking, running, jumping, standing idle and breathing, swinging a sword, grabbing a prize, and on and on. These are all actions that can be considered looping cycles.

Here are some wonderful, short cycles created by Arks for his Dino characters. (You can purchase the sprites here if you like and use them in your own games, or even just to study them.)

This means we can focus on creating individual cycles, and then worry later about setting up the game engine to call on the appropriate cycle depending on what's going on in the game.

Player is moving the d-pad to the right? Play back the walking cycle. Player presses the 'A' button? Play the jump cycle. And so on.

Let's look at a typical, simple cycle, the "idle animation".

Idle Cycle

An idle cycle is an animation loop that plays back when the character is standing still. Rather than just holding on a single sprite, which can be a bit boring, an idle animation can be as simple as a few frames of breathing or blinking, and can get as complex as yawning, looking around, head scratching, etc. 

Walk Frames

Here's a walk cycle made of six frames:

Now, let's create our own animation cycles for Ruby, the red LED!

If you're not familiar with creating static sprites inside of MakeCode already, have a look at this guide page and then come back here to create animation.

First, go to MakeCode Arcade and create a new project.

Next, click on Advanced > Extensions

click the Animation extension to add this library.

MakeCode Arcade

First, open a new Chrome browser window (Chrome works best) and go to MakeCode Arcade beta.

If you would like help getting the scene set up in MakeCode to this point, you can head to this link to check it out.

Animation Extension

In order to create animation for our player sprite, we'll need to add the Animation extension to MakeCode Arcade. You can think of this as a set of helpers or libraries that add animation related blocks to the editor.

We can also set the interval to run each frame of the animation a bit quicker than one per second. You can always fine tune this later to your tastes, once you have frames to test. I ended up setting mine to 800ms.

Activate Animation

We've now created an animation set, attached it to a character, and added frames of animation. The final thing to do is tell the game to activate the animation under some condition. We can, for example have a jump animation only activate when a button is pressed, or a happy dance animation activate when a certain score is reached.

Right now, let's have the idle animation play when the game begins. Add an activate animation block as shown here, and then set the dropdown menus to Idle and Ruby. This specifies which cycle to run on which character sprite.

Here's what the idle animation looks like.

And here it is playing in the MakeCode Arcade simulator.

Walk Cycle Animation

Now that we have our Idle animation built, we'll create a walk cycle. The idea here is that we'll make four different walk cycles, one for each direction Ruby can move on the d-pad, so walk right, walk left, walk up, and walk down.

We'll create the first walk cycle to the screen right, then we'll be able to duplicate the block set for the other three walk cycles.

The setup is the same blocks you used for the idle animation, but this time we'll only use two frames of animation, and set the interval to a quick 100ms.

You can duplicate one of the add frame blocks from the idle animation so that you don't need to re-draw Ruby from scratch.

Name the animation variable and action as shown here to anim_walk_right and walk_right.

Now, duplicate the walk cycle three more times for the walk_left, walk_up, and walk_down animations.

Walk Left

This can be a simple mirroring of the walk_right frames.

Walk Up

Here I adjusted the eyes to look upward broadened the smile a bit for visual interest.

Walk Down

Finally, for the down walk adjust the eyes to look downward and you can adjust the mouth a bit again for a slight change that helps the cycle read differently.

Trigger the Animation Cycles

OK, now we have these animation cycles, how do we actually use them? Other than the Idle cycle, none of them will play back at the moment. We need to create conditions to trigger them depending on the user input to the controller.

We want to check the game state to test if the character is moving or not, and if so, in which direction. Depending on the direction of motion, measured with a velocity (direction and speed) check, we can activate the proper animation cycle.

Test this out in the simulator now. You should see Ruby walking with the proper walk cycle when moving screen right, but sliding in other directions.

Here is the final project, click this link to check it out in MakeCode.

Head to the next page to see how you can load your MakeCode Arcade game onto a Pybadge!