building a platform game with scratch

Building a

platform game By Paul Koning, 2013

Scratch tutorial – Building a platform game (2013-03-27) Written by Paul Koning, 2013 2

Content Foreword ................................................................................................................................................. 3

What are the requirements for this tutorial? ................................................................................. 3

Why is Scratch 2.0 used for this tutorial?........................................................................................ 3

Can I use Scratch 1.4 for this tutorial? ............................................................................................ 3

Lesson 1 – A first attempt to jump, fall and land .................................................................................... 4

1.1 Falling ............................................................................................................................................ 4

1.2 Moving left and right ..................................................................................................................... 5

1.3 Jumping ......................................................................................................................................... 5

1.4 A platform ...................................................................................................................................... 5

Lesson 2 – Gravity is cool ........................................................................................................................ 7

2.1 Break it up! .................................................................................................................................... 7

2.2 Add gravity for better results ........................................................................................................ 8

2.3 Falling with gravity ........................................................................................................................ 8

2.3 How to jump with gravity? ............................................................................................................ 9

2.4 Don’t jump in the air, please! ...................................................................................................... 10

Lesson 3 – One fine landing ................................................................................................................... 11

3.1 Image flipping for better landings ............................................................................................... 11

3.2 Don’t stop when you jump up ..................................................................................................... 14

3.3 No more hanging around ............................................................................................................ 14

3.4 A thin line .................................................................................................................................... 15

3.5 Copy that? ................................................................................................................................... 16


Foreword Do you like to play games? Then I’m pretty sure that you have ever played platform games. A

platform game is a classic game style that was made famous by characters like Mario. In this tutorial

we are going to build a platform game in Scratch 2.0.

What are the requirements for this tutorial?

You should have some experience with Scratch. I assume that you know how most blocks

works, what costumes are, how to play sounds, etcetera.

If you are new to Scratch you’d better start with some beginner tutorials first.

You need a computer with access to the internet. In this tutorial we are going to use the

webbased version of Scratch: Scratch 2.0.

This version is at this moment still a beta version: http://beta.scratch.mit.edu/

Why is Scratch 2.0 used for this tutorial?

Scratch 2.0 has some new features that we will use in this tutorial:

Building custom blocks

We can use this to break our codes in smaller parts what makes it more readable.

Cloning

Instead of copying the same blocks over and over again, we are going to clone them. This will

be a giant timesaver!

Can I use Scratch 1.4 for this tutorial?

Some of the examples will work in Scratch 1.4 but as we move on in this tutorial we will use the new

Scratch 2.0 features more and more. That will make it difficult to use the old version of Scratch. So I

suggest switching to Scratch 2.0. I don’t think that you will go back when you are used to it!

And now… let’s get started!

http://beta.scratch.mit.edu/


Lesson 1 – A first attempt to jump, fall and land In the first lesson we will create the most basic features of a platform game:

A player should fall from top to bottom.

A player on a platform or the floor has landed and does not fall anymore.

A player must be able to jump.

A player must be able to move to the left and right.

There are a lot of different ways to make this work in Scratch. I will show different techniques, first

they are simple and later on they become more difficult. You will see that the more difficult

techniques will make a better game. There are probably other techniques that I don’t describe that

work just as well or even better. In programming there’s never just one solution. I hope that you not

only copy what I describe but that you experiment and find your own solutions!

1.1 Falling We need a player in our game. You can use any sprite for a player but for now we will use a simple

blue square of 32 by 32 pixels. You can draw this in Scratch or a simple program like ‘Paint’ in

Windows.

Our player!

We want our player to fall from top to bottom. This means that we have to decrease y. There’s no

floor in our first attempt but when our player is somewhere below we want it to stop falling. You

may optionally draw a floor if you find it useful.

The code for this will look like this:

At first we position the player in the center of the screen. After that we decrease y by 3 until the

player is at the bottom. I use -160 and not -170 for the bottom. This ensures that we won’t see only

the half of our player when the bottom is reached.


1.2 Moving left and right Now we add some left and right movement. This means that we have to increase or decrease x. I will

use the arrow keys to move and jump.

