This is part two of a three part series about making a platform game in Scratch. In this tutorial we’ll be creating the first level of the game and enabling our character to respond to the arrow keys in order to jump and move.
- Part 1 – Character Creation and Intro Screen
- Part 2 – First Level and Character Movement
- Part 3 – Adding a Goal, More Levels and an Ending Screen
The game mechanics for this tutorial are based upon the excellent wall detection platformer tutorial posted by fireball123 on the Scratch website.
Let’s give our blue guy a challenge now. We’ll create a new sprite called “Level” which will have a different costume for each level in our game.
Click on the new sprite button to open the Paint Editor window. Make sure you zoom all the way out by clicking on the zoom out button since we want to create a sprite that will fill the entire stage.
Now select the paintbrush tool and select a large brush that can be used to draw the walls and platforms for our level:
Change the color to something you’ll like for your first level, I’ve selected an orange color. Now switch to the line tool and draw a boundary around the stage. The boundary should extend around the entire stage because we’ll be using contact with the Level sprite to know when our Blue Guy should bounce.
You can also add a couple of platforms while you’re at it. Don’t make this too difficult. Remember, this is the first level! When you’re done you should have something similar to that shown below:
Click OK to save the sprite, and rename it to “Level1”.
Now switch to the scripts tab for the Level sprite. We don’t want to see the level until the game starts. So when the green flag is clicked, make the Level sprite hide. Then, when the Game Started message is received, we’ll show our Level sprite centered on the stage:
In part one of the tutorial, we left our Blue Guy hanging in the middle of the screen when the game started. Let’s make sure he starts off centered on the stage, but just above the ground. Change the y-coordinate from zero to a value that puts the blue guy just above the ground, in my case it was -135.
Now for something interesting…In order to check whether our blue guy has touched a platform or wall, we’re going to equip him with special sensors. There will four sensors in total: one for the top, bottom, left and right sides of the blue guy.
These sensors are going to overlay our blue guy and follow him around the screen at all times, but we won’t see them! In order to make our sensors we’ll start with four copies of our blue guy sprite so that we know where exactly to put each sensor. Duplicate Blue Guy four times and rename the sprites “Top”, “Bottom”, “Left” and “Right”.
Open the top sprite in the paint editor and select the solid rectangle tool. Draw a filled rectangle along the top of the sprite like this:
Now erase (yes, erase!) the blue guy beneath the black rectangle. So what you have left is just the black rectangle:
Now, let’s do the same thing for the bottom sprite. Draw a black rectangle at the bottom of the sprite:
Now erase the blue guy again:
Are you getting the idea? Now let’s do the same for left and right. When you draw the rectangle for left and right, avoid extending the rectangle to the top of the blue guy. The reason for this is that, if more than one sensor is touching the Level sprite at the same time, you may see some odd behavior with your character. We only want the top and bottom sensors to respond when we hit a platform. We want the left and right sensors to respond when we hit a wall. Here’s what your left sensor should look like:
And now, after erasing the blue guy:
Now, do the same thing to create the right sprite, but on the right side of the blue guy 🙂
Ghost Effect, Woooo
Spooky huh? When the green flag is clicked, we don’t want the sensors to appear at all, so we’ll hide them. When the game starts we want the sensors to go to the blue guy and disappear (but still be there!). To make this happen we’ll use a special trick called the ghost effect. The ghost effect changes the transparency of a sprite. If if the effect is set to 100 it is invisible or 100% transparent. If it is set to zero, then it is visible. In this case, we want the sensor sprites to be transparent so we set the ghost effect to 100. Change the scripts for each of the sensors to the following:
What happens when you click the green flag and then press the space bar? You should only see the blue guy sitting at the bottom of the stage, like so:
What happens if you change the ghost effect? Try it out, set the ghost effect to 50. Here’s what you should see:
Notice the gray bars around the blue guy? These are the sensors at 50% transparency. Once you’re done experimenting with the ghost effect, don’t forget to set it back to 100!
Let’s Move It
The blue guy, that is. Let’s start with the bottom sprite. We’ll put in place code to make the blue guy jump when the up key is pressed, and we’ll also make him accelerate downward until the bottom sensor touches the level sprite.
Before we change the script for the bottom sprite, we’re going to need to add some variables. Switch to the variables palette and add a variable named “Y Velocity”. Leave “For all sprites” selected and click “OK”.
Now add another variable named “X Velocity” and leave “For all sprites” selected also. Click OK.
Now switch back to the bottom sprite and click on the scripts tab. Here’s where we’ll use the Y Velocity variable.
- Each time we loop, we’ll subtract 1 from Y Velocity. This will result in a downward acceleration of our blue guy, as the Y Velocity will decrease from -1, -2, -3 and so forth.
- If the bottom sensor touches the level sprite set Y Velocity to 1. This ends up having the effect of cancelling the downward acceleration. When the blue guy is touching the level, the Y Velocity will alternate between 1 and 0 (because we subtract 1 on every loop).
- If we’re touching the level sprite and the player presses the up key, then set Y Velocity to 20. This has the effect of causing the blue guy to jump. You can experiment with this value to get the blue guy to jump to different heights.
Here’s what the bottom sprite script should look like now:
We’ll now use the value of Y Velocity to change the position of our blue guy. Switch to the scripts tab of the blue guy sprite. Add a forever loop just after the show command. In the forever loop we’ll change our Y coordinate by the value of the Y Velocity variable:
Try it out, the blue guy should jump when the up key is pressed and then accelerate down until he touches the level. Did it work? If not, go back and check your scripts to make sure they’re correct.
Before we move on, we need to account for what happens when our blue guy jumps up and hits the underside of a platform. We’ll change the Y Velocity so that he quickly moves downward.
Switch to the Top sprite and select the scripts panel. Add an if block to sense whether the Top sprite is touching the Level sprite. If so, set the Y Velocity to -4. Once again, you can experiment with this value to see what effect this has. After you’ve made the changes, the Top sprite script should look like this:
Left, Right, Left, Right…
Now that we can jump up and down, let’s make the blue guy move left and right. To get the blue guy to respond to the left and right arrow key presses, we’ll add some code to the blue guy’s script.
When we press the left arrow key, we want blue guy to face left (direction = -90) and we want to subtract from the value of X Velocity. This will have the effect of accelerating the blue guy to the left as X Velocity decreases.
Likewise, when we press the right arrow key, we want blue guy to face right (direction = 90) and we want to add to the value of X Velocity. This will accelerate our blue guy to the right as X Velocity increases.
In order to have an effect on the movement of the blue guy, we’ll need to change the X position of our blue guy by the value of X Velocity. To do this we’ll add another block just after the “change y by Y Velocity” block, which will read “change x by X Velocity”
One more thing: when the game starts we want to make sure that X and Y velocity are both zero. We don’t want our blue guy moving until we press an arrow key. Also, make sure that you constrain the blue guy to face only left or right. We don’t want him rotating on us. So click the button next to the Blue Guy sprite.
Here’s our Blue Guy script so far:
If you play the game now, you’ll notice some weird behavior when the blue guy reaches the sides of the stage. Instead of bouncing off the wall, he just keeps going. Let’s put a stop to that!
Go to the Left sprite and open the scripts tab. In the forever loop, just after the “go to Blue Guy” block, add an if block to sense whether the Left sprite is touching the Level sprite. If so, we want to set the X Velocity to 2. This will counteract movement to the left, making our blue guy bounce right (a little).
Now do the same thing for the Right sprite, but this time instead of setting the X Velocity to 2, we’ll set it to -2. This will make the blue guy bounce to the left:
OK, that should fix the problem with bouncing when the blue guy touches the walls. Try it out, is everything working?
Before we move on, let’s improve this a little bit. Let’s give blue guy a little stickiness so that he doesn’t just keep on moving. To make it seem like his motion is slowed by friction, we can reduce X Velocity by some factor. In this case, let’s reduce it by 10% on each loop. To do this we’ll multiply the X Velocity by .9. Let’s also make sure that our blue guy is facing in the same direction each time the game starts. Here’s our updated blue guy script:
Here’s what we’ve done so far:
- Created our blue guy character.
- Created the intro page.
- Made our first level.
- Made our character move when the arrow keys are pressed.
Next, we’ll add a goal that our blue guy needs to reach in order to get to the next level, and we’ll add a couple more levels to the game to make it more interesting. Finally we’ll add a screen that’s displayed at the end of the game after our character reaches the final goal.
If you’re ready, let’s move on to Part 3 of the Platform Game Tutorial…