Moving Sprites Around

In the Getting Started lesson, we moved a sprite around in a circle. In this lesson, I will complete those concepts and expand it.

Screen Coordinates

Every pixel (picture element) on the stage can be directly referenced. This allows us to say, place this sprite in the center, or move this sprite to the top-left corner. Of course things like "top-left corner" are too vague, so we number the pixel positions using Cartesian Coordinates.

If you've already shut down that part of your brain where you stored your pre-Algebra memories, don't worry, I'll refresh your memory. Otherwise, skip this section.

Remember in the previous lesson on images and animation, I mentioned that pixels are colored squares that line up in rows and columns? Given this, we number them based on their row and column position. If a particular pixel is "1", then pixel to the right would be "2", then "3", etc. We can go the other way with negative numbers: "-2" would be just to the left of "-1".

First question… where should row "0" be? In Scratch, it is right in the center. Same with the columns. While we could write rows and columns for Scratch, we decided on the short-hand notation of calling the columns as "x" and the rows as "y".

In the diagram below, I've enlarged the Scratch screen about 30 times and drew some lines between the pixels to show the boundaries between them. There are 3 colored pixels:((Note: Most math textbooks assume the x, y order and write these coordinates as (0,0) (2,4) and (4,-3), but in Scratch, we label the two values.))

• The blue pixel is right in the center of the stage. It is in the column labeled, 0 and in the row labeled, 0. We right it in Scratch as: x = 0, y = 0
• The red pixel is in the 2 column (x) and the 4 row (y).
• The green pixel is in the 4 column (x), but below the 0 row in the -3 row.
  

Sprite Placement

Create a new project, then click on the Stage and under the Background tab, import the xy-grid background image:

Now click on the default Sprite1 sprite (the Scratch Cat). Notice that it is in the center of the stage. Its coordinates are x = 0 and y = 0. You can also tell that by looking at the Sprite Information section:

The coordinates of the sprite is listed there. Drag the sprite on the stage around and notice how its coordinates change. Let's do it programmatically by dragging out the go to block from the Moving block group. Change the x and y value to 100:
Positions a sprite at some coordinate position on the stage. The center is 0, 0. Positive x values are to the right and negative x values are left. Positive y values are to the top and negative y values are bottom. Fractional values are rounded to nearest pixel. And values can be larger than the screen itself.

Double-click to have the sprite jump a bit to the right and towards the top. Notice the coordinate values in the Sprite Information area change as well:

Change the values to see where she lands:

The top row on the stage is 180 and the bottom row is -180. The last column on the right side of the stage is 240 and the first column on the left side is -240. Setting the value to either of these numbers puts the sprite so that half of her body is off the screen:

Try changing the x value to 273 and the sprite will be even more off the stage. However, it has a limit. Changing it to 300 or 400 won't make it any more off-stage. This feature does come in handy when you want to make a gradual appearance for a sprite.

Positions the sprite relative to either the x or y axis. Similar to the go to block. In fact, the following stacks are equivalent:

You can set only the x or only the y value (leaving the other unchanged). For instance, the following code will put the sprite on the right side of the stage, but won't change where it was relative to the top or bottom of the stage.

Moving a Sprite: Technique 1

The go to block makes the sprite jump to a position. Along with this, Scratch has 3 other ways to move a sprite around the stage. The glide block slides the sprite to a particular spot on the stage. Along with the coordinates, you specify how fast or slow the sprite should move based on the number of seconds it takes to glide the sprite.
Smoothly moves a sprite to a given coordinate in a given number of seconds. If seconds are 0, the sprite jumps there immediately.

In the following code, clicking on the sprite will glide him to the top right corner of the stage. Clicking the green Start Flag will reset the sprite to the center:

Notice that the sprite moves faster if it is dragged to the bottom left corner of the stage than when it is initially positioned nearer the top right corner.

Moving a Sprite: Technique 2

The glide block moves a sprite to a absolute position, but the direction is not fixed. We can move a sprite in a particular direction by using the change x and change y blocks.

For instance, the following code moves the sprite lower and towards the right

Moves the sprite relative to its current position. Positive values for the change x block moves the sprite to the right, negative values move it to the left. Positive values for the change y block moves the sprite towards the top, negative values move it towards the bottom. whenever it is clicked. Click on the green Start Flag to reset the sprite in the center of the stage.

To get the sprite into the corner, requires a few clicks. Let change our code so that it slides the sprite towards the corner.

It does move it to the corner– if it starts in the center. Otherwise, it moves it in a particular direction. One advantage of using the change blocks instead of the glide block is that we can do things along the way– like change the sprite's costume to simulate animation.

The Scratch Cat sprite actually comes with two costumes. Each costume has a slightly different foot position, so we can switch between the two costumes
Changes the sprite's costume to the next costume in the order listed under the Costumes tab. If the current costume is the last costume, it switches to the first costume. as we move using the next costume block:

