AR - Planting Trees (Difficulty: 2)

CreatiCode

Key Topics Covered

Introduction

In this tutorial, you will build an AR game. The player can click anywhere on the ground/floor to plant a tree.

Note that for the first 10 steps, you can use any computer to build the project. But for the last 2 steps, you will need to run the project in the browser of a mobile device with a back camera, such as a touchpad or a smartphone.

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. Please rename this sprite to “ground”, since it will contain the ground object.

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 a huge plane

In the “ground” sprite, let’s add a huge plane, with a size of 1000000 in each direction. Its color is not important, as we will make it transparent in a later step.

This is what you’ll get:

Step 3 - Turn on Pointer Picking

Next, we will turn on pointer picking, so that the player can pick anywhere on the plane.

Note that for the last input of the new block, we are leaving it empty, so any object in the current sprite will become pickable, including the plane we have added in step 2. You can also write “ground” here, which will give us the same result.

Step 4 - Store the Picked Positions

Now let’s handle the picking event. As the first step, let’s add 2 new variables “target x” and “target y”. They will be used to store the x and y positions of the newly picked point:

If you turn on the monitors of these 2 variables, you will see their values are changing whenever you click on the ground:

Step 5 - Add a new sprite named “trees”

To add new trees into the 3D world, we will first need to add another sprite named “trees”. This is a critical step. If we add new trees in the current “ground” sprite, then those trees will become pickable as well, which will be confusing to the player.

In general, for such world-tracking AR projects, the ground plane is very important. We only want to make the ground plane to be pickable, so we will add all other 3D objects in other sprites.

Now we have 2 sprites: “ground” and “trees”.

Step 6 - Send and Receive the “New Point” Message

We will use messages to communicate between these 2 sprites.

In the “ground” sprite, we broadcast a new message “new point” every time the player picks a new point on the ground:

In the “trees” sprite, we will receive this message so we can add trees later:

Step 7 - Add a Tree Model When Message Received

In the “trees” sprite, let’s add a new tree whenever the “new point” message is received. By default the new tree is always added at the center of the scene, so we also need to move it to the point that’s picked by the player. That point’s positions are stored in the “target x” and “target y” variables.

Now you will plant a new tree every time you click on the ground:

Step 8 - Hide and Show

There is a minor issue with our solution. The new tree would always show up at the origin point, then move to the picked point. Here is a slow-motion view:

To make the tree appear at the picked point directly, we can use a simple technique:

When we add the tree model, we will set it to be hidden
After moving the tree to the target point, we change it to visible using the “show” block

After this change, the tree will show up wherever we click:

Step 9 - Make the Tree Grow

To make it more fun, let’s add an animation that makes the tree grow up. This can be done with 2 changes:

When we add the new tree, we can make it very small, with a target height of 20.
After the tree becomes visible, we scale it up by 10 times within a very short time.

Now we get an animation of the tree growing up:

Step 10 - Switch to the AR world tracking emulation

So far we have not done anything related to AR yet. It’s finally time to switch to AR mode. Back in the “ground” sprite, please add the “switch to AR world camera” block. We will start with the emulation mode, and check if everything works fine.

This is what we get. The camera view is a bit different, but the picking event is working the same way:

Step 11 - Connect to the Real Camera

Now we are ready to connect to the real camera. You will need to open this project on a mobile device, such as a touchpad or smartphone.

You will just need to change the emulation mode to “No” to turn on the real camera. In addition, let’s set the ground’s color to be 50% transparent, so you can see through it.

When you run the project on the mobile device, the images from the back camera will replace the blue background of the scene, and you can still click on the ground to plant trees:

Step 12 - Clean Up

The ground and the 3D axis are helpful in building the project, but they are clearly destroying the illustration of adding objects to the real scene. Before releasing the project, we need to set the ground plane to be 100% transparent. Note that the picking event will still work on the transparent ground, although we can not see it anymore. Also, let’s set the 3D axis to hidden as well.

And here is the final result:

Creative Ideas

There are many fun projects you can create using the same techniques. Here are some ideas you might want to explore:

Other Object Types: you can add any other types of objects, like shapes, models and avatars. You can also use buttons or dropdowns to allow the player to choose which type of object to add.
Randomize it: Each time a new object is added, you can set its size or color randomly