Drawing and animating a Hungry Cat Racer

Using Scratch's built-in graphics editor is a perfect way to introduce Scratch to novice programmers of any age. Experienced Scratchers can create detailed animations that enhance any project. In the Hungry Cat Racer game, I'll show you how to draw multiple backgrounds and edit sprite costumes that will become the basis of the game's animated effects.

When I introduce Scratch to young programmers, the built-in graphics editor is often a perfect place to start; students can take an existing project and immediately customize it without any initial programming while still engaging in something creative. When customizing projects, the students invariably start drawing their own characters, and then, of course, they want to program those characters to do something.

The setup for this project will involve the Paint Editor, and although I won't go over each option in a tool-by-tool review, I will show you the possibilities. In other words, a five-year-old can hack together a ninja character (that might look like blue spaghetti to you) or a more practiced artist can draw polished images.

Game Play

The player (a.k.a. the Scratch Cat) drives along a road and tries to eat as many mice or other rewards as possible while avoiding dogs and other obstacles. The mice and dogs will appear in the road at random locations. The player can move left and right using the arrow keys to avoid the dog and eat the mice.

Moving Backgrounds

For this game, I created an animated background that simulates driving along a road. Figure 1 shows the background layout complete with a blue sky, a two-lane road, and a border. To draw this background, click on the Stage icon that's listed below the stage and select the Backgrounds tab. Click the Edit button next to the default white background. If you are using this tutorial with Scratch 2.0 outside of your Raspberry Pi, backgrounds have been renamed "backdrops."

Figure 1: Hungry Cat game play. Use the cat to eat the mice and avoid the dogs.

If you mouse over the tool icons on the left side of the Paint Editor, a tool tip will display the name of the tool. As you can see in Figure 1, the background relies heavily on colorful rectangles. If you make a mistake while editing, you can use the Undo button or press Ctrl+Z to undo your changes. If something irreversible happens, cancel the Paint Editor and start again.

To aid in the drawing process and ensure the images are drawn big enough, I recommend using the zoom controls to zoom out as far as possible. Select the Fill tool and then select black from the color picker. Click on the stage, and the white background will be filled with black.

To draw the sky, select the Rectangle tool, make sure the solid square option is selected, and then choose blue from the color picker. On the stage, draw a rectangle in the top area of the stage by clicking and dragging the mouse. As you draw, a blue rectangle will appear. Release the mouse button to create the rectangle. Some trial and error may be needed to get the rectangle in the right spot and to take up the entire area at the top of the image. You won't be able to drag the rectangle around the stage to position it, so keep undoing and redrawing until you get something you like. Then, use a green rectangle to draw a border on each side of the stage, using Figure 1 as a visual reference.

Voilà, you have a road without a center line. At this point, you could use the rectangle tool to draw a vertical center line in the middle of the road, but I found it easier to draw a new image and then import it into the background. This will help ensure a uniform design across all the backgrounds you will create. An inconsistent design from one background to another will be easily noticed.

As you see in my example, I've added some clouds to the sky, which you can do, too. Use the Ellipse tool to draw overlapping white ellipses. Click OK to save the background and exit Paint Editor.