1.3 Jumping Our player falls down and it can be moved to the left and right. It’s time to jump! Jumping means

that y should increase. But as y also is permanent decreasing we have increase y by a larger number

than the we use to let it fall down.

When up arrow is pressed y is increased by 8. But because it is also decreased by 3 earlier in this loop

the result will be an increase by 5.

Try it and you’ll see that the player jumps. Well… it’s more some kind of flying instead of jumping but

for now it’s good enough. Remember… this is just the first attempt!

1.4 A platform Next we’re going to add a platform. We use a square as big as our player but a different color.

Yes, it’s a platform!

What do we want to happen if the player is on the platform? The player has to stop falling so the y

should not decrease anymore. We will check for a collision to see if the player has landed on a

platform.


This might look a little strange a first. We are checking if our player is not touching the black color of

a platform. Only then we will decrease y if it is bigger than -160. We can combine those 2 conditions

with an and block. This gives the following code:

Ok, we are done by now. Make a few copies of the platform sprite (we will use cloning later on) and

build a simple level. You just made a very simple platform game!

It’s not a very good game at this moment, to be honest: you can land in a platform instead of

jumping upon them, when you keep pressing the up arrow you fly, it looks like the player floats when

he falls, … Don’t worry! We are going to fix these problems in the next lessons and will get better and

better!


Lesson 2 – Gravity is cool In this lesson we are going to improve the way our player falls and jumps. But first we are going to

make our code more readable.

2.1 Break it up! In Scratch 2.0 you make your own custom blocks. This has two advantages:

1. You don’t have to write the same code more than one time.

2. You can make your code more readable.

We are going to rewrite our first program using the following custom blocks:

playerFall

playerMoveLeftRight

playerJump

Use the new Scratch 2.0 function Make a Block for this. When you are finished this is the result:

Try this program. It should behave just like our program in lesson 1.


2.2 Add gravity for better results When our player falls down it looks like he floats. Why? Well, in the real world you will fall faster and

faster. Our player falls with a constant speed. We can change this by adding gravity to our program.

Just like in the real world the gravity pulls our player down. It keeps pulling during the fall so the

speed of the fall will increase.

To implement this we will add two variables to our program:

gravity

vspeed

Gravity pulls the player down, that’s why it is a negative number. The variable vspeed indicates the

speed of the fall. When our program starts we set the gravity to -1 and vspeed to 0.

2.3 Falling with gravity Now we are going to change the way our player falls. This is how a fall with gravity works:

1. If a player is in the air:

a) Increase vspeed by gravity (it’s in fact decreasing as we use a negative number)

b) Move the player down by the amount of vspeed.

2. If the player is on the ground or on a platform:

a) Set vpeed to 0.

Change the custom block playerFall to achieve this:

Try the program. You will notice that player will fall very fast… a bit too fast to be honest. That’s why

we are going to limit vspeed to a maximum of -7 using an if block..


Now our player will never fall too fast.

2.3 How to jump with gravity? The last thing we have to change is the way we jump. We can make the player jump by simply setting

vspeed to a positive number. The y of our player is changed by vspeed so our player will move up.

The gravity will decrease vspeed so after a while the jump will end and the player starts to fall.

Change the custom block playerJump to this:

Give it a try. Is our player jumping? No… when we want to jump our player is either on the floor or on

a platform. So when we want to jump we set vspeed to 10 but then vspeed is immediately set to 0 in

the custom block playerFall.

To fix this problem we are going to lift up the player a bit when we start to jump. He’s leaves the

platform or the bottom and because of that the vspeed will not be set to 0 by playerFall.

At this moment our player still falls in the platforms and in the floor. That’s why we lift our player by

the amount of 4. Further on we are going to change the way our player lands and improve our jump.

This limits vspeed to a maximum of -7.


2.4 Don’t jump in the air, please! Now there is one thing left to fix. Our player can jump when he’s in the air. That’s not what we want. The player should only jump when he’s on the floor or a platform. When the player is on the floor or a platform the vspeed is 0. By adding the condition that the vspeed should be 0 we can assure that the player will only jump from the floor or a platform.

