Skip to content

Please update your browser

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

3. Forward Motion

  • 1. Side Scroller Introduction
  • 2. Walk the Walk
  • 3. Forward Motion
  • 4. Hop, Skip, and a Jump
  • 5. Keep Moving
  • 6. Realistic Jump
  • 7. Add-Ons
  • 8. Reflection
  • 9. Wrap-up: Side Scroller
  • 10. Wrap-up: Share Your Project
  • 11. Wrap-up: Show Your Project
arrow_backward Back Next arrow_forward
Transcript

In this video, you’ll use the arrow keys to make the hero move through the world.

Right now, the hero’s walking, but it’s just walking in place; nothing else is moving.

If you’ve ever played Mario, Sonic the Hedgehog, or another side scrolling game, you know that when you walk forward, the character on screen doesn’t actually move forward.

Instead, the background moves backward.

You’ll use this trick with your game today.

If you click on the “Ground” sprite, you’ll see a good bit of code is already in there.

This code uses the block you see in the sprite preview to create the ground all the way across the stage.

It even places random gaps in the blocks that the hero has to jump over.

The “Ground” sprite contains three event blocks – “when flag clicked,” “when I receive forward,” and “when I start as a clone.”

click the “when I start as a clone” stack, you’ll see a little block peek out, but it doesn’t go anywhere.

click the “when I receive forward” block stack.

The block moves a little!

The “forward” message is the key to making the background move.

Broadcast this “forward” message each time the hero moves forward.

In the “Hero” sprite, you’ll build out your motion loop!

The motion loop will control all of the hero’s movements – jumping up, going forward, and falling down.

Drag out another “forever” block.

Add a comment to this one also by right clicking and clicking “add comment.”

Type “motion loop.”

Start simple: Inside this loop, you’ll check whether the right arrow key is pressed, then, each time it is, tell the ground to move backwards.

This will make it look like the hero is moving forwards, which is the trick to making side scrolling games work.

Add an “if” block to the loop.

Then, add a “key pressed” sensing block as the condition.

Pick “right arrow” from the dropdown.

Finally, add a “broadcast” block to the “if” block.

Make sure “forward” is selected, and test it out!

Click the block stack, then press the right arrow key.

Did the ground start moving?

Congrats.

Your character now walks forward.

One final step: Give the hero a little runway to start the game.

Back in the hero sprite, drag out a “repeat” loop, and snap a “broadcast forward” block inside it.

If this stack runs after the flag is clicked, it’ll move the ground forward!

Now, snap the stack just above the motion loop, and cap it off with a “when flag clicked,” so the hero is assured there’s some ground to land on.

Make sure to test, and tinker with the value in the “repeat” loop to control how much the ground moves forward at the start.

In the next video, you’ll add gravity and jumping.

Now, it’s your turn: Place an “if” block inside a “forever” loop to check if the arrow key is pressed.

If it is, broadcast the forward message.

Instructions
  1. Place an "if" block inside a "forever" loop to check if the arrow key is pressed.
  2. If it is, broadcast the forward message.