3D - Pick A Letter (Difficulty: 2)

[info-creaticode]

 

Introduction

In this tutorial, we’ll build a simple picking program that shows 3 letters of “A”, “B” and “C”, and show different animations depending on which letter is picked.

 
 

Step 1 - An “Empty” Scene with 3D Axes

Please create a new project, remove the dog sprite, and add these blocks in the “Empty1” sprite. You can find the “initialize 3D scene” and the “show 3D axis” blocks in the “3D Scene” category.

 
As shown, the X-axis points to the right, the Y-axis points forward (into the screen), and the Z-axis points up. You can drag your mouse on the stage to rotate the camera around it:

 
 

Step 2 - Add the Letter “A” Costume

Next, switch to the “Costumes” tab, and click the button at the bottom left to open the costume library. Find and select the costume for the letter “A” named “Glow-A”.

 
 

Step 3 - Extrude “Glow-A” to a 3D Letter

Now we need to add the letter to our 3D world. A costume image is 2-dimensional, so it has no thickness. To give it some thickness, we will use the “extrude” block in the “3D Object” category.

You will need to select the “Glow-A” costume, set a white side color, and name this new object “A”.

 
 

Step 4 - Make the Letter Object Spin

For some fun, let’s make the letter spin around. You can set its “Z-Rotation” speed to make it rotate around the Z-axis. Try different speed values, like 200.

 
You should now have a spinning letter A like this:

 
 

Step 5 - Add “Glow-B” Costume and Extrude It

Next, we need to add the “Glow-B” costume.

 
After that, duplicate the code to extrude and spin this new letter object. Don’t forget to name it “B”. If you reuse the name “A”, then the first letter object named “A” will be removed.

 
Now we have 2 letter objects spinning together:

 
 

Step 6 - Move Letter “B” to the Left

To separate the 2 letter objects, we can move the “B” object to the left. Since the X axis is pointing to the right, we can set “B” to a negative X position.

Note that the “A” object will not be moved, since object “B” is the one that’s most recently added before the “set x” block, it will only be applied to object “B”. In this case, object “B” is the active “sprite object”, and all operations are applied to object “B” until another object is selected as the new sprite object.

This is what you should get:

 
 

Step 7 - Add Letter “C” to the Right

The steps for adding the letter “C” is very similar. You can reuse most of the blocks.

And now there are 3 letter objects:

 
 

Step 8 - Turn on Object Picking

Next, we will allow the user to pick any of these 3 objects using the mouse pointer. To do that, we use the “turn on picking” block. We can keep the input box blank, so all objects in the current sprite will become pickable.

 
 

Step 9 - Handle the picking event

To take some action whenever an object is picked, we need to use the hat block “when an object from this sprite is picked”.

 
After you add this hat block, when an object is indeed picked, the reporter block “picked object name” will tell us the name of that object. If no object is picked, that block will report an empty value. You can verify it by showing that block’s value:

 
 

Step 10 - Select the Picked Object

Suppose we want to make the picked object jump up. Before that, it is critical that we select the picked object as the sprite object. Otherwise, our action blocks may not be applied to the correct object.

You can select that object using its name, which is given by the “picked object name” block. Note that in the object list below the stage, the sprite object name is now changing as you click different objects:

 
 

Step 11 - Make Letter “B” Jump

Suppose we want the letter “B” to jump when it is picked. We can check the “picked object name” to verify the picked object is indeed the letter “B”. Then we can make the letter jump up by setting its “Rising Speed”, then make it fall quickly with a large “Gravity”:

 
Now only the letter “B” will jump when it is clicked:

 
 

Step 12 - Make Letter “A” Wiggle

Similarly, when the letter “A” is clicked, let’s make it wiggle a bit. This can be achieved by rotating it around the “Y-axis”:

 
The result looks like this:

 
 

Step 13 - Make Letter “C” Inflate

Lastly, for the letter “C”, let’s make it inflate bigger and then shrink back. You can use the “update scale” block for that:

 
Here is the final result:

 
 

Creative Ideas

Here are some ideas for you to further extend this project:

• Other Objects: you can use the picking event on any type of object. It is one of the most common ways of user interaction in 3D applications.
• Other Animation Effects: you can learn to change an object’s color/texture/glow/animation when it is picked.