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
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 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 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:
From 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:
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.
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:
Now click in the upper left of the circle outline to fill the circle with the gradient:
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:
Now, select black as the fill color and draw an eyeball, using the [Shift] key again to make sure you are drawing a circle.
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 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:
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:
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:
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:
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:
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.
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:
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.
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 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:
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.
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.