Pretty interesting. However, the cat is running too fast for us to really see
Suspends execution of the stack for a given number of seconds. The value can be a fractional part of a second, e.g. 0.05. the animation. Let's slow him down using a time delay with the wait block:

Moving a Sprite: Technique 3

We have already talked about the other technique for moving a sprite in the Getting Started lesson. This technique involves pointing the sprite in a particular direction and moving it forward. However, there is more to cover. Let's create a project that allows us to lead a sprite around on an invisible leash.

Build the project by following these steps:

• Start a new project (you can save the old one if you want) and delete the default sprite.
• Import a new sprite based on the first "turtle" image (below). Note: The cat2 image that ships with Scratch can be used instead.
• Click on the Costumes tab, and click the Import button and the second "turtle" image.
• Rename the sprite to be Turtle or something equally clever.

   

Most of the following code should be familiar to you. In a forever loop, we are going to move forwards, change the costume, and wait long enough to make our sprite act like a turtle. The new block is point towards which (when you click the black down-arrow) allows you to have your sprite point towards the
Has the sprite turn in the direction of the mouse pointer if that is selected, or one of the other sprites in the project. mouse position or another sprite (wherever it resides on the stage).

The point towards block can also turn a sprite towards another sprite. Import a new sprite based on this "apple" image (and rename the sprite Apple).

Now when you click on the black down-arrow on the point towards block, you will see mouse-pointer as well as Apple. Select the sprite, and now when the project starts, the turtle will head towards the apple.

Details on Placing Sprites

Being the sadistic person that I know you are, you probably received a bit of glee by moving the apple just before the turtle reached it. However, if you go into Presentation Mode, you'll notice that the apple is stuck to the ground. Typically, this is what you want, for Presentation Mode is how a project is played for your friends on the Scratch sharing website.

However, this behavior can be changed in the Sprite Information section. Click on the Lock icon next to the sprite's name, and the image changes to the "unlocked" state, allowing you to move the sprite when the project is presented.

Details on Rotating Sprites

You may be wondering about the other three little icons in the Sprite Information section that run along the left side of the sprite image thumbnail. They control how a sprite appears when it is rotated.

The default (the top icon), allows a sprite's costume (image) to be rotated whenever the sprite's direction is changed. As you remember from Getting Started lesson, we had the Scratch Cat stand on its head when it drew a circle, and this isn't always what we want.

After selecting the Turtle sprite (by either clicking on its image in the Sprite Container or by double-clicking on it on the stage), click the second icon (making it light blue) in the turtle's Sprite Information area. This will only allow our sprite costume turn left and right.

Notice how it project hasn't changed in its behavior. The turtle still moves towards the apple sprite, however, it just doesn't point directly at the apple.

Clicking on the bottom image (the can't rotate icon) makes the turtle always face to the right– which means, you can get the turtle to do the moon walk by placing the apple sprite on the left side of the stage.

Since we have a top-down view of our turtle, it looks just fine to set the sprite rotation to can rotate (the top icon).

Initially Placing Sprites

When a project starts, it really needs to reposition the sprites and get the project initialized . Scratch remembers the state of each sprite and saves this information whenever the Save button is clicked. We can use this, by repositioning our turtle and apple before we save, however, it is better to do this at the beginning of our project.

Here's a shortcut. Position both the Turtle and Apple sprites where you want when the project begins. Now double-click the Apple sprite and you'll notice that both the go to and the glide blocks are given the current coordinates of the Apple sprite.

Drag the go to block to the Scripts area, and attach a Start hat block, and the apple is initialized.

We can do the same thing with the Turtle sprite, but along with its position on the screen, let's also position it direction. To do this, we use the point in block.
Specifies the rotation/direction of a sprite. While the pull-down menu has the 4 cardinal directions, you can specify any direction, from 0 to 360 degrees. For our project, let's set it to a value that makes him facing the initial position of the apple:

Save this project, for we will continue using it during the lesson on sensing and interacting with different sprites.

Summary

In this lesson, we covered the basics of moving sprites around on the stage. This includes an overview of the coordinate system for labeling specific locations.

Knowing the coordinate system allows us to place and move sprites around with three techniques:

1. Jumping around from spot to spot with absolute coordinates.
2. Letting the system figure out how to move a sprite using the glide block.
3. Doing the work ourselves with a loop and a relative change based on our current position. This in turn can be done in two different ways:
   1. Changing the position by altering the x and y distance
   2. Specifying a direction and moving a given amount. Isn't it nice having Scratch automatically figure out the slope?

In the next lesson, we will continue our turtle project, but teach it some new tricks in how to sense what is around it on the stage. We'll also learn about conditional code and learn how to write code that might not be used.

Tell others about this article: