Scratch game making tutorial 136b

Drawing app - intermediate

In this tutorial you will create a drawing game in which the player can draw with a pencil and change its thickness and colour, and rub out with a rubber.

 

NOTE: You can use any version of Scratch.

 

Complete these steps ..

 

1. Open Scratch, OR create a new game (from the top menu choose "File>New").

 

 

2. Download, save and then open this game file ..

 

 

3. Select the stage and add the following code/scripts ..

 

 

4. The "Instructions" sprite lets the player know how to play the game and will appear when the game is started.

Select the "Instructions" sprite and add the following code/scripts ..

 

 

5. Select the "Pencil / rubber" sprite and look at its costumes. There are two, one for the pencil and one for the rubber.

 

 

6. Switch to the Code/Scripts tab and then create this variable to allow the player to see an on-screen display of the current line thickness ..

 

Position the variable display to the bottom right of the stage ..

 

 

7. Add the first code/scripts to the "Pencil / rubber" sprite ..

Note: If you are using Scratch Desktop you will need to load the Pen code blocks and use "erase all" instead of "clear").

 

Note that the size is set to 100%. Later we will reduce this to 30% but not until we have sampled the colour of the pencil lead.

 

 

8. Now add the code/scripts to make the Pencil stay on the mouse-pointer ..

 

Press "B" on your keyboard to test your game, and move your mouse on the stage. The pencil should follow it.

Press the "E" key to end your game and continuing working on it.

 

 

9. Use the File menu to save your game. Call it "Drawing app intermediate" ..

 

 

10. Now add the code/scripts which lets the player draw when the mouse button is held down ..

 

Test your game again. Press the "B" key on your keyboard to begin your game, and then hold down the mouse-button and move the mouse-pointer around the stage.

Press "E" for end when you are ready to continue working on your game.

 

 

11. It would be good if the player could change the Pencil line thickness (pen size) and see a display of the size on the stage.

Add this code/scripts to the Pencil ..

 

Press the "B" key on your keyboard to test your game again. Hold down the Up and then the Down arrow keys to change the line thickness.

Press "E" for end when you are ready to continue making your game.

 

 

12. It would also be good if the player could clear the drawing without having to re-start the game.

Add this code/scripts to the Pencil sprite ..

 

 

13. Use the File menu to save your game.

 

 

14. So far, the player can only draw black lines. Let's give them a choice of colours ..

Select the Colour bar sprite and add this code/scripts to position it at the bottom of the stage and show it when the game begins ..

 

 

15. We will now add a code/scripts to the "Pencil / rubber" sprite that changes the colour of the lines it draws when it touches a colour on the Colour bar.

Notice how the Pencil sprite pencil costume has a grey lead at its end ..

 

We will add a code/scripts to the "Pencil / rubber" sprite that senses when this grey colour touches one of the colours on the Colour bar.

 

Add the following code/scripts to the Pencil. You will need to sample the Pencil lead carefully and then each colour in the Colour bar ..


Complete an "if color is touching color"" script for every colour in the Colour bar.

 

 

16. Now change the "Pencil / rubber" sprite size from 100% to 30% ..

 

Press the "B" key to test your game. You should be able to change the line thickness, change its colour by touching a colour on the Colour bar, and clear your drawing by pressing the "C" key on your keyboard.

When you are ready press "E" to end your game.

 

 

17. Use the File menu to save your game.

 

 

18. To finish our game let's give the player the ability to rub out.

Add this code/scripts to the "Pencil / rubber" sprite

 

Now when the player presses the "R" key on their keyboard they will be able to rub out. Notice how rubbing out is actually just drawing with white.

This code/scripts has one disadvantage that we cannot easily fix in Scratch 1.4. When the player switches back to the pencil by pressing "P", the colour returns to black.

Press the "B" key to test your game. You should be able to change the line thickness, change its colour by touching a colour on the Colour bar, clear your drawing by pressing the "C" key on your keyboard, and press "R" to rub out.

When you are ready press "E" to end your game.

 

 

19. Use the File menu to save your game.

 

 

20. You've finished this tutorial. Well done!