Guide For

Hatch Kid’s Blocks-Based

Beginner Curriculum

Project 4:

Dancing Deadpool
 Project 4:

Dancing Deadpool

Objective

In this guide we are going to learn about using animated 3D objects in the Hatch workspace,

and learn about cursor events, and how to code cursor/mouse interactions in a game.

You will create a project using an animated character that can dance with lots of 3D text

placed around the object. You will learn how to switch between the animations of the object

as the mouse/cursor interacts with different 3D text objects

Concepts covered:

Basics of cursor/mouse events

Adding and controlling animated objects

Play/Stop sounds using code

Final Output Link:

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

Student Template Link:

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

91
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-S4

You will a screen as shown below:

Click on the green play button to play the project

Once you click on the “Green Play Button”, you may not notice anything happening in the
game. 



Move your mouse over the game screen, press and hold the left button of your mouse, and
drag your mouse around the game.



As you move your mouse around, you will notice that there i a black circle at the center of the
screen that moves with you. That black circle is called the “cursor”, and you can use it to
interact with other 3D objects.

92
As you hold down the left button of your mouse, and drag it around in the game, the black

circle (cursor) moves along with you.

You will notice, the moment the cursor enters any of the 4 words placed around the deadpool

character in the game, our character starts dancing and some music starts playing.



As you move the cursor over each of the text, and you will hear a different music play and the

character performing a different set of animations.

And as you bring the cursor inside the deadpool character and then click on the character, the

music stops, and the character goes back to its standing position.

You will be learning how to build this project, and as you build this project, you will learn more

about the cursor and how it can be used to interact with 3D objects.

Let’s start building.

93
Objective 1: Understand cursor interactions

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-S4-template

Step 2: The link above will open up an empty project with no code in the hatch workspace,
that looks as shown here. Let’s understand the scene.

On the left panel Look closely and you will see a 3D object by the name
you will see the list black coloured ring on the “Deadpool”. We are
of objects added in deadpool object. This is the going to code it to
the game “cursor”, it moves with you, and change animations
points in the direction that you based on where the
are looking at. You can use it to cursor is located
interact with 3D objects in a VR
space

As you can see, the code window of the hatch workspace opens up, and this is where you can
use blocks to define how your game would work.

94
The black ring, that is the cursor, can be used to interact with all the 3D objects in your
game. 



Step 3: In the bottom half of the left panel you will see an object by the name “cursor”. Click
on it and a list of blocks associated with our cursor object will appear. At the bottom of the list,
there will be a block called “when cursor enters object”

Step 4: Click and drag the “when cursor enters object” block into the workspace.

95
Let’s understand how can we use this cursor object to interact with other 3D objects in a 3D/
VR/AR game. 



The cursor object moves along with you and always points in the direction you are looking at.
As you look around in a 3D scene, the cursor can:



1. enter an object

2. leave an object (after entering that object)

3. click on an object (while its inside an object)

Your computer knows where any of these three things happens, and whenever any of these
events happen, you can tell the computer to perform a set of activities like you have learnt to
do for other events in previous projects.

For eg: Let’s say we want something to happen when the cursor enters the text in the game
that reads “gangnam style”.

For this, we have tell the computer to detect when the cursor is entering the gangnam style
text. Since we already have the “when cursor enters object” block present in the workspace,
we just need to define the object name in the code block.



Step 5: In the bottom half of the left panel, find the name “Gangnam_text”. That is the name
of the text object that spells “Gangnam style” in the game. Click on the name
“Gangnam_text” in the left panel and at the top of the list of block that appears, you will see a
block that only says, “Gangnam_text”

96
Step 6: Click and drag the bock that says “Gangnam_text” and attach it in the empty circular

space inside the “when cursor enters object” block

The combined block says, “when cursor enters object gangnam_text”, and you can see it has

some empty space below it.

In that empty space you can define what you want to happen in the game, and then once you

run the code,, anytime the cursor will enter the gangnam style text, the computer will end up

performing your specified set of activities.

Let’s try it out.

You have already learnt in the previous project, how to make characters speak with each other. 


Let’s make the Deadpool character say something when cursor enters the gangnam style text.

97
Step 7: In the left panel, click on the name “Deadpool”, and find the block that reads,
“Deadpool say hi for 1 second”.

Step 8: Click and drag the “Deadpool say hi” block and attach it inside the “when cursor
enters object gangnam_text” block.

