Basics: Scrolling Platforms
Watch the movie
Step 1. Create a platform
Step 2. Create the variables
Step 3. Variable magic
Step 4. Press the left-arrow
Step 5. Make the platform longer
Step 6. Add friction
Watch the movie
In the movie below, the cat walks on a platform. Notice that the cat doesn’t really move at all! Instead, the platform scrolls (moves) to give the illusion of motion. Specifically, when the right-arrow key is pressed, the platform moves to the left. When the left-arrow key is pressed, the platform moves to the right.
Step 1. Create a platform
Let’s start by creating a platform. Watch the movie below to see how it’s done! Then do it yourself.
Hints!
- Be sure your platform sprite is at the bottom of the screen when the game starts and that it has the name platform.
- Later in this lesson we’ll duplicate this platform sprite to make others just like it. While you’re learning, it’s helpful to make each platform a different color so you can tell where it begins and ends as it scrolls across the screen. (That way you can tell if your scolling is working properly.) If you want to make each platform a different color, edit the platform costume.
Step 2: Create the variables
To create a scrolling platform, you must use a variable. A variable is a hidden container that holds a number.
In this project, we’ll call our variable scrollX. Watch the movie below to learn how to create scrollX.
When you press the right-arrow key, you want the cat to move forward … sort of! Remember that in the movie at the beginning of this project, we saw that the cat didn’t move at all. It’s the platform that moves!
So … when you press the right-arrow key, you want the platform to move … backward! Think about it for a moment! When the platform moves backward, the cat looks like it is moving forward.
Let’s try to capture this logic in commands for your script.
scrollX
Let’s go to the cat’s script. To begin, tell the cat to move to the bottom, left of the screen when the script begins. And set the value of scrollX to 0. Use the command below, but change the numbers in the go to command to position the cat correctly.
And tell the cat to turn only left or right (not upside down) by selecting the turn position button with sideways arrows:
When the right-arrow is pressed, tell the cat to point forward. In our case, “forward” also means “point to the right,” or point at 90 degrees.
Then we also need to tell the scrollX variable to decrease by 1 (which stands for “one step”). You’ll see in a moment how telling the scrollX variable to decrease by 1 will also tell the platform to move backward. Add the following command to the other commands you just assembled that tell the cat what to do when the right arrow is pressed:
Platform
Now all you need to do is to tell the platform to move by the same number that’s in scrollX.
Here’s the command that does the magic. This command is on the platform’s script:
Here’s what the command does. When you press the right-arrow once, the scrollX variable will get the number -1. Then the platform will change its x-position by -1. When the platform changes its x-position by -1, it moves one step backwards. That’s just what we want!
When you’ve gotten these commands in place, click the green flag, and then press the right arrow. You should see that the platform moves backwards (to the left).
Step 4. Press the left-arrow
So far, your script allows you to press the right-arrow. Can you figure out how to modify your script so that you can also press the left arrow?
Hint!
- You only need to change the cat’s script.
Step 5. Make the platform longer
Right now, our platform is very short, and the cat quickly runs off its ends. Let’s make the platform longer.
Duplicate the platform
The easiest way to make the platform longer is to duplicate the platform sprite. Watch the movie below to see how that’s done!
Position the new platform
Now that you have two platforms, you must set them side-by-side. The first platform should be visible when the green flag is clicked. The second platform should wait offstage until it’s needed.
Here’s the trick! On the script for the 2nd platform, make the x position exactly 470 more than is it for the 1st platform. The number “470″ is the width of the screen (more or less). So the 2nd platform will always follow the 1st platform by 1 screen.
Here’s what the script for the 2nd platform should look like:
Step 6. Add friction
You may find that the platforms scroll quickly, and they continue to scroll even when you’re not pressing the arrow keys. To make the platforms behave a bit more realistically, we need to add friction. Friction causes the platforms to slow down and eventually come to a stop when you aren’t pressing the arrow keys.
How can we simulate friction? The motion of the platform is controlled by the variable scrollX. If we make scrollX smaller and smaller over time, then the platform will slow down and eventually stop.
Here’s a command that makes scrollX smaller and smaller:
How does it work? Can you figure out where to put it in the cat’s script?
Extra Credit!
Can you make a 3rd platform that will always follow the 2nd platform by 1 screen?
How could you make the scrolling platforms move faster? slower?
You’ve done it! Congratulations!
