Scratch Platformer Tutorial — Part 1

There are a variety of different types of games out there; RPG, MMO, puzzle, action, sandbox, the list goes on and on…

However, platformers have stuck with me the most as being one of my favorite genres of games and the genre of the first video game I played.

So in this tutorial series, I’ll be showing how to make a platformer game in Scratch. This means that you won’t have to do any coding to make it!

In this part we’ll be going over the basics — player movement, the background, and gravity. Over the next couple of articles we’ll cover the other aspects of our platformer game.

Before we start, if you don’t know anything about Scratch, it’s recommended that you read How to Make a Game Without Coding to learn the ropes.

The Player and Backdrop

First we’re going to want to delete the Scratch Cat sprite. We won’t be needing it. Seeya!

Now that he’s out of the way, let’s start by making a sprite for our player. We’re going to want to choose the “Paint” option to make our player character unique.

Now that we’re here, we can do some very basic designing:

1. Select the square tool

2. Drag on the canvas to make a square. Hold shift to make it a perfect square.

3. Drag it to the center (make sure it snaps in) and change it’s outline color, outline weight, and fill colors to your liking.

Our player is done! Yeah, it’s just a square, but we’ll make it more detailed later. For now we’ll want to focus on making it move.

(I’ll name him Fred though)

In the “Code” tab, we’re going to make the same Forever and If combo that we did in the Introduction to Scratch article. The only difference is that both if statements are in the same forever loop instead of two different forever loops side by side.

While in the previous article we used the “move 10 steps” block and changed Scratch Cat’s direction, there’s a much simpler way to move in a specified direction. Since moving horizontally is changing a sprite’s X position, and moving vertically is changing it’s Y position, we can use the “change X by” and “change Y by” blocks to change them directly:

Changing a sprite’s X position by 5 is the equivalent of moving it 5 steps while facing to the right. Changing it by -5 moves the sprite to the left.

We’re not going to change it’s Y position yet, as that depends on the force of gravity.

Speaking of gravity, for it to work we need some solid ground in our world. Let’s make some.

Click the Stage:

The Stage can do everything that sprites can do, with a few exceptions. It has no motion category, and the looks category looks a little different. Instead of costumes, the Stage switches backdrops.

Then click the “Backdrops” tab:

We can use the square tool like we did previously to make a sky and ground for our platformer world.

Note: Make sure to keep the black outline! It’s going to become very useful when we implement our gravity.

We should shrink our player so it can fit in the world:

Now we can start our gravity!

Variables

It’s time to go over variables! You might of heard of the word “variable” from some complex coding tutorial, or you might know what it is already (in that case skip this whole section), or you might’ve never even heard of it at all. Either way, variables are an important part of the Scratch engine and understanding what they are is fundamental to making games.

Variables are like containers — the container has a label, and it has a value inside of it. You can always check or change what’s inside the container by referencing it’s label.

Each Scratch project comes with a pre-made variable: “my variable”. If you click the variables category in the Block Sidebar, you’ll see it there.

You can drag the oval “my variable” block out into the Block Area, and click it to see it’s value. Every variable starts at 0 when it’s first created.

The “set variable to” block sets the variable to any value you input in the white space. A variable value can be anything — numbers, strings (words), booleans (true/false).

The “change variable by” block adds the input in the white space to the variable. This only works with numbers. For example, changing a variable with a value of 1 by 1 sets it to 2. Changing a variable with a value of 1 by -1 sets it to 0.

Finally, the “show variable” and “hide variable” blocks change whether or not the variable is visible on the Stage.

When a variable is visible, it looks like this:

The “0” is the value of the variable. You can also click the checkbox next to each variable to toggle it’s visibility manually.

We’re going to want to delete the “my variable” variable (right click it and click delete). Then click the “Make a Variable” button.

Make sure to keep all the settings the same (we’ll get into those another time), and name the variable “y motion”. Remember, the name of the variable is just a label, so it won’t matter what you name it. However, it’s not a good idea to name your variables something that has nothing to do with it’s purpose or value — if you ever look back on it later on, you won’t know what it was used for!

Now that you have your new y motion variable, click the checkbox to disable it from the Stage.

Add this code to the player’s Block Area:

This simple block chain sets the variable to 0 when the green flag is clicked (when the game is started).

The y motion variable will always hold the velocity of our player in the y axis. If the variable has a value of 1, the player will move 1 step upwards every frame. Similarly, if it has a value of -1, the player will move 1 step downwards every frame.

To accomplish this, we’ll need to activate a block of code every frame of the game. And you know what that means — forever block!

Make sure to drag the y motion variable from the variable list — don’t write the words “y motion” in the white space of the block. This block chain means that every frame of the game the player’s y value will be changed by the value of y motion. Right now it’s 0, so if you click the green flag it’ll stay the same.

It’s time for the most important force of the game: gravity!

To make realistic gravity, we need to make the rate that the player is falling increase the longer they aren’t touching the ground. In other words, the longer they fall, the faster they fall.

Normally this would be hard to execute, but luckily, we just made our y motion variable! This small block chain is enough to control gravity:

A quick overview of how this works:

• The code inside the forever block executes every frame
• If the player is NOT touching the color black, repeat the following code until the player IS touching the color black:
• Change the y motion variable by -1
• After the player is touching the color black (the repeat loop has ended), set the y motion variable back to 0

The most confusing part of this block chain is the “repeat until” block — it repeats the code inside of it over and over, similar to a forever block, but it continues only until the condition inside of it is true.

Furthermore, the “touching color” hexagon block checks if a sprite is touching a specific color. This color could be in the Stage (how it is here) or in another sprite. If a variable is visible, it’s colors will NOT count.

Try clicking the green flag, then dragging the player off of the ground — watch as gravity happens!

If you want to make the gravity faster or slower, change the value from -1 to a higher or lower number. We’ll change it to -0.75 to make it a little bit slower, but you can change it to your preference.

Jumping

The last thing we’ll be doing is jumping. To make our player able to jump, we’ll need to make a new variable that returns whether or not the player is jumping. It will always be either 0 (not jumping) or 1 (jumping).

It’s recommended to name true/false variables with a question mark at the end to make them easier to understand and reference.

We don’t want this variable to appear in the Stage either, so uncheck it from the variable list.

Set this variable to 0 along with the first one:

Now for the actual jumping part. First, make a simple Forever + If combo that checks if you’re pressing the up arrow key:

Inside it we’ll want to do a couple of things:

• Set jump? to 1
• Set y motion to 3 (or any other high number)
• Continuously increase y motion
• Continuously decrease y motion
• Set jump? to 0

This block chain does the trick:

Configuration:

• Change the 10 in the “wait seconds” block to change the height the player can jump
• Change the 0.5 in the “change y motion by” block to change the speed of the jump
• Change the -0.5 in the “change y motion by” block to change the speed of which the player loses their jumping momentum

The player doesn’t really jump that high yet. To let them reach their full potential, add an if statement to the gravity block that checks if the player is jumping. This makes the game ignore gravity if it knows that the player is jumping.

Finally, you might have noticed that when the player lands, they fall into the ground a bit:

To stop this, just add an repeat statement at the end of the gravity block that checks if they’re touching green, and pushes them up until they’re not.

Now they won’t end up underground.

Part 1 — Finished!

We finished part 1 of our platformer game!

Let’s review what we did. We:

1. Created our player sprite and used user input to move them left and right responding to the arrow keys
2. Drew our backdrop using the square tool
3. Used variables, special containers, to manipulate values
4. Added gravity that pulls the player down and senses the ground
5. Allowed the player to jump in a realistic way

See you in the next part!