Drawing and animating a Hungry Cat Racer

Creating and Animating the Player

Figure 4 shows the scripts to control the player. The smaller stack of blocks are initialization values to ensure the game always starts with the sprite in the right location, direction, size, and so forth.

Figure 4: Scripts to control and animate the player.

The other when green flag clicked script shows the movement controls. Using the arrow keys is a fairly common way to move a sprite in Scratch, but this script actually detects the side of the road and inverts the sprite's movement when the player tries to go off the road. This prevents the cat from straying off the road. And as you see in the script, I'm using a costume to show an animation when the cat touches the green border. I'll leave it to you to create that effect.

I'm detecting the side of the road to restrict the player's movement and create a more challenging game play. If you were creating a platform game, however, this script provides one way to detect a wall. It prevents the sprite from passing through the detected boundary by moving in the opposite direction when it detects the wall or boundary.

The when I receive (game over) script is running another animation using a combination of a costume and the change () effect by () blocks. In some cases, the pixelate effect or the whirl effect may adequately cover your needs. I felt a compelling need to start with an exploding sprite, which I created by editing a costume with the Select tool. By selecting pieces of the costume and moving it outward from the costume's center, it creates a rudimentary exploding effect. You could, of course, draw several costumes to illustrate this. I chose to draw one explosion costume and then use the change () effect by () blocks to further distort the image when the dog "catches" the cat.

In Figure 1, you can see that the cat is sitting in a car. This costume was created by importing and positioning a car into each of the costumes used to animate the player sprite. Like most image editing software, the Paint Editor has an option to flip the image horizontally and vertically to change the orientation of the costume. This also applies to an image that you first import into the Paint Editor. So, if you follow my lead and import a car into the cat, you can change the orientation right away before you commit the change because, as with the center line, you will not be able to make position changes after you save the change.

Using Size to Change Perspectives on the Mouse

Figure 5 shows the scripts to animate the mouse. Note that the sprite starts in a random x position on the stage and at the top of the road. It is not constrained to the width of the road like the cat's movement is; I did restrict the placement of the dog to the width of the road. That's a decision I made to make the game more challenging.

Figure 5: Scripts to display and move the mouse sprite.

The effect of the mouse as it moves from the top of the stage to the bottom is important here. After the sprite picks a location to show itself, the size is reduced using the set size to () block. As the mouse falls, the turn () degrees block rotates the sprite while increasing the size of the mouse with the change size by () block.

The set size by () changes the size relative to the current size. For example, in relation to the sprite's starting size, a 0.5% value, would make the sprite half the size, whereas using 200% would make it twice as big. Subsequently setting the size to the same percentage will not change the size of the sprite, because 200% of the original sprite size is always the same.

The change size by () block in comparison grows the sprite by the specified amount based on the current size, so that each time you run the change size by () block, it will grow or shrink the sprite by the size specified. This allows the mouse to get bigger each time the block runs.

The result of the animation is that the mouse starts small at the top of the screen (beginning of the road), and as the mouse tumbles closer to the cat, it gets bigger – to mimic real-life perspective.