Chapter 13. Using arrays and simulating gravity in a single-screen platformer

Search in book...
Toggle Font Controls
Create new playlist

Name your new playlist

Playlist description (optional)
Sign In

Email address

Password

Forgot Password?

or

Continue with Facebook

Continue with Google
Sign Up

Full Name

Email address

Confirm Email Address

Password

or

Continue with Facebook

Continue with Google

Chapter 13. Using arrays and simulating gravity in a single-screen platformer

Before Donkey Kong, games had goals, but the player didn’t know their motivation or how they had ended up in the situation. Donkey Kong changed that by giving the player a story with a beginning, middle, and end that unfolded as the player moved from level to level, usually in the form of cutscenes, videos that occur before or after a level to pause the gameplay and give information. That story starred a little plumber known as Mario.

Yes, our friend, Mario, that you know from Super Mario Bros, started out as a carpenter at a construction site, climbing ladders in Donkey Kong to save his girlfriend who was stolen by a giant gorilla. Nintendo brought back Mario for Mario Bros and then Super Mario Bros, turning him into a plumber who needs to jump up on brick platforms or slide down pipes in order to save Princess Toadstool from the evil Bowser. Mario can only run to the right. That’s because Super Mario Bros is a single-screen platformer.

Single-screen platformers may look and perform similarly to multiscreen platformers like Pitfall, but there is a key difference. In Pitfall or Beach Blast, the player character (Pitfall Harry or Beachy Buffy) is moving from screen to screen, interacting with the other sprites on each screen. In Super Mario Bros or School Escape, seen in figure 13.1, the player character remains in the same X position, though they can jump up and down to change their Y position. The sprites in the game roll toward them whenever the player presses the right arrow. It looks as if Mario or the teacher is running, but the player character is staying in place while the objects move toward them.

Figure 13.1. In School Escape, Ms. Finebean needs to sail over the heads of students, jumping off of desks and grabbing clocks as she runs out of school.

To understand the mechanics of a single-screen platformer, it may help to imagine the character standing at the end of a conveyer belt. The belt only moves when the person marches in place. If the person stops moving, all the objects on the conveyer belt (as well as the belt itself) stop moving, and if the person marches in place, the items on the conveyer belt move toward them.

In School Escape, the teacher’s X position is on the left side of the Stage. As the player presses the right arrow to “move” the teacher, the desk sprites (platforms) and kindergarteners (obstacles) generate and slide toward the teacher. It looks as if the teacher is moving, but it’s the other sprites that are sliding across the screen, moving toward the left when the player presses the right arrow and stopping whenever the teacher pauses.

This game also introduces a common video game item: a power-up. Power-ups are items in games that the player can use to increase their chance of success or give them additional abilities. In School Escape, the power-up is a clock that players can jump up and grab in order to buy more time to reach the exit door because, yes, School Escape is also your first timed game.

To accomplish all this, School Escape uses lists, which are also known in coding as arrays. Lists allow the game to track multiple values for a single variable. It helps that Scratch calls them lists instead of arrays because you can think of them as you would any list: it’s a place to write down information you want to remember and use later. In this case, the lists contain the X-positions for where we want students and desks to appear.

In this chapter, you will learn

How to design a single-screen scrolling platformer
How to add power-ups into a game
How to set a timer to affect gameplay
How to store values in a list
How to jump up and land on objects using simulated gravity

With fewer scripts, you’re going to make a much more complicated platformer. Take everything you learned in Beach Blast and apply it forward to create your own Super Mario-like School Escape.

Preparing to program

It’s time for your pre-coding ritual. Get your sprites and the Stage ready for School Escape.

Missing sprites

If you skipped chapter 12, either go back and complete it or go to the Manning site and download the background and sprites for School Escape. The directions for importing are the same as in chapter 5. You should have Ms. Finebean, four students, the clock, the desk, the door, and the hallway background.

Combining the kindergarteners

