Drawing and animating a Hungry Cat Racer

Draw, Export, and Import Sprites

To get the center line, click the Paint new sprite icon directly beneath the stage to open a blank Paint Editor canvas. Draw a vertical rectangle in the size and color you want. I used red.

After you save the new sprite, right-click on the sprite's icon and choose export this sprite. Save it to your filesystem. Now edit the stage background and, in the Paint Editor, click Import. Select the sprite you just saved.

When the Paint Editor imports the sprite, you will see a hand icon to signify that you can move the image around the stage to position it as needed. After you set the position of the imported sprite by clicking somewhere on the canvas or saving the image, you will not be able to reposition the imported image.

Duplicating and Editing Backgrounds

Assuming you have a background that you like, I recommend making a backup copy. From the Backgrounds tab, you can right-click and export the image or you can drag the background and drop it onto one of the icons in the sprite list, which will add the image as a costume for that sprite.

By the way, if you drag a sprite's costume onto the stage icon, you'll add a background to the stage. I didn't use this method to import the road's center line because you cannot reposition the sprite with drag and drop; therefore, the method I showed you provides as much flexibility as possible.

Now, I'll get back to editing the backgrounds. A good starting point for the animation seems to be three backgrounds. If you copy the existing background two times, you can start to edit the road's center line.

Edit the first background and use a black rectangle to draw over the center line, leaving a small portion visible at the top of the road. Then repeat this process for the other backgrounds, and for each background, move the position of the center line down the image. Figure 2 shows the thumbnail view of my backgrounds for a reference. Note that Figure 2 also shows my starting image with a solid red line; it's there only as a reference to show the progression of the edits.

Figure 2: Thumbnail view of stage backgrounds showing how each image is changed.

Figure 3 shows the actual stage script to animate the images to give the effect of driving down the road. It continually loops through costumes using the next costume block. Clicking the green flag will quickly cycle through each background in the order they are listed.

Figure 3: A stage script to initialize some game variables and to animate the backgrounds.

If you want to slow down the animation, add a wait () to the forever loop in Figure 3.