Do you want to make scrolling platforms like those used in Mario-style games? Try to solve the 5 challenges in this computer science lesson! If you get stuck, watch the movie at the end (but don’t look before you try :-).
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.
1. Create a Scratch account
To make this game, you’ll use Scratch — free software from the Massachusetts Institute of Technology. To begin, you must create an account at the Scratch website if you don’t already have one. Be sure to get your parents’ permission if you’re under 13 years old.
2. Set up the project
Start by creating a new project. Just click Create in the menu at the top of the screen.
When your project appears, give it a name like Platformer by typing in the name box at the top left.
Now create a new sprite that looks like the purple platform below. A sprite is an animated character. To make a sprite, click the paintbrush and then draw what you want. Make your platform any color you want! Or make bricks that look like the movie at the beginning of this lesson.
- Be sure your platform sprite is at the bottom of the screen when the game starts and that it has the name platform1. To name the sprite, click the small sprite icon at the bottom, left of the screen. Then click the small “i.” On the next screen, type the name platform1. To get back where you started, click the left-pointing arrow.
Set up the cat
Tell the cat to turn only left or right (not upside down) by selecting the rotation style. To find the rotation style commands, click the small sprite icon at the bottom, left of the screen. Then click the small “i.” Then click the rotation style with sideways arrows.
3. Make a variable
To create a scrolling platform, you must use a variable. A variable is a hidden container that holds some information that your sprites need to know.
In this project, we’ll call our variable scrollX. Watch the movie below to learn how to create scrollX.
4. Make the arrow keys work
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 what you saw in the movie: when the platform moved backward, the cat looked like it was moving forward.
Let’s try to capture this logic in commands for your script.
Beginning the cat script
Go to the cat’s script. Connect the commands below and place them at the beginning of your script. Then tell the cat to move to the bottom, left of the screen when the script begins by changing the numbers in the go to x: … y: command to position the cat correctly. What numbers should you use?
The cat & the right-arrow
When the right-arrow is pressed, the cat should point forward. In our case, “forward” also means “point to the right,” or point at 90 degrees. Assemble these commands and add them to your script so they make the cat point forward when the right-arrow is pressed.
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. In the meantime, add the following command to the other commands you just assembled that tell the cat what to do when the right arrow is pressed. Where do you think you should put this command in your script?
The platform & the right-arrow
Now all you need to do is to tell the platform to move backwards when the right-arrow is pressed.
Go to the platform script. Then add these commands to the platform script.
How the right-arrow works
Here’s how all these commands work. When you press the right-arrow once, the cat’s script changes the number inside the scrollX variable by -1. Then the platform will sets its x-position to -1. When the platform changes its x-position to -2 because the right-arrow is pressed again, the platform moves its x-position to -2, or 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).
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?
- You only need to change the cat’s script.
5. Set up platform 2
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!
Change the 2nd platform’s color (temporarily)
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.) To make the platform a different color, edit its costume.
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 to the right 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 are the commands for the 2nd platform. You’ll find the green + operator in the Operators group. How can you assemble these commands so that the 2nd platform behaves correctly?
Make the platform colors identical
After you’ve got the platforms working, you may wish to make them the same color! When platforms are the same color, it’s easier to add jumping and gravity.
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?
The 2nd platform and 3rd platform “peek out” at the right side of the screen before they should. You can fix this behavior by adding a frame around the screen like the green frame below. Make it any color or pattern you like! If you make the frame the same color as the background, it will be invisible (a very nice effect).
Watch the (project explained) movie
You’ve done it! Congratulations!