UNIT-1

3D GAME DEVELOPMENT

INTRODUCTION TO HATCH XR

What is HatchXR?
HatchXR is a learning platform where you can design and develop your own game . It is real-world
Coding environment which allows user to create 3D games in AR and VR helping to build strong
foundation for STEM learning .

What is AR and VR?

Augmented Reality (AR) augments your surroundings by adding digital elements to the real world, often by using
the camera on a smartphone while Virtual Reality (VR) is a simulated experience when the world you’re standing
in is replaced with a virtual one. VR requires a headset device.

What is the X,Y and Z axis?

The x-axis is a horizontal number line and the y-axis is a vertical number line. A z-axis refers to the depth of a
three-dimensional object. Together, these coordinates help identify the
exact location of a point.In the Cartesian coordinate system, the x and y
coordinates are part of the x-axis and y-axis in a 2D space. For a point
in space, the x and y coordinates are written as an ordered pair, (x, y).
The first number represents the point's position on the x-axis, and the
second number represents its position on the y-axis. The coordinates
can also be written as (x,y), without a space after the comma.The
positive direction of the x-axis is to the right, the positive direction of
the y-axis is upward, and the positive direction of the z-axis is outward,
away from the origin. The negative direction of each axis is in the
opposite direction. Using the xyz-axis, we can represent and manipulate
3D objects and visualize their position, rotation and scaling of the object in this titanic project.

What is 3D?
3D, or three dimensional, refers to the three spatial dimensions of width, height and depth. The physical
world and everything that is observed in it are three dimensional.

ELEMENTS OF GAME DESIGNING

3D Objects
Objects are called characters in 3d games which is very crucial in the designing process . We have come across
many games which have the main character , target character and obstacle character . The games that we will build
throughout this module will help us understand the importance of objects in game designing .

Environments
Environments are just like backgrounds of the games describing the details of the game like in Minecraft game
steve , trees , bushes can be the environment of the game which is particularly describing the overall design
requirement of the game.

Events
Event handlers can be used to handle and verify user input, user actions, and browser actions.

Cursor Events
Cursor Events means a trigger to do a task whenever the mouse moves over it or clicks on the
3D object. To Enable cursor events we have selected the 3D model and go to properties and
enable cursor events.

Key Press Events

Key Press Events are the events that are triggering actions with the keys in the
keyboard . For eg - W,A,S,D keys used to control the character similarly up , down ,
left , right keys are also used to control the character in the game.

Exploring Hatch xr

Figure 1-Picture depicts Hatch XR platform

1.1 - TALKING ANIMAL GAME

1.1.1 - Concept Index

1.1.2 - Talking Animals - The Project Flow

Enhance the background

● Add Snowfall Effect
● Add Background Music
● Make the Minecraft Avatar speak

Add a 3D component to the world

● Exploring the “Add 3D Object” component in detail
Figure 2
● Understanding the 3D component.
● Add Lion

Add Sound to 3D Components

● Exploring Cursor Events
● When the Cursor enters the object, Elephant speaks in accent
● Make horse, Beagle, Gorilla Speak in accent.

Code to make 3D component interact

● Making the Lion Speak on cursor events
● Add roar Sound

1.1.3 - Enhancing the Environment

● Open project template.
● Login and Remix the project.
● Click on the Design tab and click on Environment
and add the snow.
● After adding the snow, select the snow and click on the
properties,
scroll down and click on the play button.
● A snowfall effect can be observed once the play button is clicked Figure 3

1.1.4 - Setting the background music

● Go to the ‘Code’ section
● Get ‘When play button clicked’ block from events.
● Get the ‘Set background music __’ block from the
Sounds section.
● Change the music from ‘Birds’ to ‘Jingle Bells’.

1.1.5- Making Minecraft Avatar Speak

Part 1:
Go to the ‘Code’ section.
● Get ‘When space key pressed’ block from events.
 ● Get ‘set Minecraft Avatar visible’ block from Minecraft Avatar from Scene Layers.

Connect both the blocks.

● Set the visibility of Minecraft Avatar to true.(Refer to Figure -4)

Figure - 4