You need to combine all your students into a single kindergartener. Navigate to the Sprite Zone and click Student2. Open the Costumes tab in the Block Menu and drag the sprite from the Costumes tab into the Student sprite in the Sprite Zone. Make sure that Student2 transferred into the Student sprite by clicking the Student sprite and looking at the Costumes tab. You should see two costumes, as in figure 13.2.

Figure 13.2. The steps to take to combine multiple “costumes” into a single sprite. There is a single student sprite, but it can look four different ways.

Repeat this step two more times for Student3 and Student4 until all four versions of the student are seen in the Costumes sidebar when you click the Student sprite. Once all the sprites are combined into a single sprite, you can delete the original copies of the Student2, Student3, and Student4 sprites.

Fix It: I Accidentally Deleted a Sprite!

What happens if you delete a sprite by accident? Don’t worry, you can get it back. Navigate to the Edit menu in the Grey Toolbar and choose the Undelete option. You’ll see the sprite you deleted return to the Sprite Zone.

Preparing the Stage

You’ll need to resize a few sprites to have your code match our code. Use the Grow tool in the Grey Toolbar to enlarge the door (29 clicks), teacher (14 clicks), and student (4 clicks). The clock and desk are already the correct size.

Drag Ms. Finebean to the left side of the Stage, a centimeter from the edge. Place the clock sprite near the top third of the Stage on the far right side, around the X:200 and Y:80 position. (Check the bottom of the Stage as you move the clock to see the position. The clock doesn’t need to be perfectly on those numbers; they’re just a guide.)

Place the desk on the right side of the Stage, lining up the shadow with the top of the floor, and place the student sprite in the same place as the desk. Make sure neither sprite touches the wall. Finally, position the door in the middle of the Stage, also lining up the bottom of the door with the wall. All sprites should be in the same places as the ones in figure 13.3.

Figure 13.3. Position the sprites on the Stage.

Download the list

Even if you made your own sprites, you will need to download two lists from the Manning site, https://www.manning.com/books/helloscratch. These lists tell Scratch all the times you want the desk or kindergarteners to appear in the game. The lists are long, and instead of asking you to type in these values, we’ve made lists that you can import into your game.

Go to the Manning site and download the two .txt files (deskpositions.txt and kindergarteners.txt). You now need to create two blank lists in Scratch in order to import these .txt files into your game.

Go to Data and click Make a List. Name this list Desk Positions, as seen in figure 13.4, and create it For All Sprites.

Figure 13.4. Make an empty, new list and name it Desk Positions.

Make a second list and call it Kindergarteners. Keep both lists checked for the time being so you can see them on the Stage. Right-click (or control-click if you’re on a Mac) the Desk Positions list on the Stage. A pop-up window will give you a few options, including Import, as seen in figure 13.5. Choose Import and navigate to where you’ve saved the deskpositions.txt file on your computer.

Figure 13.5. Right-click the empty list and import the .txt file.

You should see 14 values appear in the previously empty Desk Positions list. Do the same thing for the Kindergarteners list, importing the kindergartener.txt file into the empty list. You should see 30 values appear in the previously empty Kindergarteners list, as in figure 13.6. Leave the lists on the screen for the time being, through you can uncheck the lists before you play so they’re not visible on the Stage.

Figure 13.6. The values on the list will fill once you import the .txt files.

You’re now ready to code.

Programming Ms. Finebean

The teacher, Ms. Finebean, is the equivalent of Mario in Super Mario Bros. She’s the player character that the player controls, making her jump over students and onto desks, grabbing clocks along the way. She has five scripts: a movement script, jumping script, falling velocity script, falling script, and desk detection script. All scripts in this section are applied to Ms. Finebean, so go put the blue box around the Teacher sprite in the Sprite Zone and don’t move the blue box until you program the kindergarteners in the next section. Remember, the names or values on your blocks may differ slightly from time to time, so use the completed script images to make sure you chose the correct block.

