Using directions to move your sprite

You can use two different methods to position and move sprites. The first is to make your sprite “walk,” and to change its direction when you want it to walk the other way. The other is using grid coordinates, which we cover in the next section.

Here are the five blocks you use to move your sprite in this way (see Figure 9-3):

• Move 10 Steps: This makes your sprite walk in the direction it is facing. If your sprite has been rotated, the steps taken could move it in a diagonal line across the Stage. You can click the number in this block and then type another number to increase or decrease the number of steps taken, but bigger numbers spoil the illusion of animation. It stops looking like the sprite is walking across the screen when the number of steps taken is too big.
• Turn Right or Left 15 Degrees: This block rotates your sprite. As with the number of steps, you can edit the number to change the degree by which your sprite is rotated. It walks in the direction it is facing when you use the Move 10 Steps block.

• Point in Direction 90: Whatever direction your sprite is facing, this block points it in the direction you want it to face. Use this block as is to reset your sprite to face right. You can change the number in this block to change the direction you want your sprite to face, and the numbers are measured in degrees from the position of facing up. (See Figure 9-4.) It helps to think of it like the hands of a clock: When the hand is pointing right, it’s 90 degrees from the 12 o’clock position; when it’s pointing down, it’s 180 degrees from the top. To point left, you use –90. When you click the arrow in the right of the number box, it gives you a menu from which you can select the four main directions — but you can enter any number.

  You might be wondering whether you can enter 270 to point left, and the answer is that it works, but it can cause errors in your programs. If you turn your cat to direction 270 and then ask Scratch which way the cat is facing, it tells you –90. To avoid any inconsistencies like this, keep direction numbers in the range from –179 to 180.

• Point Towards: You can also tell the sprite to point toward the mouse pointer or another sprite. Use the menu in this block to choose what you would like your sprite to point toward.

If you’re changing the number value in a block, you still need to click the block to run it.

Using grid coordinates to move and position your sprite

The second way you can move and position your sprite is to use grid coordinates. That makes it easy to position your sprite at an exact place on the screen, irrespective of where it is now.

Every point on the Stage has two coordinates: an X position (indicating where it is horizontally) and a Y position (indicating where it is vertically). The X positions are numbered from –240 at the far left to 240 at the far right. The Y positions are numbered from –180 at the bottom edge of the Stage to 180 at the top edge. That means the Stage is a total of 480 units wide and 360 units tall. The center point of the screen, where your cat begins its day, is where X equals 0 and Y equals 0. Figure 9-5 provides a quick visual reference of how the coordinates work.

When you move the mouse over the Stage, the grid reference of your mouse pointer is shown just underneath the Stage on the right.

Seven Motion blocks use the X and Y coordinates (see Figure 9-6):

• Go to x:0 y:0: You can use this block to position your sprite at a specific point on the Stage. By default, it returns a sprite to the center of the screen (x=0, y=0). Edit the numbers for X and Y to position your sprite somewhere else.
• Go to: Use this block to move your sprite to the mouse pointer’s location, or to the location of another sprite, if you have more than one.
• Glide 1 secs to x:0 y:0: When you use the Go To block, your sprite just jumps to its new position. The Glide block makes your sprite float there smoothly instead. You can change the number of seconds the glide takes, including using decimals for part of a second (for example, 0.5 for half a second).
• Change X by 10: This moves your sprite ten units to the right. You can change the number of units and use a negative number if you want to move left instead. Note that this doesn’t affect your sprite’s vertical position and is independent of which way around your sprite is facing.
• Set X to 0: This changes the horizontal position of your sprite on the Stage, without affecting its vertical position. The value 0 returns it to the center of the screen horizontally, and you can edit the number to position it left or right of that. Use a negative number for the left half of the screen and a positive number for the right half.
• Change Y by 10: This moves your sprite ten units up the Stage, without affecting its horizontal position, and irrespective of which direction it is facing. You can change the number of units and use a negative number to move the sprite down the screen instead.
• Set Y to 0: This changes the vertical position of your sprite on the Stage without affecting its horizontal position, and without regard to which way it faces. Use a positive value for the top half of the Stage and a negative value for the lower half.

You need to run a block to actually see its effect on your sprite. Do this by clicking it.

Showing sprite information on the Stage

It can be hard to keep track of where your sprite is and in which direction it’s facing, but you can show the values for its X position, Y position, and direction on the Stage. Select the boxes at the bottom of the Blocks Palette to do this, as shown in Figure 9-7. They clutter the screen a bit, but they can be essential tools for testing when you’re creating a game.

Using costumes

One way to think of sprites is as the characters in a game (although they can be used for lots of other objects, too, such as obstacles). Each sprite can have a number of costumes, which are different pictures of it. If the costumes look fairly similar, you can create the illusion of animation by switching between them. Your cat sprite comes with two costumes, and when you switch between them, it looks like the cat is running. You can think of a costume as being one image in an animation sequence (an animation frame).