98
Click on the green play to run the code.



Initially you may not see anything happening in the game. Move your mouse over the game

screen, press and hold down the left button of your mouse, and drag your mouse around till

you see the cursor enter the “Gangnam Style” text.



The moment your cursor enters the “Gangnam style” text, you will see a speech bubble appear

over the deadpool object saying “hi”.

The moment your cursor enters the text saying “gangnam Click on the green play

style”, the computer runs the code written inside the “when button to run the code

cursor enters object gangnam_text”, and in this case that is

making the deadpool object say “hi” for 1 second.

Anytime the cursor enters the “Gangnanm style” text, the deadpool object will say “hi”.


Now that you know how cursor events work, lets learn to control animations on an object. But

first, click on “reload” button to reset your game, and delete the “deadpool say hi” block form

your code, as we wont need it anymore.


99
Objective 2: Interacting with animated objects

There are various different types of objects that can be added in Hatch workspace when you
are designing your own game. You can add


1. Simple 3D shapes - Cube, Sphere, Cylinder and more


4. Environments - buildings, grass, ocean, ground, sky, rain, snow, and more

5. Lights

6. Texts (2D & 3D)


You will learn about each of these categories in detail while learning about the design
workspace. Let’s focus on animated 3D objects.

Certain objects added in your game might already have some animations in-built in them.
They are called animated 3D objects. The deadpool object in the game is one such animated
3D object.

Let’s learn how to control and change its animation. 



Step 1: Click on the name “Deadpool” in the left panel of your screen. A list of blocks appear,
look for a block that says, “set Deadpool animation clip to static-pose”.

100
Step 2: Click and drag the “set Deadpool animation clip to static-pose” block in the

workspace, and attach it inside the “when cursor enters gangnam_text” block.

Step 3: You will notice that there is a drop down menu option around the word “static-pose.”.

Click on the drop down menu option and you will see the list of animations present in the

deadpool object. Select the option that says “gang”

101
Click on the green play button, and move your cursor over over to the “gangnam style” text,
and now you will see the deadpool objects starts dancing.



As mentioned earlier, there are animated 3D models that we can add in the hatch workspace.
The Deadpool character in the game is an animated 3D object, and it has an animation by the
name “gang”. The code block is telling the computer that anytime the cursor enters the
gangnam style text, the deadpool object would switch to the gangnam style dance animation.

We can also control the speed of the animation.



Step 4: Click on the name “deadpool” in the left panel, and click & drag the block that says,
“set deadpool animation speed to 1.5”

102
You can change the number “1.5” to any value. Click on the green play button, move the cursor
over the gangnam style text, and you will notice the deadpool character’s animation has sped
up or slowed down based on the value you have entered in the number input box.

CONGRATULATIONS. You have coded your very first cursor interaction and lerant to
control the animation of the a 3d object.
Let’s now add some music to the game

103
Objective 3: Adding music using sound blocks

If you look closely at all the names of the objects in the left panel, you will see that there are
four music files present in your game.

One of the music files present is the gangnam style song, let’s play in the game when the
cursor enters the gangnam style text.

Step 1: In the left panel, click on the music with Gangnam_style name. Scroll down in the list
of blocks, and you will see a block called “Gangnam_style play sound”

104
Step 2: Click and drag the “Gangnam_style play sound” block and attach it inside the “when
cursor enters object Gangnam_text” block

Now when you click on the green play button, and run the code, as soon as you you move the
cursor inside the “Gangnam_text” object, the deadpool character starts dancing and you will
also hear the music playing in the background.

Let’s add cusor interaction for other text objects placed around the deadpool character.

Click on the reload button to reset your scene.

Step 3: Right click on the “when cursor enters objects Gangnam_text” block, and select the
“duplicate” option from the drop down that appears.

105
A copy of your entire set of blocks will appear in the workspace.

Let’s define what will happen when the cursor enters the “hip-hop text” object.

Step 4: In the new set of “when cursor enters object” block, click on the drop-down menu
option in the “Gangnam_text” block.

Step 5: You will see a list of names of all the objects in the game appear. Select the name
“Hiphop_text”

105
Your block will now say, “when cursor enters object Hiphop_text”. Let’s change the animation
of the deadpool object to a different dance for this one.

Step 6: Click on the drop-down menu option in the “set deadpool animation clip gang”
block and from the list that appears select the option that says “hip”