Now our player won’t jump in the air anymore. However… if you keep the up arrow key pressed it will still jump in the air. This is because of the fact that when our player jumps vspeed will be 0 for a short while. This is at the moment when the jump ends and the fall will start. We can fix this by setting the vspeed to a point number when the jump starts. Now the vspeed will only be 0 when the player is on the floor or a platform. We want some higher jumps as well so we will change it to 14.9.

Our player now jumps and falls in a more natural way. Experiment with the gravity, the maximum vspeed and the amount of vspeed when a player jumps and see how it changes the feel of your game! That’s all for this lesson. We improved the game but there it’s still far from perfect. Our player can jump from below or beside into a platform and it often lands into a platform when he fall upon it. That’s what we are going to take care of in lesson 3!


Lesson 3 – One fine landing In this lesson we are going to improve our landing on platforms. We will use a special technique for

this which I will call image flipping.

3.1 Image flipping for better landings When you play the game we have made so far you will notice that our player falls into the platforms.

This happens because of the fact that our player has a maximum vspeed of -7. So at the maximum

speed our player takes steps down with a size of 7 pixels each. When, for example, y has a value of

-150 the next value will be -157. And what if there is a platform at -154? Then our player will fall in

this platform for 3 pixels deep. The game simply does not notice the collision earlier.

There are several solutions for this problem. Before we can implement our solution we have to

delete all platforms except for one. From now one we will use cloning to create more than one

platform. This will prevent that we have to change more than one platform when we make changes

to it.

Only two sprites left…

As we said before, the player falls down with steps of maximum 7 pixels. This means that there is a

gap of 6 pixels between those steps. We need a kind of sensor that scans below our player if there is

a platform in this gap. To make such a sensor we will add an extra costume to the sprite of our

player. We add a rectangle to the bottom of our player. This rectangle will behave as a sensor.

Duplicate the costume of the player, rename it to PlayerDummy and add a red rectangle to it at the

bottom (32x6 pixels). It’s very important that you duplicate the players costume in Scratch! This

assures that the center of the costume is correct. If the center of the costume shifts the sensor will

not be at the right place.

A red rectangle is our sensor


When you are finished it should look like this:

Now what are we going to do with this dummy costume? There are four steps we will execute each

game loop:

1. Switch to the dummy image.

2. If blue hits the platform stop falling down.

3. If not: check if the red rectangle is touching a platform.

a. Not touching? Keep on falling at normal speed.

b. Touching? Fall with a speed of -1 until the blue part hits the platform.

4. Switch back to the normal costume.

You might wonder if you are going to see a flickering player if we use this technique. Fortunately we

don’t. Scratch only shows the last costume you switch to in a game loop. But you can use other

costumes to check for collisions!

Before we write the code there is one last thing we have to do. We are not going to use the y

position anymore to check if the player has reached the bottom. That will make things to

complicated when we use the new technique. Instead of that we add a new platform called floor that

has the shape of a big black rectangle.


Ok, done that! Let’s code! We are going to change the custom block playerFall. First we rewrite the

existing code a little bit. When blue touches black the player stops falling. If not, the player will fall.

Try the program and you will see it behaves just it did before.

Now we add the image flipping. Let’s repeat what we have got to do:

Switch to the dummy sprite

Check if blue is touching black or…

Check if red is touching black

o Yes? Fall slow

o No? Fall normal

Switch back to the normal image

That will give the following code:

When the player falls slow then maximum of vspeed will be -1. At this speed the player will always

fall exactly 1 pixel deep into a platform.

Stop falling.

Fall if not on a platform.

Falling slow

Falling normal


Try it and you’ll see… that our player can’t jump anymore! When we try to jump the red rectangle is

always in the black part of the platform. That means that vspeed will be set to -1 and that our player

will keep falling down. We will fix this in the next part of this lesson.

3.2 Don’t stop when you jump up To fix our jump problem we are going to think about when we want our player to land. Do we want

our player to land when he jumps up? No, we only want to land when we fall down. This means that

vspeed has to be negative if we check for falling. We will add this to our code:

Now our player can jump again. Before he lands he slows down what insures he will not fall into

platforms too deep anymore. Later on we will improve this and our player will land exactly on top of