You can see the costumes for your sprite by clicking the Costumes tab at the top of the Scripts Area, as shown in Figure 9-8. If you want to modify the cat’s appearance, you can click the button to edit one of the costumes in Scratch or simply click the sprite in Scratch 2 and use the editing canvas to its right. If you want to create a new animation frame, you can click the Copy button beside a costume in Scratch, or in Scratch 2 you can right-click the costume and choose duplicate from the menu that opens. You can then edit the bits you want to change.

It doesn’t matter much when you’re experimenting with sprites, but when you make your own games and animations, you can save yourself a lot of brain ache by giving your sprites meaningful names. It’s much easier to remember that the costume with the name game over should be shown when the player is defeated than it is to remember it’s called costume7. To rename a costume, click the Costumes tab to show the costumes, and then click the costume’s current name (refer to Figure 9-8) and type its new name. In Scratch 2, the costume's name is shown above the editing canvas.

In the Blocks Palette, there are two blocks you can use to switch between costumes. (See Figure 9-9.) Click the Looks button above the Blocks Palette to show them:

• Switch to Costume: If you want to switch to a particular costume, choose its name from the menu in this block and then click the block.
• Next Costume: Each time you use this block, the sprite changes to its next costume. When the costumes run out, it goes back to the first one again.

You can show a sprite’s costume number on the Stage, too, so that it’s easier for you to work out what’s going on. Just select the check box next to Costume # in the Blocks Palette.

Using speech and thought bubbles

Scratch includes four blocks you can use to show a speech bubble or a thought bubble onscreen. (Refer to Figure 9-9.) To see them, and to see the other blocks that change a sprite’s appearance, click the Looks button above the Blocks Palette. The speech and thought bubbles are great for giving a message to the player or viewer. You can edit the word in the block (Hello! or Hmm …) to change the text in the bubble. Figure 9-10 shows the speech bubbles (top row) and thought bubbles (bottom row) in action.

If you use one of the options with a length of time in it, the sprite pauses for that length of time and the bubble disappears when it has elapsed.

If you use a block without a length of time, you can make the bubble disappear again by using the Say or Think block again but editing the text so that the text box in the block is empty.

Using graphic effects

You can apply several graphic effects to your sprite using Looks blocks. In Figure 9-10, we’ve used eight sprites to demonstrate them on the Stage. The Color effect changes the sprite’s Color Palette, turning orange to green in the case of the cat. The Fisheye effect works like a fish-eye lens, making the central parts of the sprite appear bigger. Whirl distorts the sprite by twisting its features around its middle. Pixelate makes the sprite blocky. Mosaic shrinks the sprite and repeats it within the space it usually occupies. The Brightness and Ghost effects can sometimes look similar, but the Brightness effect increases the intensity of the colors (turning the cat’s black outline silver while softening the orange), and the Ghost effect fades out all colors evenly.

Here are the three blocks you use to control graphic effects:

• Change Color Effect by 25: You can select the effect you want to change (by default, it’s the color effect) and enter the amount of it you want to add. You can use negative numbers to reduce the extent to which the effect is applied to your sprite. The color effect has 200 different levels (from 0 to 200), and the other effects typically look best with levels in the range from –100 to 100. Experiment!
• Set Color Effect to 0: Use this block to set a chosen effect to a specific level. Choosing 0 turns the effect off again. You can use any of the seven effects with this block.
• Clear Graphic Effects: This block removes all graphic effects you’ve applied to a particular sprite so that it looks normal again.

The graphic effects look great, but they are quite slow on a Raspberry Pi Model B+ or older. They’re best used in moderation for special moments in your animation or game; otherwise, they might make it appear unresponsive.

Resizing your sprite

Earlier in this chapter, we show you how to change the starting size of your sprite on the Stage. You can use blocks to issue instructions to change its size, too, so you could make it grow larger as the game progresses, for example.

There are two blocks you can use to resize your sprite:

• Change Size by 10: This block enables you to change the size of your sprite by a certain number of units, relative to its current size. As usual, you can edit the number. If you want to decrease the sprite’s size, use a negative number.
• Set Size to 100%: This block sets the size to a percentage of its original size, so with the default value of 100 percent, it effectively resets any resizing you’ve done.

You can also select the check box beside the Size block to show the sprite’s size on the Stage, in the same way you display other sprite information there. (See “Showing sprite information on the Stage,” earlier in this chapter.) This can be useful for testing purposes.

Changing your sprite’s visibility

Sometimes, you might not want your sprite to be seen on the Stage. If a spaceship is blown up in your game, for example, you want it to disappear from view. These two blocks give you control over whether a sprite is visible:

• Hide: Use this block to make your sprite invisible on the Stage. If a sprite is hidden, Scratch won’t detect when it touches other sprites, but you can still move a hidden sprite’s position on the Stage so that it’s in a different place when you show it again.
• Show: By default, your sprite is visible, but you can use this block to reveal it again after you have hidden it.

Sometimes, sprites might get on top of each other. You can use the Go to Front block to make a sprite appear on top of all the others. To push a sprite backward and allow others to appear on top of it, use the Go Back 1 Layers block.