Next, click on the New Project button.

This will take you to the MakeCode Arcade Editor.

Scene Setup

Create a basic scene as we did in the pixel art tutorial including:

Background image such as the one shown here

Player sprite named Ruby

Ruby set to bounce on wall

Ruby controlled with buttons and a velocity of 80 on vx and vy

In order to load the Animation extension, first click on the Advanced category to expand the category list.

Next, click on Extensions. This will bring up the Extensions selection window.

Click on the Animation extension item and it will load the animation blocks into the editor session.

Animation Blocks

Now, you can click on the Animation category.

In it you'll see the first block we'll need to add, the set anim to create animation of Walking with interval block. Add it to the existing on start block.

The first animation we'll add is an idle animation, which is what Ruby will do when there is no controller input. Rename the anim variable in the block you just added to anim_idle, and also rename the Walking variable in the create section of the block to Idle.

Attach Animation

The animation block we created needs to be attached to a sprite. You may have many sprites in your game eventually, so this step ensures that the game engine knows which animation loops are associated with which sprite characters/enemies/food, etc.

Add an attach animation block to the on start loop. From the dropdown lists choose anim_idle as the animation variable name and Ruby as the sprite.

Add Animation Frames

Now we'll get to the really fun part! Adding frames of animation!

First, drag in an add frame block as shown. In it, you'll use the sprite editor to create your first frame of the idle animation.

I chose to re-create Ruby but with her eyes facing forward. (This is the only one you'll create from scratch, the remaining frames will be duplicates of this one with minor changes as the eyes look left and right.)

Next, chose the anim_idle from the dropdown menu. This way, we're indicating that this frame of animation belongs to that cycle.

We'll make a total of five frames for the idle animation. Duplicate the first frame by right clicking on the add frame block and choosing Duplicate. Add this and three more duplicates to the block as shown, for a total of five frames.

Frame 2: Leave the second frame an exact copy of the first -- this will create a pause at the top of the cycle. This uneven timing will give the animation a more organic feel as opposed to perfectly even intervals between gaze shifts.

Frame 3: For the third frame, re-draw the eyes to look in the screen right direction.

Frame 4: Leave frame four as is looking straight ahead.

Frame 5: Finally, redraw frame five looking left.

Interval Speed

One interesting trick you can use in games to make the most use out of your work is to adjust timing of animation cycles rather than create entirely new ones. For example, a if we need Ruby to look like she's reading something, we could speed up the Idle animation cycle by adjusting the interval speed temporarily!

Here it is with an interval of 100ms instead of 800ms.

Walk Right

This will be a simple, quick walk with lots of excitement built in, as well as a shift in the character to slightly face the direction she's going.

Edit the first frame of the walk cycle so that the eyes are shifted to the right and the screen right leg is lifted up higher than the default.

Edit the second frame so that Ruby's body has shifted down a bit, the screen left leg is lifted, and you can even add some secondary motion or squash to the silhouette of the character by widening the base of the hips as shown here.

Update and Conditional Comparison

Add an on game update block from the Game category. We can then place blocks in here that will run on every clock tick of the game code to check what's happened since the last check. This is a great way to do things like monitor a character's velocity.

Into this update block, we'll drag an if_else block from the Logic category. We're going to use this to test the conditions of Ruby's velocity.

Now, add a Boolean comparison operator 0 < 0 to the first if statement. We'll adjust this in a moment to compare Ruby's velocity on each axis to 0, but the basic operation of this block is to return a True or False answer depending on the result of the comparison.

Velocity Check

In order to check Ruby's velocity, first drag a mySprite x block from the Sprites category into the comparison operator as shown.

Then, change the dropdown to pick Ruby and the attribute to velocity x.

To test first if Ruby is moving to the right, we need to see if her velocity on x is greater than 0. Set the comparison operator symbol to > greater than.

Activate!

Now we can activate the walk right animation cycle when Ruby's velocity on x is greater than 0.

We'll also tell the conditional statement to activate the idle animation when Ruby isn't moving.

From the Animation category, drag in two of the activate animation blocks as shown, and set the dropdowns to walk_right on Ruby and Idle on Ruby respectively.

All Cycles

Now, we can add the remaining four cycles. First, click the + plus sign three times in the if then block to add three if else sections.

Into these, add the following comparisons and activations:

If else Ruby vx < 0, then activate walk_left

If else Ruby vy > 0, then activate walk_up

If else Ruby vy < 0, then activate walk_down