platforms. For now a constant 1 pixel deep is good enough.

3.3 No more hanging around It’s time to fix the next annoying problem. Our player gets stuck in a platform when he jumps against

it from below. We are going to change this but keep in mind that in this lesson the platforms will not

be solid. The player can jump up through a platform and then land on it. We will make solid

platforms in the lessons that will follow.

There are two problems at this time that make the player get stuck into a platform:

1. We check the complete costume of our player while we should only check his ‘feet’.

2. We use very thick platforms so there is a big surface to get stuck into.

People land on their feet. Our player should land like this too. But until now we used a full blue

square to check for collisions. We can use image flipping again to fix this.

We only want to check the ‘feet’ of our player for collisions, not the ‘head’ or ‘body’. So in our

costume playerDummy we chop of all of the blue except for one thin line with a thickness of about 1

or 2 pixels. Make sure it’s not too thin! Like I said before: make sure not to change the center of the

costume!


Try the game. Has anything changed? No, the player still hangs in the platforms. When the player

jumps up his ‘feet’ will touch the platform and then vspeed is immediately set to 0. But this should

only happen when the player is falling or when the player is standing on a platform. In other words,

vspeed should be less or equal to 0 if we check for blue touching a platform.

Scratch has no block for to compare if a number is less or equal ( <= ) to 0 but we can use < 0.01 what

in our case is more or less the same. The variable vpeed will never be 0.01 so if we compare if it’s

smaller then 0.01 it will always be 0 or a negative number. We change our code in:

Now the player jumps through a platform and lands upon it. However, sometimes he still gets stuck

in a platform, for example when we hit the platform sideways or when we jump just high enough to

reach a platform. That’s because our platform is too thick. There is too much surface that gives a

collision at this time.

3.4 A thin line To avoid this problem we create a small platform… very small! Just a 1 pixel thick line, that’s all!

Try the game. It’s now impossible to get stuck into a platform. What if you want the platforms to look

thicker? Just add a rectangle in a different color to it like this:


We do not check for a collision with dark blue so it has no effect on how our player behaves. You can

even add a dark gray rectangle that gives the illusion of a solid color platform. As long as only the top

line of the platform is really black it has no influence on the behavior of the player.

3.5 Copy that? Now we are going to use a new function of Scratch that is called cloning. When you clone a sprite you

make an exact copy of it. Not only the costumes but also the variables and (a part of) the code. This is

very useful when you build a platform game.

Imagine that you’ve created an enemy sprite. It has several costumes, variables like x, y and health

and code that describes how this enemy behaves. If you want more than one enemy you could copy

the sprite and that would work fine. But what if you have to change the costumes or the code of the

enemy? Then you have to change all the enemies. Or you have to delete all enemies except for one,

change it and then copy them again. That’s a lot of work… You don’t have to this if you use cloning.

There is only one sprite to change. All the clones will be exactly the same. Trust me.. this will be a

giant timesaver!

We’ve only got one platform and we want more. So… lets’s clone! Our platform has only 1 costume,

no code and no variables (it actually has variables like x position and y position but we don’t use

them). Instead of cloning we could use the stamp function just as well. But later on we will add code

to our platforms: we want them to scroll so variables like y position have to change. It’s better to

start with cloning now and to get used to it.

We will create a random level with 10 platforms. There is 1 original platform and there are 10 clones.

Add this code to the platform sprite:

Try the game. Every time you start it there will be a new level.

We can create clones at runtime and we can also delete them while our program runs. We use this to

demonstrate how we can create a new random level while the game is running. What do we have to

do for that? First we delete al clones and then we create a new random level with new clones.

We will broadcast a message named destroyPlatforms to tell all clones to destroy themselves. After

the message has been broadcasted and the clones are deleted we create our new random level. See

the next page for the code.

Clone positions

Position of the original sprite


When the spacebar is pressed all clones will destroy themselves. After that we create a new random

level with our custom block createRandomLevel.

That’s all for this lesson. This is a pretty good base to create a platform game. We need some nice

sprites, sounds, enemies and objectives but our first game engine is up and running!


New lessons will soon arrive! Be patient please…

building a platform game with scratch

Documents