Making a movement script

Ms. Finebean needs to escape from school, but she can’t move forward, as shown in figure 13.7.

Figure 13.7. Even though Ms. Finebean won’t be moving, it will look as if she is running toward the right when you press the right arrow key.

This script will make it look as if Ms. Finebean is running toward the right whenever the right arrow is pressed. In reality, Ms. Finebean will be remaining in the same place, and this script sends the desks and kindergarteners toward her to give the illusion of movement:

Start with a When Flag Clicked (Events) block.
Click Data and make two variables. The first is called scrollX, and the second is called Lives. scrollX will track Ms. Finebean’s X-position, and Lives will set the number of chances Ms. Finebean has to reach the door without running into a kindergartener. Uncheck the scrollX variable, but leave the Lives variable checked, and drag the box to the top left side of the Stage.
Drag two Set Lives to 0 (Data) blocks and set them underneath the When Flag Clicked block. Change the top option to scrollX using the drop-down menu, but keep the number at 0 because zero is the variable’s starting point. Leave the bottom option as Lives but change the number to 3 to give Ms. Finebean 3 chances.
Snap a Forever (Control) block underneath to start a loop.
Place an If/Then (Control) block inside the Forever block.
Slide a Key Space Pressed (Sensing) block into the empty hexagonal space on the If/Then block to set the condition.
Change the option in the Key Space Pressed block to Right Arrow using the drop-down menu so the game emulates Ms. Finebean moving right when the arrow is pressed.
Slide a Change Lives by 1 (Data) block and place it inside the If/Then block. Use the drop-down menu to change the option to scrollX, but keep the number at 1, because you want the value of scrollX to go up by one every time the right arrow is pressed.
Add a Wait 1 Secs (Control) block under the Change scrollX by 1 block. Change the number to a small number such as .001. You want to ensure that the game doesn’t glitch and increase the value of scrollX by more than 1 each time, which would make the sprites in the game move too quickly.

Check your script against the one in figure 13.8.

Figure 13.8. The completed movement script makes it look as if Ms. Finebean is moving.

Ms. Finebean’s X-position isn’t going to change, but you’ll make it look like it’s changing using the scrollX variable. This variable is tracking her virtual position, imagining her X-position increasing by 1 every time the right arrow is pressed. Get it? Ms. Finebean is always on the left side of the screen, but this value pretends her X-position is 1, 2, 3, and so on until she hits the thousands. When she reaches a certain X-position, different things will happen, such as a desk spawning or the door appearing. In this way, Ms. Finebean can technically run infinitely to the right, even though there are only 480 X-coordinate points (–240 to 240) if she is moving across the Stage. And different things happen, such as a student moving toward her, when she reaches a certain virtual point, because the value of scrollX has increased from the right arrow being pressed.

Answer This: Why Does ScrollX Need to Change by 1?

Question:
could you play with the number and make scrollX change by 2 or 3 each time to make Ms. Finebean run faster?

Answer:
technically, yes, but you need to hit every value on the list, and that can only happen if scrollX increases one digit at a time. For instance, what if you set the desk to spawn when scrollX is 303, which means that Ms. Finebean is at her virtual X:303? If the value of scrollX jumps two “coordinates” at a time, she’ll move from 302 to 304 without ever hitting that 303 value. Keep the number at 1 in order to use every value on the list.

Making the jumping script

Ms. Finebean needs to be able to go over the kindergarteners instead of mowing them down while she runs down the hall. She also needs to be able to jump up and grab the clocks, as in figure 13.9, to gain more time.

Figure 13.9. Ms. Finebean jumps up in order to grab the clocks, land on desks, and leap over students.

This script will enable Ms. Finebean to leave the ground and jump into the air:

