Please update your browser
Your browser version is not supported by this site. CS First may not work properly. Learn more.
In this video,
you will make the hero look like it's jumping.
First, program the animation.
You might think you could copy the walking code,
but when a sprite jumps,
it has to go through all the costumes
to look natural before it lands.
The walking animation can start and end at any point.
Look at the Costumes tab.
Scroll and see that there are a few jumping costumes.
There are five.
Keep that number in mind.
You've done this kind of costume-switching animation before.
Grab a switch-costume block
and click the name of the first jumping costume.
Drag out a next-costume-block too,
but don't snap it in yet.
Next, go to the Control menu.
The jumping hero starts with the first jumping costume
and goes through each of the rest of them in order.
Add a repeat loop.
Snap it below the switch-costume block.
Then put the next costume block inside.
As usual, you'll space out the costume switches
with a wait block.
0.1 seconds works for the example,
but tinker with yours so it's right for your animation.
Click the stack to test.
It went through too many costumes.
Change the number in the repeat loop to five,
or the number of jumping costumes.
Click and test again.
Notice that the last costume in the animation
isn't a jumping costume.
That's because if you count the first purple block,
it's switching costumes one too many times.
This example will use four instead of five,
so it still looks like it's jumping at the end.
Since this stack affects the hero's looks,
place it in the Looks loop.
Test the code now.
Whoa, the hero jumps all the time.
The hero shouldn't look like it's jumping when it's walking
or whenever the up-down speed is zero.
To fix this, pull out an if-else block.
The condition is up-down speed equal to zero.
Build that into the blank.
If it is equal to zero, the hero is probably on the ground,
which means it can walk.
So the walking code in the Looks loop goes in this part.
If the up-down speed is not zero,
the hero is moving up or down, so it should look like it.
Put the new jumping code in here.
Add this new stack into the Looks loop.
Now test it by clicking the flag.
Press the up arrow to jump.
It animates, a couple of times though.
Interesting bug, but you'll fix it.
The hero is going through the whole Looks loop
multiple times while it's in the air,
which is why the jumping animation happens twice.
Place a wait-until block at the bottom of the jump code.
Then right-click the condition that says,
up-down speed equal to zero,
and duplicate it to snap it into the wait-until block.
You accomplished a lot today.
Once you get all this done, share your project.
Then, on the project page, add instructions
so other people can play your game.
Talk about the key controls and the goal of the game.
Then, if you have some time and want to do some more,
continue on to the next page to try some add-ons.
Now it's your turn.
Program the hero to loop through the jumping costumes
using switch-costume, repeat, next-costume, and wait.
Make the animation happen only when the hero is moving
up or down, or when the up-down speed is not zero.
Use wait-until to stop the animation
after the hero goes through one jump cycle.
Sign in to track your progress and earn badges