Platform Game Tutorial – Part 1

This is part one of a three part series about making a platform game called “Blue Guy” in Scratch. In this tutorial we’ll be creating our character and making the intro screen.

Here’s an overview of what you’ll find in each tutorial in this series:

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

Getting Started

Create a new Scratch program by clicking File > New from the menu. You can remove the cat sprite from the sprite panel if you’d like since we won’t be using it in the game. To remove the sprite you can right click on it and select delete from the pop-up menu, or you can click the scissors icon Delete and then click on the cat sprite. You should now have an empty Scratch project.

Making the Blue Guy

We’ll start by making an extra large version of the blue guy character that we’ll display on the intro screen along with the game title and instructions.

To get started, click the Paint New Sprite Paint New Sprite  button to open the Paint Editor window. Zoom all the way out so that you can see the full screen using the magnifying glass with the minus sign. Next, set the brush size to the smallest setting as shown below:
Set Brush SizeFrom the color selector, select the next to darkest blue. Now using the circle tool we can draw our blue guy character. Make sure you have the circle outline selected, rather than the fill, as shown below:

Circle Outline

In order to make sure that you are drawing a circle, and not an oval shape, you can hold down the [Shift] button while you draw your circle. Make your circle about half the size of the screen. We’ll shrink the sprite down later if necessary.

 Circle Outline

Next, we’ll fill the circle with a gradient. Select the fill tool and select the circular gradient tool. Click the Switch Colors button beside the selected color to move the dark blue to the secondary color, and then select a lighter blue as the primary color, as shown below:

Circular Gradient Fill

 Now click in the upper left of the circle outline to fill the circle with the gradient:

 Gradient Filled Circle

Draw an eye for our blue guy by selecting the circle tool again. However, select the filled circle and select white as the primary color this time. Now, while holding down the [Shift] key, draw a circle in the upper right of our blue circle:

 Filled Circle With Eye

Now, select black as the fill color and draw an eyeball, using the [Shift] key again to make sure you are drawing a circle.

 Completed Blue Guy

Voila! Our blue guy is complete. Now click OK to save the sprite and rename it to “Big Blue Guy”.

We’ll need another copy of our blue guy for the game as well. Right click on the Big Blue Guy sprite and select “duplicate”. Name the copy just plain old “Blue Guy”. You can now use the shrink tool Shrink to reduce the size of the second blue guy (leave big blue guy alone for now). Reduce the size down to about 1/8 of the size of the big blue guy:

Big Blue Guy And Little Blue Guy

We’re going to hide the smaller blue guy when the green flag is clicked. But don’t worry, when the game starts we’ll make him re-appear. Switch to the scripts panel for blue guy and add the following script:

Blue Guy Script

Unlike the little blue guy, we want our big blue guy to appear centered at the top of the screen when the green flag is clicked. Switch to the scripts tab of the big blue guy sprite and enter the following script:

Big Blue Guy Script

Intro Screen

We’ll be using the same stage background for our intro and for the game. To do this we’ll create some text sprites for the game title and instructions that will be shown when the green flag is clicked, and will be hidden once the game begins.

Click the new sprite button to open the Paint Editor again. Select the text tool and select a font that you’d like to use. I used the Chiller font, at 96px in black. Type “Blue Guy” as the text:

Title

Click OK to save your work and rename the sprite to “Title”.

Switch to the scripts panel for the title sprite. Create a script for the title so that when the green flag is clicked it will be displayed in the center of the stage just below the blue guy:

Title Script

Next we’ll add a sprite for the instructions. Using the Chiller font, or a font of your choosing, at 24px, type the text “Press SPACE to begin”. Click OK to save the sprite, and rename the sprite to “Instructions”. We’ll display the instructions just below the game title on the Intro screen.

Instructions

When the green flag is clicked, we want to show the instructions just below the game title. To do this, add the following to the scripts tab of the instructions sprite:

Instructions Script

Great! Now, test it out. When you click the green flag this is what you should see:
Intro Screen CompletedIf the big blue guy is too big, shrink him down until he fits above the game title text.

Press Space to Begin

Finally, we need to start the game when the space key is pressed. Switch to the stage and click on the scripts tab. When the space key is pressed, we’ll broadcast the message “Game Started” to the other sprites so that they can respond.

Stage Script

When the Title, Instructions and Big Blue Guy sprites receive the Game Started message they should hide, but when the small Blue Guy receives the message it should be shown.

Add the following to the script for the Title, Instructions and Big Blue Guy sprites:

When Game Started Hide

When Blue Guy receives the message we’ll move him to the center of the screen (for now) and make him appear. Update the script for Blue Guy so that it looks like this:

Blue Guy Script

OK, that’s it! Try it out, when you click the green flag the intro screen should be visible. When you press the space key the small blue guy should be in the middle of an empty screen.

Next Steps

We’re done with part 1, we’ve got the intro screen and our blue guy. Next we’ll add some levels, a goal, and make our blue guy jump and move. I f you’re ready, let’s move on to Part 2 of the platform game tutorial: creating our first level and character movement.

About

Robert is a graduate of Fairfield University in Fairfield, CT and has been developing software professionally for fifteen years. He is the father of two children who have been making their own games using the Scratch programming language.

Posted in Intermediate, Scratch, Tutorial Tagged with: , ,