Start with a When Space Key Pressed (Events) block. Use the drop-down menu to change the option to Up Arrow.
Snap an If/Then (Control) block underneath to set a condition.
Place a Hexagon or Hexagon (Operators) block inside the empty hexagonal space. Fill each of those hexagons with two Touching Color (Sensing) blocks.
Change the left Touching Color block to the brown you used for the floor. Change the right Touching Color block to the black you used for the top of the desk. The condition is if the teacher is touching the floor or the desk.
Slide a Change Y by 10 (Motion) block inside the If/Then block. Change the number to 100 so she will go up 100 coordinates each time the up arrow is pressed.
Make a new variable in Data. Call it yVelocity and uncheck the variable so it isn’t visible on the Stage.
Snap a Set yVelocity to 0 (Data) block underneath the Change Y by 100 block inside the If/Then block. Change the zero (0) to a 7.

If the up arrow is pressed and Ms. Finebean is either on the floor or on a desk (meaning, she’s not already up in the air), she will go up 100 coordinates, and at the same time the velocity variable will kick in so she starts falling a tiny bit as she’s rising. This will give her a smooth arc. Look at the completed script in figure 13.10.

Figure 13.10. The completed jumping script enables Ms. Finebean to go up.

Making a falling velocity script

Once Ms. Finebean is in the air, she needs to fall realistically, floating back down to the ground smoothly, as she is doing in figure 13.11. This script will mimic a falling person’s velocity, having her speed up the closer she gets to the ground so she floats back down instead of dropping like a dead weight.

Figure 13.11. Ms. Finebean needs to fall realistically.

To make the falling velocity script

Start with a When Flag Clicked (Events) block.
Snap a Forever (Control) block under the When Flag Clicked block to start a loop.
Place an If/Then (Control) block inside the Forever block to set a condition.
Slide a Not (Operators) block into the empty hexagonal space on the If/Then block. Place a Hexagon or Hexagon (Operators) block into the empty hexagonal space on the Not block.
Fill the two empty hexagons with two Touching Color (Sensing) blocks. Change the left block color to the brown you used for the floor. Change the right block color to the black you used for the desk.
Place a Change yVelocity by 0 (Data) block inside the If/Then block. Change the number to –0.5 in order to have the rate of falling slowly increase over time.

You’ve set a condition in the script in figure 13.12: if the teacher is not touching the floor or the desk—meaning, she’s in the air—then change the value of the yVelocity variable to –0.5. This means that Ms. Finebean’s speed will increase by a half a coordinate as she falls.

Figure 13.12. The completed falling velocity script creates realistic movement.

Making a falling script

Ms. Finebean can go up, and you’ve set how she’ll fall when she starts moving downward. Now it’s time to make a script that will allow Ms. Finebean to fall, as in figure 13.13.

Figure 13.13. Ms. Finebean needs to start falling back down if her feet are not touching the brown floor.

This script will allow Ms. Finebean to start falling when she reaches the peak height:

Start with a When Flag Clicked (Events) block.
Snap a Forever (Control) block under the When Flag Clicked block to start a loop.
Place an If/Then/Else (Control) block inside the Forever block to set a condition.
Slide a Not (Operators) block into the empty hexagonal space on the If/Then block, and then place a Touching Color (Sensing) block inside the Not block. Change the color to the brown you used for the floor. The condition is if Ms. Finebean is not touching the floor.
Place a Change Y by 10 (Motion) block inside the If/Then portion of the If/Then/Else block. Add a yVelocity variable (Data) into the number bubble on the Change Y by 10 block. This means the Y-position of Ms. Finebean will change based on the current value of the yVelocity variable.
Put a Set yVelocity to 0 (Data) block inside the Else portion of the If/Then/Else block. The other possibility is that if Ms. Finebean is not not touching the floor (meaning, she is touching), then the value of the yVelocity variable will be set to zero (0), because Ms. Finebean is on the ground and not falling.

Look at the script in figure 13.14. Does your work match the image?

Figure 13.14. The completed falling script allows Ms. Finebean to fall if her feet have left the ground.

Making a desk detection script