Part 2:
● Get ‘Wave Hello for 1 sec’ and ‘speak _ in accent with voice’ block from Minecraft Avatar.
● Change the text to ‘ Hello Everyone. I’m Steve.’ or with the text you want.(Refer to Figure-5)
● Connect both the blocks with ‘when space key pressed’ block.

Figure - 5

1.1.6 - Making the Elephant speak

Part 1:
● In the Cursor tab, scroll down till the end to find the ‘When cursor OnEntered Object __’ block.
● In the blank space of the cursor event block, add the elephant block like a puzzle piece.
● The elephant block can be found in the Elephant tab.

Part 2
● After adding the previous blocks, add the ‘ Elephant speak __ translate in_accent with_’ from the
Elephant tab.
● Add ‘Hello Steve. I am Ellie.’ and change the accent to Hindi.
● Add the ‘play sound __’ block from the Sounds section and keep the sound
as‘ElephantTrumpet’(Refer to Figure 6)
 Figure 6

1.1.7 - Making the horse speak

Part 1:
● In Code Mode, inside the Cursor tab, scroll down till the end to find the ‘When cursor OnEntered
Object __’ block.
● In the blank space of the cursor event block, add the Horse block like a puzzle piece.
● The horse block can be found as the first block in the horse tab.

Part 2:
● In code mode . Go to “Horse” option under “Scene Layers”
● Add ‘Hello, my name is Casey.’ and change the accent to Hindi with a female voice.
● Add the ‘play sound __’ block from the Sounds section and keep the sound as ‘horse_neigh’. (
Refer to Figure 7 )

Figure 7
1.1.8 - Making the Gorilla speak

Part 1:
● In Code Mode, inside the Cursor tab, scroll down till the end to find the ‘When cursor
OnEntered Object __’ block.
● In the blank space of the cursor event block, add the Gorilla block like a puzzle piece.
● The gorilla block can be found as the first block in the gorilla tab.

Part 2:
● After adding the previous blocks, add the “Gorilla speak __ translate in_accent with_”.
 ● Add ‘I am Kong.... King Kong’ and Change the accent to French with male voice.
● Add the ‘play sound __’ block from the Sounds section and keep the sound as ‘Chimpanzee’.
(Refer to Figure 8)

Figure 8

1.2. - FLYING DRONE GAME

1.2.1 - Flying Drone - The Project Flow

Add 3D text Component

● Go to Design Mode
● Add 3D Objects
● Go to Text option
● Select the Font Design and type the name for your drone
● Run script to see the output ( Refer to Figure 9)
Figure 9

Drone Movement along X Axis and Z Axis on key press events

● Go to Design Mode
● Click on the Drone option underScene Layers, drag the Drone right and left to observe the increase
and decrease in X axis position on your right pane
● Repeat same along Z axis to move forwards and backwards
● Go to Code Mode
● Code on key press events to move the drone right, left up and down

Figure 10
Restoration to original position on play click

● On click on PLay button the Drone should restore to original position

● Use of “Set position”specify the initial x, y and z axis position

Code to make Drone move along Y axis and rotate

● Making the drone move along Y axis up and down by key press “W” and “S”
● Make drone rotate towards left “A”, towards right “D”

Drone Movement along Z Axis

Go to Design Mode
● Click on the Drone option under Scene Layers, drag the Drone forward and backwards to observe
the increase and decrease in Z axis position on your right pane
● Code on key press events to move the drone forward and backward
● Z Axis position increases when drone moves forward, decreases when it moves backward

Drone rotation to left

Go to Code Mode
● Use key press events from Events tab
● Make drone turn to left when “A” key is pressed

Drone rotation to right

Go to Code Mode
● Use key press events from Events tab
● Make drone right to “D” key is pressed

Drone Dance along X and Y Axis

Go to Code Mode
● Use key press events from Events tab
● When Space key is pressed
● Use Repeat and wait blocks to move drone up and down along Y Axis
● Use Repeat and wait blocks to move drone left and right along X Axis

1.2.2 -Enhancing Environment

Name the Drone

