Positioning the sprite using X and Y coordinates

Now that you’ve tried using the point in direction () and move () steps blocks in the correct order to move a sprite, I’d like to show you how you can move your sprite around the Stage by using coordinates. Using coordinates means that you can move a sprite to a specific position on the Stage.

Coordinates

You can describe any position on the Stage by the values of the x and y coordinates. The x value represents the position horizontally (along the X axis of the Stage) given as a value from -240 (on the far left) to +240 (on the far right), splitting the stage into 480 equal steps.

Similarly, the y value represents the position vertically (along the Y axis of the Stage). The Y axis is split into 360 equal steps vertically, with a y coordinate of 180 corresponding to the top of the Stage, and -180 corresponding to the bottom.

The coordinates for the centre of the Stage are x = 0 and y = 0, which you can also write as (0,0). A position like x:-200, y:-100 or (-200,-100) is towards the bottom left on the stage, and a position like x:200, y:100 (200,100) is near the top right.

You can see the X and Y axes by adding the “Xy-grid backdrop” to your project. This will make it easier to identify what coordinates to use in your blocks. From the position that you want, imagine a vertical line to the X axis, and use the values shown on the X axis to estimate the x coordinate where your line meets the X axis. Then do the same with a horizontal line to the Y axis to estimate the y coordinates.

For a sprite, the x and y coordinates refer to the position of the sprite centre, and are shown in the Sprite pane below the Stage:

Using coordinates in blocks

You can use the go to x:() y:() block to make a sprite ‘jump’ to a specific point:

A common use for this block is when you want the sprite to start from a particular spot before it starts to move in an animation. The animation below demonstrates the blocks needed to snap together in the Code area to position your sprite:

The glide () secs to x: () y: () block moves a sprite in a straight line from its current position to the x and y coordinates specified on the block from the sprite’s previous position. The value of secs (seconds) on the block defines the amount of time it will take the sprite to glide to the new position.

You can use this block to smoothly move a sprite around the Stage, for example, moving a fish sprite around a fish tank in an animation.

Scratch will wait until the glide has finished before running any block connected below the glide () secs to x: () y: () block. This means that those instructions, such as changing costume, will only happen after the gliding movement has completed.

Task

Now, I would like you to create an animation in Scratch, using coordinates. In this animation, a sprite will appear to travel to a castle and move up a set of stairs. Before you program the animation, follow these instructions to add the sprite and backdrops you will need:

1. Create a new project by selecting File and new from the drop down menu
2. Delete the Cat sprite by clicking on the sprite in the Sprite pane and clicking on the trash can icon
3. Choose a different sprite – this sprite will appear on the Stage
4. Click the Choose a Backdrop icon
5. Click the Fantasy category and choose Castle 2
6. Click the Choose a Backdrop icon
7. Select the Fantasy category and choose Castle 3

Now, use the blocks that you’ve seen in this and previous steps to create an animation of a sprite moving on different backdrops. Start by following the instructions below:

1. Drag a when flag clicked to the Code area
2. Snap a switch backdrop to () block under the when flag clicked block
3. Change the backdrop to Castle 2 on the switch backdrop to () block
4. Use a go to block to position the sprite at the start of the path on Castle 2
5. Move the sprite towards the door of the castle along the path, by using a glide to block

Your blocks should look similar to this:

Your task now is to complete the animation by snapping some more blocks to the sequence. Your program should:

1. Change the backdrop to the Castle 3 backdrop
2. Position the sprite on the carpet on the right side of the screen
3. Move the sprite along the carpet and up the stairs

Click on the green flag to run your full animation.

Discussion

Reflect on how your animation went and any inspiration that it’s given you for creating animations using other backdrops and sprites.

In the comments section, share:

• Your experiences of making this animation. Did everything work correctly the first time, or did you need to make changes?
• An idea for an animated story that you could create in Scratch and the backdrops and sprites you would use.