Skip to content

Please update your browser

Your browser version is not supported by this site. CS First may not work properly. Learn more

6. Realistic Jump

Transcript

In this video you will make the hero look like it’s jumping.

First, program the animation.

You might think you could just 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.

Count them.

there are 5!

Keep that number in mind.

Back to the scripts tab.

You’ve done this kind of costume-switching animation before.

Grab a “switch costume” block and pick 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 5, 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 4 instead of 5, so it still looks like it’s jumping at the end.

Great!

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 by clicking the flag.

Press the up arrow to jump.

It animates!

A couple 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 jump 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.

Test again.

Great.

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 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 only happen when the hero is moving up or down, or when the up/down speed is not 0.

Use “wait until” to stop the animation after the hero goes through one jump cycle.

arrow_backward Back
Next arrow_forward
Instructions
  1. Program the hero to loop through the jumping costumes using "switch costume," "repeat," "next costume," and "wait."
  2. Make the animation only happen when the hero is moving up or down, or when the y speed is not 0.
  3. Use "wait until" to stop the animation after the hero goes through one jump cycle.