Skip main navigation

Positioning the sprite using X and Y coordinates

To move your sprite to a particular point on the Scratch Stage, you can use X and Y coordinates. Watch Mark use these to make an animation.

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.

A grid with a horizontal axis labelled X and a vertical axis labelled Y, splitting the image into four quarters. Where these cross is labelled 'X:0,Y:0'. There are labelled red circles showing the coordinates of x: 200, y:100 (in the upper right) and x: -200, y:-100 (in the lower left).

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:

A screenshot of the Scratch Sprite pane. The x and y coordinates are in the top right, and are highlighted by a rectangle. The x coordinate is on the left, and is also represented by a double-headed horizontal arrow. The y coordinate is on the right, and is also represented by a double-headed vertical arrow.

Using coordinates in blocks

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

go to x:(130) y:(110)

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:

Screen recording of Scratch. The 'go to x:() y:()' block is snapped to a 'when green flag clicked' block in the Code area. Then, the coordinates in the 'go to' block are changed to '130' for x and '110' for y. The green flag is clicked to start the instructions. The cat sprite disappears from the centre of the Stage and appears at the specified coordinates in the top right of the Stage.

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.

glide (2) secs to x:(130) y:(110)

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.

Screen recording of Scratch. The 'glide () secs to x:() y:()' block is snapped to a 'when green flag clicked' block. Then the secs value is changed to '2', the x coordinate changed to '130' and the y coordinate is changed to '110'. The green flag is clicked to start the instructions and the Cat sprite moves in a straight line to the specified coordinate in the top right of the Stage, taking 2 seconds to do so.

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:

Scratch code: when flag clicked, switch backdrop to (Castle 2 v), go to x(-160) y(-105), glide (3) secs to x:(160) y:(40).

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.
This article is from the free online

Introduction to Programming with Scratch

Created by
FutureLearn - Learning For Life

Our purpose is to transform access to education.

We offer a diverse selection of courses from leading universities and cultural institutions from around the world. These are delivered one step at a time, and are accessible on mobile, tablet and desktop, so you can fit learning around your life.

We believe learning should be an enjoyable, social experience, so our courses offer the opportunity to discuss what you’re learning with others as you go, helping you make fresh discoveries and form new ideas.
You can unlock new opportunities with unlimited access to hundreds of online short courses for a year by subscribing to our Unlimited package. Build your knowledge with top universities and organisations.

Learn more about how FutureLearn is transforming access to education