Currently, if Ms. Finebean tries to jump on a desk, she’ll go straight through it. You want the teacher to be able to land on the desk and run across it in order to use the height to leap over nearby kindergarteners, as in figure 13.15.

Figure 13.15. You want Ms. Finebean to land on—and not go through—the desks.

This script will recognize when Ms. Finebean has landed on the desk:

Start with a When Flag Clicked (Events) block.
Snap a Forever (Control) block under the When Flag Clicked block to start a loop.
Slide a Go to Front (Looks) block inside the Forever block to send the teacher to the top layer on the Stage.
Place an If/Then (Control) block under the Go to Front block (also inside the Forever block) to set a condition.
Put a Color is Touching (Sensing) block inside the empty hexagonal space of the If/Then block. Notice that this is a little different from the usual Touching Color block. Change the color in the first square to the color of Ms. Finebean’s shoes (in my case, orange), and change the color in the second square to the top of the desk (in my case, black).
Grab a Set yVelocity to 0 block and put it inside the If/Then block.

The condition is if the teacher’s shoe is touching the top of the desk, set the yVelocity variable to zero (0). This is an important script because you created a script earlier that said that if Ms. Finebean wasn’t touching the ground, then she should be falling. This script changes that by creating a condition—standing on the desk—where Ms. Finebean isn’t touching the ground, but you don’t want her falling. Look at figure 13.16 to check your script.

Figure 13.16. The desk detection script knows when Ms. Finebean has landed on top of the desk.

Ms. Finebean is ready to go. It’s now time to code the students.

Programming the kindergarteners

The kindergarteners are the obstacle in School Escape, similar to the Goombas and Koopa Troopas in Super Mario Bros. Unlike those obstacles, you’ll want to jump over the students rather than land on the students and squash them. The students have five scripts: a list adding script, cloning script, movement script, game stopping script, and pause movement script. Make sure the blue box is around the student in the Sprite Zone, and keep it on the student for all five scripts. It doesn’t matter which costume is showing in the Sprite Zone thumbnail.

Learn It: Lists

As mentioned earlier, a list is Scratch’s name for an array, which is a collection of data. Think about lists as actual shopping lists. When you go to the store, you write down all the items you want to remember to purchase, one item on each line. For example, you may name your list Grocery Items and then start listing out what you need: (1) Apples, (2) Bread, (3) Milk. When you go to the store, you look down the list and put each item in your basket. A Scratch list works the same way. You give it a name (for instance, Kindergarteners) and then write out the information you want to remember and track in an ordered list. In the case of the Kindergarteners list, you’re tracking a list of numbers: 10, 60, 110, and so on. Those numbers are virtual points in the game—times when you want a kindergartener to appear on the Stage. Scratch will know that it’s time to throw a student in Ms. Finebean’s path because it will keep checking to see whether the value of the scrollX variable (which goes up by one every time the right arrow is pressed) matches one of the items on the list. When they match, it will spawn a clone of the student sprite. You’ll see a student when the scrollX variable equals 10, 60, 110, and so on.

Making a list adding script

You currently have your imported list that states when each kindergartener should spawn. Yet when you go to play the game, the values will begin deleting off the list after they’re used. To solve this problem, you need to generate a second, identical list, as seen in figure 13.17, at the beginning of every game so the values will be deleted from the list copy instead of the original list.

Figure 13.17. The original list will remain untouched, and values will be deleted from the copy.

This script enables you to play round after round of the game because the original list will always be intact, even though other scripts will delete values from the duplicate list:

