Building a platform game with Scratch

Building platform By

Paul

Koning,

a

game 2013

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

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

2

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!


3

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.


4

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. Scratch tutorial – Building a platform game (2013-03-27) Written by Paul Koning, 2013

5

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!


6

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.


7

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.. Scratch tutorial – Building a platform game (2013-03-27) Written by Paul Koning, 2013

8

This limits vspeed to a maximum of -7.

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.


9

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!


10

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


11

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.


12

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.

Stop falling. Fall if not on a platform.

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:

Falling slow Falling normal

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. Scratch tutorial – Building a platform game (2013-03-27) Written by Paul Koning, 2013

13

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!


14

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:


15

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:

Clone positions

Position of the original 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.


16

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!


17

New lessons will soon arrive! Be patient please…


18

Building a platform game with Scratch

Recommend Documents