Courses/course Content/for Kids/learn

In this activity, we will use variables to track and display a sprite's position on the Stage in real time. As the sprite moves around, the variables will update automatically to show its current X and Y coordinates.

Every point on the Stage has an X coordinate (horizontal position) and a Y coordinate (vertical position). The center of the Stage is at x: 0, y: 0.

Setting Up

Open PictoBlox and create a New File.
Select Block Coding as the coding environment.
Choose any sprite you like — we will use Tobi for this activity.

Creating the Variables

Go to the Variables palette and click Make a Variable.
Create a variable called X Position.
Create another variable called Y Position.
Make sure both variables are set to For all sprites.
Enable Show variable for both so they are visible on the Stage.

PictoBlox stage showing two variable displays — X Position and Y Position — in the top left corner — X Position and Y Position variables displayed on the Stage

Building the Script

Now let's build the script that continuously updates the variables to reflect the sprite's current position. You will find the blocks in the mentioned palettes:

When flag clicked — Events
Forever — Control
Set (X Position) to () — Variables
Set (Y Position) to () — Variables
x position — Motion (used inside the Set block)
y position — Motion (used inside the Set block)

Block coding script showing when flag clicked, forever loop containing set X Position to x position and set Y Position to y position — Script to continuously track and update the sprite's X and Y position

Making the Sprite Move

To see the variables change in real time, let's make the sprite move using the arrow keys. Add a second script to control the sprite's movement:

When right arrow key pressed — change x by 10
When left arrow key pressed — change x by -10
When up arrow key pressed — change y by 10
When down arrow key pressed — change y by -10

Four block coding scripts each triggered by an arrow key press — right adds 10 to x, left subtracts 10 from x, up adds 10 to y, down subtracts 10 from y — Scripts to move the sprite using arrow keys

Running the Script

Click the green flag to start the program.
Use the arrow keys to move the sprite around the Stage.
Watch the X Position and Y Position variables update in real time as the sprite moves!
Notice how X increases when moving right and decreases when moving left, while Y increases when moving up and decreases when moving down.

PictoBlox stage showing Tobi the bear moved to a position with X Position and Y Position variables showing updated coordinate values — Variables updating in real time as Tobi moves around the Stage

Understanding the Stage Coordinates

Direction	Effect on X	Effect on Y
Move Right	Increases	No change
Move Left	Decreases	No change
Move Up	No change	Increases
Move Down	No change	Decreases

Save your file with the name Tracking Position before moving on to the next activity!