Open project template.
● Login and Remix the project.
● Go to Design and Add 3D Objects
● Go to Text Option
● Select the Font Design and type the name for your drone
● Position the 3D text on top of the drone by clicking dragging X, Y and line of the text.
 ● Change the Text value and give a name for the drone. (Refer to Figure 11)
● Run script to see the output

Figure 11

1.2.3 - Coding the game

Figure 12

Drone Movements -along X Axis

● Go to the ‘Code’ section.
● Go to events Section
● Select When play clicked
● Go to Starter_dronenew_version under Scene Layers
● Select “Change Starter_dronenew_version X by 0.5 (Refer to figure 13)
● Change X by positive value since the drone should be moved to the right-side.
● Click on the play button and observe the movement.
● Lets change to right arrow key
 Figure 13

Drone movement along Z Axis

● Go to the ‘Code’ section.
● Go to events Section select When “key pressed”
● Starter_dronenew_version under Scene Layers
● Select “Change Starter_dronenew_version Z by 0.5
● Change Z by positive value since the drone should be moves Forward
● Click on the up arrow key and observe the movement.

Figure 14

Drone Movements-Rotate

Get ‘When key pressed’ block from events.

● Select key as ‘a’
● Select the drone and turn left block. (Refer to Figure 15)
● Type the degrees value.

Challenge: Make the drone do five full rotations

(left).

Figure 15

Drone Dance
● Get ‘When key pressed’ block from events.
● Select key as ‘space’
● Select the block to make the drone move up
by changing Y position values.
● Get repeat and wait blocks from ‘control’.
(Refer to Figure 16)
Duplicate the blocks and make the drone move right
left by changing X position values.
 Figure 16
1.3 - Titanic Game

1.3.1 - Titanic - Concept Index

What are conditional statements ?

Conditional statements are used in programming and other areas of logic to help make decisions.​

The “if” part of the statement is the condition that needs to be met in order for the code inside the block to
be executed . If the condition is true , the code inside the “if” block is executed . if the
condition is false , the code inside the “else” block is executed .

This Box over here says that if this Statement is TRUE, monsters will
make funny faces.

This Box over here says that if the statement is FALSE, the
monster will make this angry face instead.

What is a Timer ?
A timer is a clock that controls the sequence of an event while counting in fixed intervals of time. It is used
for producing precise time delay. Secondly, it can be used to repeat or initiate an action after/at a known
period of time. This feature is very commonly used in several applications. An example could be setting up
an alarm which triggers at a point of time or after a period of time.

What is Collision Detection ?

Collision detection is when we use computers to figure out if two things in a video game or simulation
have collided. This is important for games like Mario or Fortnite, where characters need to jump over
obstacles and avoid getting hit by enemies.​ When two objects collide, it can have different effects
depending on how they collide and how big or heavy they are.​In addition to size and weight, other factors
can affect how objects collide, such as how fast they're moving and how hard they're hitting each other.
This is why it's important to have good collision detection in games and simulations, so that the objects can
interact in a realistic way and the game feels more fun and exciting.​

Collision Detection Example

If a small ball hits a big wall, it might just bounce off the wall and keep moving.

But if two big cars crash into each other, they might get damaged or even stop moving altogether​.
1.3.2 - Project Flow
Create the required Environment

Go to Design Mode
● Add Rain environment
● Add star system environment
● Add Particle system from the environment
● Choose fire type for Particle system
● Set the appropriate visibility for the particle system

Movement of the ship

Go to Code Mode
● Go to Events
● Use When Play clicked option
● Change X value
● Add timer to make the movement continuous

Collision Detection
● Use the detect collision block to sense the collision of ship with the iceberg
● Use the remove Timer block to stop the ship movement
● Start fire in the ship by turning on the emitter

Making the ship and Iceberg sink

● Change the Y value for ship to move it down underwater
● Add timer to repeat the movement
● Repeat the same for Iceberg to make it sink
● Before making the ship and Iceberg sink, rotate them in different directions

Adding rain and star system

Go to Design Mode
● Add Rain environment
● Add star system environment

Adding particle system

● Add Particle system from the environment

● Choose fire type for Particle system
 ● Set the appropriate visibility for the particle system

Ship movement when then play button is clicked

