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. Scrolling Objects

Transcript

In this video, you will program objects in the background to move.

This gives the illusion that the sprite is walking.

To start, select a walking sprite.

You can keep the one in the starter project, or choose another sprite.

When you choose a sprite, click "Walking" under “theme.”

Copy the code in the starter project over to the sprite you chose.

Press the left and right arrow keys to test.

The sprite looks like it is walking back and forth.

Next, program the objects to move past the sprite.

Check out this example.

When the sprite walks right, everything else moves to the left to give the illusion that the sprite is moving through a scene.

Program the objects to move to the left when the right arrow key is pressed.

In the “objects” sprite, add a "when flag clicked" block and a "forever" loop.

Inside this, add an "if" block.

Add a "key pressed" block as the condition, then select “right arrow.”

Add a "move" block inside the "then" portion.

Change the value in the block to -20.

Putting a negative number in this block makes the objects move to the left.

Click the flag, then press the right arrow key to test.

Great!

Uh oh!

The “objects” sprite gets stuck on the left edge of the stage.

To program the sprite to restart on the right side of the stage, use another conditional statement.

Add an “if” block under the "move" block.

To check whether the sprite has reached the edge of the stage, use an operator.

Add a "less than" block, then put an "x position" block into the left side.

On the right side, add an x value that is beyond the left edge of the stage.

The x position at the leftmost side of the stage is -240.

In this example, the value is set to -250.

This conditional statement checks if the x position of the “objects” sprite is less than -250, or off the left side of the stage.

In the “then” portion, tell the sprite to go back to the right side of the stage.

Add a "set x" block and type in a value that is greater than the right edge of the stage.

The far right side of the stage is 240.

In this example, the value is set to 250.

The full conditional statement reads: If the x position of the objects sprite is at less than -250, then go to the x position of 250.

Press the right arrow to test.

Awesome!

Next, program the "objects" sprite to move in the opposite direction.

Duplicate the "if right key pressed" part of the code stack.

Change right key to left key in the dropdown menu.

To make the objects move to the right, change the value in the “move” block from negative 20 to positive 20.

Make the "objects" sprite restart on the left side of the stage when it gets to the right side of the stage.

Replace the “less than” operator with a “greater than” operator.

You can reuse the “x position” block.

Then, on the right side of the "greater than" block, change the value to 250.

In the "set x" block, change the value to negative 250.

Click the flag, then press the left arrow key to test!

Awesome!

When the left arrow key is pressed, the object moves to the right, then restarts on the left side of the stage.

Finally, make the "objects" sprite hide and wait a random amount of time before reappearing on the stage.

Above both the "set x" blocks, add a "hide" block.

Add a "wait" block, with a "pick random" block inside.

Input values in the "pick random” block.

This example uses values of 1 and 4 seconds.

Then, program the sprite to show again after it goes to the other side of the screen.

Add a "show" block.

Now, it's your turn.

Program the "objects" sprite to move to the left when the walking sprite is moving to the right.

Program the "objects" sprite to restart on the right edge of the stage when it reaches the left edge.

Duplicate this code to make the "objects" sprite move to the right when the walking sprite is moving to the left.

Program the "objects" sprite to hide and wait a random amount of time before reappearing on the screen.

arrow_backward Back
Next arrow_forward
Instructions
  1. Program the "objects" sprite to move to the left when the walking sprite is moving to the right.
  2. Program the "objects" sprite to restart on the right edge of the stage when it reaches the left edge.
  3. Duplicate this code to make the "objects" sprite move to the right when the walking sprite is moving to the left.
  4. Program the "objects" sprite to hide and wait a random amount of time before reappearing on the screen.