This Instructable will show the basics of Scratch, a simple and easy to use design program, and how to make a Super Mario game using it.
Scratch is one of the best programs for beginner designers and I am sorry for all the people who use more advanced programs than Scratch, but this instructable is for everyone and anyone.
The thing that most people don't understand about games is that it takes loads of time to create one. If you refer back to one of the first Mario games, and look at one level, it could take you between one and three days to design something that works as well as that IF you can program decently. For this reason I have created a one level Super Mario game which has almost all the 'rules' of how to make your game work.
During this instructable I will be referring to certain things and will just call them by either abbreviations or by other names entirely. As to not confuse you I have created a list of what I call what:
Rules: The things on the left side that you can pull onto sprites script
(go to) Paint: When you go to costumes of a sprite and click edit, it will bring up the Paint page
S(x): Sprite number x
g+w colour: the colour in Paint that is the bottom right colour, the one with 4 blocks in it.
Step 1: Getting Scratch, Setting It Up and Finding Images
The first thing you need to do is download Scratch. It is a free and can be found at scratch.mit.edu/ .
Once you have downloaded scratch I suggest fiddling around with the "rules" and with the examples they give you; try figure out how they work and then make your own. Once you have had enough of fiddling, create a new program and create 8 sprites, (13 if you want to do coins). When you create a new sprite it will ask you to make a new image. Just place a dot in each of them. Later on you will change each of the images.
The next thing you need to do is get your images. You can either make your own or you can get some from the internet. I got most of mine form the internet and have placed them in the images for you to get. They are in their raw form so some editing will have to be done. I however created my own coins as I couldn't find any images of flat faced coins.
Step 2: Set Up Your Characters
First let’s start with Mario. He will be sprite 1. upload either of the images I provided you or your own by first clicking sprite 1, then click costumes, then click edit, then import and then find the Mario image you are looking for. Once you have done so it will go back to the screen where you clicked the import button which is like Microsoft paint, but better. Your image is likely on a background colour of some sort, so go to the 'fill' tool and click the colour in the bottom right corner (the four small grey and white squared colours) and then click on the background. It will turn it into the surrounding colour. This allows you to completely focus on Mario.
I noticed that I couldn't find a walking Mario, so I decided to make my own out the jumping Mario. First you must copy the jumping Mario by clicking copy, then click edit, remove the background of Mario, and then copy his arm to the right and in front using the stamp tool. You are now going to work on that arm using NOT the paint brush, but the line tool in g+w colour. The reason for this is that with the paint brush you have to be very careful where you move it as it could destroy your whole piece and you'd have to press undo and start over, whereas the line tool only goes where you tell it to. Once you have done this, flip it horizontally, set it aside and get to work on his arm to the right that's behind him.
The major thing here is the thick black outline that joins to his head, hat, nose, moustache and body. What you need to do is use the line tool to make a g+w colour line where the black outline of his arm connects to body parts. Once you have separated his body outline from his arm outline, use the fill tool with the g+w colour on his arm outline, his hand and his arm. Once done you should get the image like the second image. Before you go on, change the fill colour to yellow and click the background. You should now see all the pieces that still need to be deleted using the eraser tool. I suggest using the second smallest size as the smallest size can get lost in the colour black.
Once you have finished editing Mario, use the select tool and move him over his arm. You don't want to see it coming out of his foot, so keep jiggling around Mario until you get him looking like image 3. Once you have done this click OK and save your piece. Remember to do this regularly. The last thing about Mario is that you need to make him look both ways, so copy each image you have of him, go into edit, select Mario and finally flip him horizontally.
Step 3: Make Your Flooring, Border and Background
For the flooring, I used the grassland set of the scenes that I provided, but you can use which ever you want. First you need to make a base flooring, in any unused sprite, i.e. the ones which you will refer back to for most of your flooring scripts. You should get rid of everything except for the 8 blocks, see image 1. Once you have done this use the select tool to move the blocks together to get something like image 2. Finally use the dropper tool to acquire a colour close to the top of the top blocks, and create a line, using the smallest size, and place a straight line across the top of the four blocks. I will explain why you have done this later, but do this for all the tops of all the blocks that you have created.
Now you need to create your own sets. I made 5, but one was a copy of image 5. The reason I only created 4 is because my game which I created used coins which completely slowed down my game as I tried to make it longer, so I shortened it.
Next you have to create a border. The reason for this is that when we start with the scripts, it’s actually impossible to make scripts disappear, unless you make then 100% transparent which actually isn't making them disappear, so you just move them to a corner and cover them with some other costume. This is where our border comes in handy. It not only covers up those images but also frames what is going on in the game. You can also put things on top of it, like a M for Mario or whatever you want. You'll have to create your border with the rectangle tool. Don’t make it too thick, but also not too thin. There isn't a real borderline I can give you, but look at mine, image 9, and try make yours like mine.
Where you have your scripts, on the left, you should see a script there that you didn't create, called stage. This is where you upload your background that doesn't change throughout the script. I have supplied you with one, but you can get your own. Just import it into the background section, but make it a bit larger by using the grow tool, but don't make it too big. If you used the same background as me you should notice that the bottom is uncovered. Solve that by placing a brown coloured box that looks like dirt; see the last image for guidance.
Step 4: Time Taken (and Optional Coins)
Now depending on what type of game you want to create depends on what else you must create. You could make or use goombas but the problem with that is that the reaction you would want is for Mario to die if he touches the sides of the goombas, but kill it if he touches the top of it. This is extremely hard as if you click the 'sensing' tab by the rules there are only the options for the selected sprite from touching either another sprite or touching a colour. I found no real way to do this, unless you separate the top of the goomba from the bottom. It is a HUGE mission and I don't suggest you do it unless you have more extra time on your hand.
What I did was create a game where you have to collect coins and your time is recorded while you do so. I am just going to show you how to create the time taken part for your game, and leave the rest up to you. The reason for this is that you will have to think on how to create your very own unique game. I will give you the images for the coins if you really want to do it, but I don't suggest you do as it is incredibly tedious and unoriginal.
How the coins work is that when Mario touches them, they disappear and reappear somewhere else further on. I created my own coins as I could not find any flat coins. Create 4 of them, 1 red and 3 yellow. The red one will be the starter, so once you touch it its starts a timer which counts your time taken to finish the level. Both the time taken and the amount of coins you collect are going to be recorded, so on two other scripts create, using the text tool, one says time taken while the other should say coins. See images for advice.
Step 5: Start Your Script - Flooring
For all scripts, when you pull out rules you can either place them one under each other or, for certain rules, inside other rules. Unless I state so, you need to place your rules underneath one another.
If you have looked at one of the example games called scrolling demo you may remember this from there. What we are going to do is allow the flooring to move by a set distance every time where press the left or right button.
Under variable make a variable called scroll x. Now go to your floor which you would like to appear first. Pull from control the 'when (green flag) clicked' and place it on your script. For all the other scripts you will have to do so, so unless I state otherwise start with the green flag. Next, depending on how many costumes you have on that script, pull from looks 'switch to costume (drop down arrow with all of the costume numbers)' choose the one you would like to show first. This is also something that you will be repeating for most scripts.
Next, from motion, pull out 'set x to ( )' and 'set y to ( )'. Set your X to 0, but your Y value must be so that you can see your whole floor above your border. Next pull out a 'forever' from control and another 'set X to ( )'. Place the set x in the forever. Now pull out the 'scroll x' variable (the one with a tick bock next to it) and place it in the gap where you place the 0 last time It should look like my script in the image. Copy your script to all your other flooring by holding the green flag part and moving it over your other sprite. You should see a grey box appear over the sprite you want to send it to. Once you have done so, your script will move back to its position, but a copy will be on the other sprite repeat this for all your other floor sprites, however you need to adjust the scroll x - X value for all the other flooring. Pull out a '( ) + ( )' from operators, pull out your scroll x from the set x to and add to it 480. This tells Scratch to put the next floor on once a 480 long floor has past, i.e. your first floor. Add an extra 480 for each successive sprite. See images for details.
Step 6: More Script - Mario
Mario is the main script, and so has many scripts that work around him. The problem is when you have too many scripts for a single sprite, or in general, then scratch tends to slow itself down or, on rare circumstance, forgets to play certain very key Mario tunes. It can be quite annoying, but just try to relax, redo your script and try seeing where your faults were.
For these next scripts I will not be going into huge depth with the scripts as it will take too much time, so I am sorry if you do not fully understand, but you can just send me message or post a comment and I’ll try to help.
I first script we'll make is what I call 'the starting script' because everything basically relies on it. This is the top left hand script. In this we reset all our variables, set our starting position of Mario, set up our size and choose our costume. We reset timer, set scroll x to 0, and also set jump (a new variable which you must create). Now you need to fiddle with your Mario’s positions so that he is see able above your border and is also above your first flooring. You also want his sizing to be accurate, so not too big and not too small.
The next part is the movement of Mario. For left and right, refer to the middle of the top script and the script under that one. Basically what happens is every time you press the right arrow or the left arrow Mario moves in that direction. However he also changes his costumes to make it look like his is walking. You must do this at 0.1 second intervals or faster, depending if you want him to jog or sprint. You may also note that Mario himself does not walk or move left or right, but the flooring around him does. This is where the scroll x comes into play. So whenever you press the right arrow, the scroll x changes in total by -20, moving the flooring by -20. This effectively gives the impression that he is moving.
Next is when he jumps. Look at the middle script on the left. First focus on the repeat until jump = 130. this is purely up to how you want your game to be and will change depending on how you create your game, however I suggest keeping the same 'change y by 10' and 'change jump by 10' in there as it is the best way to make Mario jump. So how the script works is that when the up arrow is pressed, Mario jumps up by 130, then his y value decreases until he is touching the flooring. This is where the colour that you put on the top of your flooring comes into play. So set the 'touching colour' to your colour that you choose.
So you're jumping around and then you fall into a gap. What do you do? You restart the level. Note this can be where you implement lives into your game, however the penalty in my game is that you restart the level but the timer still rolls. If you look at the middle right script you can see that if you touch the colour brown, you restart. How you restart is by making most of your scripts from your starting script. There is a better way to do it, by making it that if Mario goes below a certain y value, and then you restart.
My bottom 2 scripts aren't very large, but do very important things. The one plays a classic Mario tune while the other starts the timer when you touch the first coin, in my case sprite 6. This timer stops once you have reached a certain point, when 'scroll x = -1800'. This has to do with the flooring. You may have noticed all of the 'repeat' and 'wait until scroll x = -1800'. This has to do with how many floors you have. I had 5 floors, 2 the same (the beginning and the end). You will have to fiddle around with your scroll x value until you get the best one for your script. What happens when your scroll x gets to -1800 the script on the top right starts working, while all other scripts stop.
What this script does is that it moves Mario into the centre of the screen, and then he jumps up. See my script for details.
I have decided to add my game here for you to look at. It is in a 'sb' format and requires scratch to operate.
That is the end of this instructable. I hope you found it interesting and it provided enough info to allow you to make your own game, but not enough for you to copy it exactly because if I did that, then you would never learn how to apply yourself. Thanks for reading it, I hope you enjoyed it. If you did please vote for me, but if you didn't please tell me why in the comments.