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.
First, open a new Chrome browser window (Chrome works best) and go to MakeCode Arcade beta.
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
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Now, duplicate the walk cycle three more times for the walk_left, walk_up, and walk_down animations.
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.
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.
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
False answer depending on the result of the comparison.
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.
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.
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.
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
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!