Step 7: Change the value of the animation speed to a different value in this new cursor enter
hiphop text block.

Let’s play a different music when cursor enters the hiphop text.

106
Step 8: Delete the “Gangnam_style play sound” block from insde the “when cursor enters
object hiphop_text” block

Step 9: In the left panel, click on the music file with the name, “Hip_hop” and find the block
that says “Hip_hop play sound”.

Click and drag the “Hip_hop play sound” block and attach it inside the “cursor enters
hiphop_text” block.

107
Click on the reload button to reset your scene, and then, click on the green play button to run
the new code.



As you move your cursor inside the gangnam style text, the deadpool character will perform its
mentioned dance animation and the gangnam style music will be playing.

No move the cursor over the “Hip hop” text in the game. You will notice that the deadpool
character changes its animation and starts performing a hip hop dance. And the new hip hop
music will also start playing.



But you will also notice that the previously playing gangnam style music doesn't stop when
the new hip hop music starts playing.



We will have to code this logic, to make the computer stop playing all other music files and
then start playing a new music file.

So, in our code we need to stop playing gangnam style music and then start the hip hop
music when cursor enters the hip hop text.

And similarly, we will also need to stop playing the hip hop music and then start playing the
gangnam style music when the cursor enters the gangnam style text.

108
Step 10: Attach a new “Gangnam_style play sound” block above the “Hip_hop play sound”

block inside the “cursor enters hiphop_text” event block.

Step 11: In the Gangnam_style play sound block, click on the drop down menu option and you

will see a list saying “play sound”, “pause sound”, “stop sound”. Select the “stop sound”

option.

Similarly now you will need to add a “Hip_hop stop sound” block in the “cursor enters

Gangnam_text” block.

109
Your final code should look similar to the code in this image.

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

As you move your cursor over the texts, you will notice that when one music starts, the
previously playing music stops.

Let’s make all the music stop, and make the deadpool character stop dancing when the cursor
is clicked on the deadpool object.

Step 12: Right-click and duplicate the “cursor enter hiphop_text” block

110
Your final code should look similar to the code in this image.

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

As you move your cursor over the texts, you will notice that when one music starts, the
previously playing music stops.

Let’s make all the music stop, and make the deadpool character stop dancing when the cursor
is clicked on the deadpool object.

Step 12: Right-click and duplicate the “cursor enter hiphop_text” block

111
We want to define what would happen in the game when the cursor clicks on the deadpool

character.

Step 13: So in the new set of cursor blocks that appear, click on the hiphop_text drop-down,

and select the option that says deadpool.

112
Step 14: Click on the cursor enters object drop down and you will see three options appear

enters object

leaves objec

is clicked at object

Select the option that says “is clicked at object”.

Step 15: Inside the cursor is clicked at object deadpool block we need to define what will

happen upon clicking on the deadpool object.



Lets make the deadpool switch to a standing position -- In the set animation clip block select

the option that says, “mixamo.com”

We need to stop all the music files stop playing -- change all the play sound blocks to stop

sound.

For cursor on click at object to work, you will need to bring the cursor(the black circular

ring) inside the deadpool object, and then click on the deadpool object using your mouse.

Your final code should look as shown:

113
Reset your scene first by clicking on the reload button, and then click on the green play button
to run your final code.

As you move your cursor over the “hip hop” & “gangnam style” text:

1. deadpool character should be changing its animation

2. the respective music file would be playing in the background 



As you move your cursor back on the deadpool object and the click on the object using your
mouse:

1. deadpool should switch back to standing position

2. any music file should stop playing 



You have just completed your project.



As an additional task, you can try adding more cursor blocks to define what happens when
the cursor enters the “ymca_text” and the “CD_text” object.



The deadpool character has 2 more animations named, “ymca” & “chick”. You can code your
project so that each of these animations plays when cursor enter the ymca_text or the cd_text
object.

And then you can also play 2 more music files present in the game called “chicken_dance” &
“ymca”. Remember that when one music plays, the other files should stop playing, so before
starting a new music file you will have to stop the other three files.
114
If everything is done correctly this is what your final code blocks should look like:

Note: The number inside the animation

speed block may vary based on your

input.

115
Upon completion, run your code and ensure the code is functioning as you intended it to.



After that, you can give your project a name and login to your account and publish and share
your projects with everyone.

END OF GUIDE

116