Go to Code Mode
● Go to Events
● Use When Play clicked option
● Change X value

Repeat ship movement

Add timer to make the movement Continuous

Collision with Iceberg

● Use ‘detect-collision- block’ to sense the collision

● Use ‘remove Timer’ to stop ship movement
● Turn on the emitter to give the burning effect

Making the ship sink

● Change the Y values for the ship negatively, to move the ship down means underwater
● Add timer to repeat the movement

Making the ship rotate

● Use the rotation block to rotate the ship in terms of negative X-axis.
● Use timer to repeat the rotation
● Use remove timer block to stop the ship rotation after some time

Making the Iceberg sink (Part 1)

● Just like ship, the Iceberg also need to be rotated before sinking
● Use remove timer to stop rotation after some time

Making the Iceberg sink (Part 2)

● Change the Y values for the Iceberg negatively, to move it down means underwater
● Add timer to repeat the movement

1.3.3 - Project creation – Titanic

Adding Rain and Star System

● Open project template.

● Login and Remix the project
● Go to Design and Add Rain from the environment.
● Go to Design and Add Star System from the environment.
Adding particle system

● Go to the Design tab and click on the ‘+’ button and add the particle system from
the environment.
● Set the particle system as the child to the titanic
(drag and drop it inside the titanic 3D model tab).
● Choose the fire type particle system and appropriately place it on the ship

● The properties are as shown in the image.

● Set the visibility to false as it is needed only when collision is detected between the ship and the
iceberg.

Ship Movement when the play button is clicked.

● Go to the ‘Code’ section.

● Get ‘When play button clicked’ block from Events.
● Change X by positive value since the Ship should be moved right-side towards Iceberg.
● Click on the play button and observe the movement.( Refer to Figure 17)

Observation: Go to the Design section and change x position of the Ship by positive
and negative value and see in which direction it is moving and then add the number
to the code block.

Figure 17

Repeat Ship movement using Timer

● Since, we want our ship to continuously move forward towards the

Iceberg until it collides with it.
● So, we need a timer to repeat the code.
● Naming the timer as ‘Forward’ because the ship moves forward
● towards the Iceberg.
● So, after every 0.05 sec, the ship will change it’s X axis by 0.2

Collision with Iceberg

Go to ‘Cruise_ship’ and drag the ‘ detect collision with’ block code.

• Entity name to which the ship is colliding.
• After the collision of the ship with the Iceberg, the first thing is to stop the movement of the ship, so we
need to remove the timer which is responsible for continuous
movement of the ship.
• Go to the Timer section and remove the Timer block and write down the name of the Timer inside the
text box as “Forward”.

Observation: Go to Design, Check that there is another component added inside the ship and that is the
particle system and check that the particle type of it is ‘Fire’. As soon as the ship collides with the Iceberg,
we need to start the fire in the ship and for that we need to turn on the emitter. So, get the block from the
particle system.

Making the Ship sink

Step 1: Since sinking means that the ship is going underwater, we need to change its Y-axis(Bottom)
negatively. (Refer to Figure 18)

Figure 18

Step 2:Adding a timer named ‘sink’ to repeat the change Y-axis block after every 0.05 seconds to let it
drown completely.( Refer to Figure 19)

Figure 19

Step 3: Add the timer to the collision code. ( Refer to Figure 20)
 Figure 20

Making the ship rotate

Step 1: This will help the ship to rotate in terms of X-axis negatively(from right to left) (Refer to Figure 21

Figure 21

Step 2: Adding a timer named ‘rotate’ to repeat the rotation block after every 0.05 seconds.

Figure 22

Step 3: Now we know that we need to stop rotating the ship once it is nearly facing upward. (almost 90
degrees.) So, Check a condition where if the x-axis rotation should always be less than or equal to 85
degrees only and once it crosses that value, it will remove the rotate timer and stop rotating.(Refer to
Figure 23)

Figure 23
 ACTIVITY TIME

Create a game on Deadpool Dancing where deadpool is dancing on different dance forms
whenever the cursor is hovering over the different dance form text . Add the sound of your
choice and enhance the environment . Make use of concepts that are covered in the classroom
lessons .