Guide For

Hatch Kid’s Blocks-Based

Beginner Curriculum

Project 3:

Traffic Control
 Project 3:

Traffic Control (Learn about 3D cordinates)

Objective

In this guide we are going to learn 3D coordinate system, and how to using coordinate

position values to control the motion of an object in a game. We will build a project, where

students will be able to control the motion of a train, a rocket, and a car by manipulating their

x/y/z position values using loops, and keyboard events.

Concepts covered:

Basics of coordinate space

Understanding x/y/z position values

Explore more about loops and variables

Learn more about different types of events

Final Output Link:

https://kids.hatchxr.com/@XR4schools/G25-FC-S3

Student Template Link:

https://kids.hatchxr.com/@XR4schools/G25-FC-S3-template

56
How it works?

Let’s first understand what we are going to be building in this session.

Open the completed project link:

https://kids.hatchxr.com/@XR4schools/G25-FC-S3

You will a screen as shown below:

Click on the “Green Play Button” to run the code. Initially you will notice nothing happens, but
then, as you press different keyboard buttons you will see

Pressing the up arrow key makes the rocket move u

Pressing the down arrow key makes the rocket move dow
The left and right arrow keys make the train go left and righ
The “n”, and “m” keys make the car move forward and backward
Pressing the “c”, “t”, and ”r” keys stop the car, train, and rocket respectively.

