Skip to content

Please update your browser

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

2. Walk the Walk


Start your project by making the hero move forward.

Click on the hero’s costumes tab to see the costumes available.

Some are labeled for walking, and some are labeled for jumping.

You’ll loop between these costumes to make the hero look like it’s walking or jumping.

The first block you need is the “switch costume” block.

Pull it into the hero’s script area, then select “walking1” from the dropdown menu.

If you click it, the sprite assumes its first walking pose.

To make the hero walk continuously, code it to continue changing to the next costume until it reaches a non-walking costume.

Then, it resets to the first walking costume.

Start a separate stack with a “forever” loop.

This loop will be called the “looks loop” because everything that happens in this loop will control how the sprite looks.

In computer animation, and in computer science in general, it’s good practice to separate appearance – the way your application looks – and functionality – the way your application works.

You’re doing that in this application already!

Your looks loop will be separate from your motion loop, which you’ll make later.

To remember which stack is the “looks” loop, add a comment to the “forever” block.

It’s important for computer scientists to comment on their code to make it easier for others to read and understand.

Right click on the “forever” block, and click “add comment.”

Type “looks loop” in the comment.

Resize this comment by dragging the bottom right corner, or collapse it using the arrow.

Back to the blocks.

Put a “next costume” block inside the looks loop.

Below it, place a “wait” block and enter “0.1” for the time it should wait.

Click this loop to see that it goes through all the costumes in order.

Next, program the sprite to detect when it’s no longer on a walking costume and switch back to its first walking costume.

Use your first conditional!

Add an “if/else” block, and put it inside the forever loop.

The condition is whether the sprite is still on a walking costume, so drag out a “greater than” block from operators.

In the left blank put “costume #,” and in the right put the number “4.”

So, if you read it, the loop will keep switching to the next costume until it reaches the fourth costume.

Once it reaches the fourth costume, it should switch back to the first walking costume!

Place the “switch costume” block into the first portion of the “if” block.

Place the “next costume” block into the “else” portion.

Click and test!

Does the hero keep on walking?


You may see that the hero does a stutter step each time it switches back to the first costume.

That’s because it’s not waiting when it switches back!

Simply drag the “wait” block below the “if/else” block at the bottom of the looks loop.

Great, test again.

If it works, you did it.

If not, pause and look at the code to see where it went wrong.

Finally, snap a “when flag clicked” block on top.

Now, it’s your turn.

arrow_backward Back
Next arrow_forward
  1. Add the looks loop.
  2. Inside it, continue to switch to the next costume while the hero still shows a walking costume.
  3. If the hero is on its last costume, switch back to the first walking costume.
  4. Wait .1 seconds each time the loop runs.