Start with a When Flag Clicked (Events) block.
Go to Data and create a new variable called #ofKindergarteners. You will use this variable to refer to an item on the list. When the value of #ofKindergarteners is 1, it will be looking at the first value on the list. Uncheck the variable.
Click Make a List and make a new list called Kindergarteners2. This will be your list copy of the original Kindergarteners list. You can uncheck this new list.
Snap a Set #ofKindergarteners to 0 (Data) block under the When Flag Clicked block. Change the value to 1 so this variable will line up with the first item on the Kindergarteners2 list.
Slide a Delete 1 of Kindergartener2 (Data) block under the Set #ofKindergarteners to 1 block and use the drop-down menu to change 1 to All. This will remove the values from the Kindergarteners2 list while keeping the identical, original Kindergarteners list intact.
Grab a Repeat 10 (Control) block and add it to the chain of blocks. Change the number to 30 because you have 30 items on your list.
Place an Add Thing to Kindergarteners2 (Data) block inside the Repeat 30 block. Next slide an Item 1 of Kindergarteners2 block inside the space that says Thing on the Add Thing to Kindergarteners2 block, as seen in figure 13.18.
Figure 13.18. Add the block inside the drop-down menu space on the Add Thing to Kindergarteners2 block.
Slip a #ofKindergarteners (Data) variable into the number bubble on the Item 1 of Kindergarteners2 block. Now you need to tackle the drop-down menus. Change the line so it reads Add Item #ofKindergarteners of Kindergarteners to Kindergarteners2.
Drag a Change #ofKindergarteners by 1 (Data) block underneath that long block, inside the Repeat 30 block.

There will be 30 loops, one for each item on the original list, and in each loop the script will add an item from the Kindergarteners list to the Kindergarteners2 list. It knows to move to the second, third, and fourth item (and so on) due to that #ofKindergarteners variable. When that variable equals 2, it copies the second item on the list. When that variable equals 3, it copies the third item on the list, and so on. The script in figure 13.19 stops running once all the items are duplicated from the original list onto the list copy.

Figure 13.19. The completed list adding script creates a copy of the original list.

Making a cloning script

You have a duplicate of your list, but it’s currently hanging out as a group of numbers. It’s time to put those numbers into action and have a kindergartener generate, as in figure 13.20, every time a number on the list matches up with the value of the scrollX variable, which marks the virtual location of Ms. Finebean.

Figure 13.20. The game looks at the values on the list and clones a student every time one of those values matches the value of the scrollX variable.

To make the cloning script

Start with a When Flag Clicked (Events) block.
Snap a Hide (Looks) block underneath the starter block.
Place a Forever (Control) block next to form a loop.
Slide an If/Then (Control) block inside the Forever block to set a condition.
Put a Square = Square (Operators) block inside the empty hexagonal space on the If/Then block. In the left square, place a scrollX (Data) variable block. In the right square, place an Item 1 of Kindergarteners2 (Data) block. So the condition is if the value of scrollX equals the value of the item on the Kindergarteners2 list.
Put a Go to X/Y (Motion) block inside the If/Then block. You don’t need to change the values (even if they differ a bit from the ones in figure 13.21), because you want them to be the current position of the student on the Stage.
Figure 13.21. The Pick Random block goes inside the Switch Costume block in order to have it randomly choose one of the four options each time.
Drag a Switch Costume to Costume4 (Looks) block and place it underneath the Motion block.
Slide a Pick Random 1 to 10 (Operators) block inside the drop-down menu currently stating Costume4, as in figure 13.21. Change those numbers to 1 to 4 to stand for the four versions of the student sprite. This means Scratch will randomly use one of the four options each time it spawns a kindergartener on the Stage.
Add a Create Clone of Myself (Control) block next (still inside the If/Then block), to generate the student.
Place a Delete 1 of Kindergartener2 (Data) block to complete that chain, which removes each individual value from the Kindergartener2 list after it’s been used.

Four things will happen if the value of the scrollX variable matches an item on the Kindergartener2 list, as seen in the completed script in figure 13.22: (1) a student will appear on the Stage, (2) the student will be standing where you positioned her when setting up the Stage, (3) the student will take the form of one of four possible options, and (4) that item will be deleted off the Kindergartener2 list.

Figure 13.22. The completed cloning script puts a random kindergartener in Ms. Finebean’s path.