In the [previous projects we learnt to move objects using the “move forward /backwards”
blocks. In this project we will learn how to code more precise motion using X/Y/Z coordinate
position values of an object.

So let’s get started.

57
Objective No. 1: Understanding the template

Step 1: We will start by opening the template link of the project mentioned here.

Student Template Link: https: //kids.hatchxr.com/@XR4schools/G25-FC-S3-template

Step 2: The link above will open up an empty project with no code in the hatch workspace,

that looks as shown here.

These tabs help you switch between the

These tabs help you switch between the design, code and play windows

design, code and play windows

On the left panel Object by the name Object by the name Object by the name

you will see the list “Train”. We will code “Rocket”. We will “Car”. We will code

of objects added in to move it left and code to move it up to move it forward

the game right by changing and down by and backward by

its x-position changing its y- changing its z-

position position

Before we start coding, let’s learn more about these X/Y/Z coordinate positions.

58
Objective No. 2: Understanding the design workspace

Step 0: Click on the design tab at the top of the workspace.

You will switch to the design tab of the hatch workspace, and your screen would look as shown:

This is where you can design your own game, add any 3d models that you want in the game

and make the game look like whatever you want. 



For the projects in this curriculum module, the designs of the games have already been

prepared beforehand, and you are learning how to code the games. So you wont need to

modify the designs of any of the games here, but let’s still learn how the design tab works.

59
 On the left panel These arrow This are is called the You can add and
you will see the list buttons will help “Inspector”. You can draw your own 3D
of objects added in you navigate in all view and modify models using these
the game directions in the the look of your buttons
game game in this area

As you can see, you have a rocket, a train and a car in this game.

The left panel contains the names of all the 3D models available in the game. You will notice
the names of rocket, car, and train in the left panel. 



You can select an object by clicking on its name in the left panel, or by clicking on the
object directly in the inspector.

And when an object is selected, you will see a new panel appear on the right side of the
screen, that shows the properties of the selected object.

Step 1: Click on the names of the rocket, car and train objects and have a look at their
properties in panel that appears on the right side of the screen

60
In this image you case the train object is selected, and its properties are visible on the right

side of the screen.

Click on the names of all the

objects in the game, you will see

most of them having different set

of properties. But for all the objects,

you will see, the common set of

basic properties of position,

rotation and scale, with some

numbers labeled as x/y/z beside

them.

These are called the ordinate values

for position, rotation and scale of an

object, and you can change these

numbers to change the size/

orientation of an object, or its

position in the game.

61
Objective No. 3: Understanding 3D cordinates

The X/Y/Z position, rotation and scale values in the properties panel for all objects are the 3D

coordinate values for each of objects. Let’s understand why these values are needed, and can

we use these values to code the game.

In the previous projects, to move any object we used blocks that said, “move forward/

backward/left/right/up/down”. Defining motion in terms of forward-backward, left-right, and

up-down direction is not always helpful.

For example:

Up

Down

Let’s say a person is standing on

the north pole of the planet, and

another person is standing on the

south pole. 



The up and down direction for

both the persons will be

completely different.

The directions of left/right/up/

down/front/back are relative and

vary from person to person, from

object to object.

Down

Up

That is why to code complex motion of objects in a 3D game, we cannot rely on these relative

directions. 



This is why the coordinate values are useful.

Let’s see how coordinate values can be used.

62
Imagine a number line.
Person A

Left Right

Front

-13 -12 -11 -10 -9 -8 -7 -6 -5 -4 -3 -2 -1 0 1 2 3 4 5 6 7 8 9 10 11 12 13

Front

Right Left

Person B

In the image above, let’s say there are two people lookin at the number line. As you can see, for

both the people, the right and the left directions are completely different from each other. 



But if asked about the location of the red diamond, both the person can say the the diamond

is located at the number 6 position on the line.

Let’s try to see this a bit differently.

Person A
Y

Left Right
8
Q (x: 9, y: 7)

Front 7

R(x: 3, y: 5)
5

-13 -12 -11 -10 -9 -8 -7 -6 -5 -4 -3 -2 -1 1 2 3 4 5 6 7 8 9 10 11 12 13

-1

-2

-3 S (x:5, y: -3)

-4

-5

-6

Front
T (x: -6, y: -7) -7

Right Left
-8

Person B

63
In the first scenario, the red diamond was on the number line, so we were able to tell its
position. 



But what if the box was not on the number line. In that case, we can define the position of an
object with two number lines placed at an angle of 90 degrees with each other, as you see in
the second image.



Let’s call the horizontal number line “X” and the vertical number line “Y”.

For both person A & person B, irrespective of the direction from which they are viewing the
objects, the positions of the shapes Q, R, S and T can be defined using the combination of
numbers from the X and Y number line.



We can say:

1. Shape Q’s position = Number 9 on the X-line & Number 7 on the Y-line.

2. Shape R’s position = 3 in X & 5 in Y

The X and Y values that define the position of these shapes are called the x-coordinate and the
y-coordinate.

For shape S: x-coordinate = 5

y-coordinate = -3

For shape T: x-coordinate = -6

y-coordinate = -7

Now, to move an object, we can just change their x & y-coordinate value. We can see,
increasing the x-coordinate value of any object will make it move in the positive x-direction,
and decreasing the x-value, will make the objects move in the negative x-direction. (What you
would earlier have called as the left and right directions for both person A & B)

Similarly, you can also increase or decrease the y-coordinate value of any shape to make them
move forward or backward with respect to person A or B.

So using two number lines we can define the position of any object on a flat surface.



But what about the real world. On a flat surface objects can move only in a combination of the
2 sets of directions. But in the real world, we can move in 3 sets of directions: front-back, left-
right, and up-down.
64
So, for 3D objects, rather than just using two values of X and Y to define the position, We use 3
set of number lines, all positioned at 90 degrees with each other as shown. Y

Y X

8
7 Z

4 -8
M -7
3
-6
2 -5
-4
1 -3
-2
-1 X
-13 -12 -11 -10 -9 -8 -7 -6 -5 -4 -3 -2 -1 1 2 3 4 5 6 7 8 9 10 11 12 13
-1 1
2
3 -2
4 -3
5
6 -4
7
8 -5
Z -6

-7

-8

Let’s call these 3 number lines as X, Y and Z lines. The position of any object in a 3D space can
be then defined with x, y, and z coordinate values.



For example, in the image above, shape M has an x-coordinate of 7, y-coordinate of 6 and z-
coordinate of value 6.

What it means is, if you were initially located at the position where all three lines meet, then
from that point, if you walk 7 units in X-direction, 6 units in Y-direction and 6-units again in Z-
direction, then you will be reach the shape M.

To make the shape M move in the 3D space, we can just

change its X, Y and Z position values.

So in the design space, the X/Y/Z values are the coordinates

for the position, rotation and scale properties of the objects.

You can modify the position values to make the objects move.

65
Objective No. 4: Code motion by changing coordinate values

Step 0: Click on the code tab at the top of the screen and switch back to the code window.

Let’s start by making the rocket move up. We have done this activity in the previous projects,
by using the move up block. But this time we will make the rocket move up by changing its x/
y/z-coordinate value.

To make the rocket move up, we first need to determine which coordinate value controls its
motion in the up direction. 


As mentioned in the previous projects, whenever you want a certain object to perform some
activity through code, you will need to click on the name of the object and plan out what you
want to do based on the list of blocks that are available.



Step 1: Click on the name “rocket” in the left panel of the code workspace.

Step 2: In the list of blocks that appear, you will find a block that says, “change Rocket X by 1”.
Click and drag this block out in the workspace.

66
Just as with the move up block, the change x by 1 block will need an event block for our
computers to know when to perform the activity of changing rocket’s x-position by 1.

Step 3: Click on the “events” section in the left panel, and drag out the “when green play
button clicked” block.

67
Step 4: Attach the “change Rocket X by 1” block inside the “when green play button clicked”

block.

Click on the green play button to run your code. You will notice that every time you click on

the green play button the rocket moves to a new position.

Let’s understand what’s happening in the code.



The code block says “When green play button is pressed, change Rocket X by 1”. 



So anytime you press the green play button, the computer, adds 1 to the current x-position

value of the rocket, and then moves the rocket to the new x-position value.

Step 5: Change the number 1 to -1, and now when you click on the green play button, the

rocket will move 1 unit in the opposite direction from earlier.



Step 6: Change the number to 0, and now when you click on the green play button, you will

notice that the rocket does not change its position.

This is because, the computer is try to add 0 to the current x-position of the rocket, and since

adding 0 to a number does not change its value, so the rocket continues to stay at its current

position.

Changing the x-position of the rocket doesn’t seem to make it fly up.

Let’s change the x coordinate to y / z and see for ourselves, which coordinate will make the

rocket fly up.

68
Step 5: Click on the drop down menu option on X in the “change Rocket X by 1”. You will see a

menu with the options X / Y / Z.

Step 6: Click on the option Y. Your block would now say, “change Rocket Y by 1”.

Click on the green play button, and you will see the rocket move up by 1 unit. 


As per the code block, every time you click on the green play button, the rocket’s Y-position

will change by 1 unit. And as a result it appears the rocket has moved up by 1 unit.

69
Now that you are able to move the rocket up by changing its y-coordinate. Let’s make the
rocket fly up continuously by changing its y-position again and again using loop blocks.

Step 7: Click on “Loops & Timers” section on the left panel and drag out the block that says
“Forever”

70
Step 8: Drag and place the “change Rocket Y by 1” inside the “forever” block.

Step 9: Place the “forever” block, inside the “when green green play button clicked” block

Click on the green play button, and you will see the rocket object move up again and again.

As per the code, the computer is increasing the y-position of the rocket by 1 again and again,

making it look like the rocket is moving up continuously.

You may notice the speed with which the rocket moves up is very fast. Its because its trying to

move up a large amount of distance in a short amount of time. 



Step 10: Click on the “Reload” button to reset the game and change the number 1, to a

smaller value, 0.5. Now when you click on the green play button you will notice the rocket

has slowed down.

71
Step 11: To slow the rocket down further, you can
change the value inside the “change Rocket Y” block
to 0.05.

Reload and then click on the green play button to see

the rocket fly up.

Just like we made the rocket fly up, let’s make the train move along the tracks.


To make the train move, we need to bring out the blocks that can change it X/Y/Z position of
the train.



Step 12: Click on the name “Train” in the left panel, and click and drag the “change Train X by
1” block and attach it inside the “Forever” block.

72
Step 13: We know that “change Train X by 1” is going to make the train move at a very fast

speed, so change the number 1 to 0.04 (you can give it any value lower than 1 to slow the

speed of the train).

Click on the reload button to reset your scene, and then click on the green play button. Now

you will see that the moment the green play button is clicked, the rocket starts moving up,

and the train starts moving along the tracks.

Step 14: Change the value in “change Train X by 0.04” to “-0.04”, and when you run the code

you will see the train move in the opposite direction.

Now that you have made the rocket and the train move, let’s make the car move in the game

as well. Let’s try to make the car cross the tracks before the train reaches it.



Step 15: Click on the name “Car” in the left panel, and drag out the block that says “change

Car X by 1” and attach it inside the “Forever” block.


73
We know that, from the position we are viewing the game

changing the Y-coordinate value makes an object move in up or down directions

changing the X-coordinate value makes an object move in the left or right direction

So to move the car towards the track, you will have to change its Z-position. 



Step 16: Click on the drop down menu option on “change car x by 1”, and select the Z option

from the menu.

74
Step 17: Change the number 1 in the “change car Z by 1” to a smaller value (0.06) to slow the
speed of the car. 


Reload the game and click on the green play button. You will notice:

1. Rocket flies up

2. Train moves forward on the tracks

3. Car move forward towards the tracks.

CONGRATULATIONS!!! You just written the code to make objects move by

changing their X/Y/Z coordinate positions.
Tip: You can change the X/Y/Z position of the same object simultaneously to make objects
move in complex paths

75
Objective No. 5: Adding variables to change the speed of objects

Let’s try to control the motion of all the objects using keyboard buttons.



We can start by making the rocket move up and down using the up and down arrow keys on
the keyboard.

To do this, as you might remember from the previous project, you first need to create a
variable, that can store the value of the rocket’s speed, and then you can modify the value of
this variable with the up and down arrow key pressed event blocks.


Reload your game and let’s start.



Step 1: Click on the name “variable” in the top half of the left panel, and click on the “create a
variable” option.

Step 2: A small window will pop up where you can give a name to the variable you want to
create. Let’s name this variable “rocket y speed”.

After typing the name of the variable, click on the “create” button.

76
After clicking on the create button, you will see a new set of blocks appear in the variable

section.

77
Step 3: Click and drag the “set variable rocket y speed to” block into the workspace

We need to give the “rocket y speed” variable an initial value. Let’s give it a value of “0” at the
beginning of the game.

Step 4: Click on the “math” section in the top half of the left panel, and drag out the number
block from the top of the list.

78
Place the number block inside the empty space of “set variable rocket y speed” block as

shown.

Step 5: In the “change Rocket Y by 0.05” block, right click and delete the number block.

79
We want to use the “rocket y speed” variable to control the motion of the rocket object. 



Step 6: Click on the variables section in the left panel, and drag out the round block that just
says “rocket y speed”

Step 7: Drag out the “rocket y speed” variable block, and place it inside the the “change
rocket y by” block

80
Click on the green play button, and you will see the train and the car move, but the rocket will
not be moving. That is because the value of the variable “rocket y speed” is “0”. And the code
says, change the y position of the rocket by the value of the “rocket y speed” variable. So the
computer is trying to change the y position of the rocket by 0 units. Thus, not moving the
rocket at all.

81
Objective No. 6: Adding keyboard controls

Lets now make the rocket move up and down using the up and down arrow keys on the
keyboard.

Step 1: Click on the “Events” section in the left panel of your screen.

Scroll down in the list of blocks that appear, and you will see a block that says:

”When space key pressed”

Step 2: Click and drag the “When space key pressed” block in the workspace.

82
We want to make the rocket move up when the up arrow key is pressed.

Step 3: Click on the drop down option in the “when space key pressed” block, and select the
“up arrow” option

83
Step 4: Right click on the “set variable rocket y speed to 0” block in the workspace and select

the option in the drop down menu that says “duplicate”.


This will create a copy of the “set variable rocket y speed block to 0” block.

84
Step 5: Drag one of the “set variable rocket y speed block to 0” and attach it inside the “when

up arrow key pressed” block, and change the number “0” to “0.05”

Click on the green play button to run the code, and you will see that while the train and car are

both moving, the rocket is still not moving. But when you click on the up arrow key, the rocket

starts moving up.

With this accomplished, now we can make the rocket move down when the down arrow key is

pressed by setting the value of the “rocket y speed” variable to “-0.05” (a negative value will

decrease the y-position of the rocket and that results in rocket moving down).

Step 6: Right click on the “when up arrow key pressed” block, and select “duplicate” from the

menu.

85
A new copy of the “when up arrow key pressed, set variable rocket y speed to 0.05” is

created.

Step 7: Change the up arrow key to down arrow key from the drop down many option, and

then change the value 0.05 to -0.05 to make the rocket go down.

86
As per the code now, you will be able to move the rocket up by pressing the up arrow key and

down by pressing the down arrow key.



Click on the reload button to reset your game and then click on the green play button to run

the code. Press the up and down arrow key to move the rocket up and down

Similarly now you can make the rocket stop moving by changing the value of the “rocket y

speed” variable to “0” when you press the “r” button on the keyboard.

Step 8: Duplicate the “when up arrow key pressed” block again, and change the “up arrow”

key option to “r” key and change the value of “rocket y speed” variable to “0”.

87
 Congratulations! You have just learnt how to make objects move by changing their x/
y/z coordinate positions, and how to control their motion using user inputs.

Student activity:


Just like you added a “rocket y speed” variable to control the speed of the rocket, and move
it in different direction using the up and down arrow keyboard buttons, you can also
Create a variable “train x speed” and make the train move left and right using the “left
arrow” and ”right arrow” keyboard buttons and make the train stop using the “t” key on
the keyboard
Create a variable “car z speed” and make the car move front and back using the “n” and
”m” keyboard buttons and make the car stop using the “c” key on the keyboard.

Hint: If facing doubts, you can refer the final output project link mentioned at the
beginning of this guide to understand the code

Once the additional activity is completed, your code should look something like this:

88
This completes your traffic control project. 



Login to your account, give a name to your project and click on the “REMIX” button to
publish your project. You can then copy the link and share this project with your friends.

END OF GUIDE

89