Prerequisite

• The Follow Camera

Introduction

Many 3D games and demos let the user take a “first person view”, as if the user himself is walking inside the virtual world. The user can use the mouse to turn around and look at different parts of the world. You can easily create such an experience in CreatiCode.

Using the Follow Camera in A New Way

To create a “first person view”, you can actually reuse the follow camera, but in a different way.

Recall that to use the follow camera, you need to have a target object first, then you add the follow camera to follow that target. Here is a typical example:

 
When you run this program, you can turn the camera to look at the avatar from different angles, so the user feels like he or she is not the avatar, but watching from behind the avatar.

 
To look through the eyes of the avatar, we can simply move the camera to the position of the eyes of the avatar. To do that, we need to change the distance to 0 between the camera and the avatar. Also, if the avatar’s height is 100, we can assume the eyes are about 86 units from the ground, so we set the “z-offset” to 86 to make the camera stay at eye level.

 
Now if we run the project, our camera is indeed inside the avatar’s brain and looking behind the avatar’s eyes:

 
Of course, the avatar’s head is blocking our camera, so we can’t see anything else. To fix that, we just need to hide the avatar itself:

 
Now we get a perfect first person view. As we turn the camera around with the mouse pointer, we are no longer looking at the avatar, but at the scene around us instead.

Use a Transformer Instead of An Object

Instead of an object like an avatar or a car, you can also choose to use a transformer object. This is handy when your project will stay in the first person view all the time.

Since a transformer object is not visible, you don’t need to hide it anymore, and it will load much faster than an avatar. However, you do need to move it to the correct height in the Z direction.

 
You will get the same first-person view as the previous method.

Lock the Mouse Pointer to the Camera

In the program above, to turn the camera around, we have to press the mouse button and drag the pointer on the stage. However, sometimes we want to allow the user to use the mouse buttons for other types of interactions, such as picking or shooting.

Therefore, we can “lock the mouse pointer”, so that the camera will turn as the user moves the mouse pointer without pressing down any mouse buttons.

You can use the following block to lock or unlock the mouse pointer. Select “Yes” to lock and “No” to unlock.

 
For example, let’s add it to the program from above:

 
Now if you click the green flag button, the mouse will become locked: the pointer will be hidden, and the camera will turn as you move the mouse. Note that you can press the “ESC” key on the top left of the keyboard to unlock the pointer manually, and click anywhere on the stage to lock it again.

Use a “Start” Button to Trigger the Lock

It is often better to use a button to trigger the pointer lock. It will give the user an option to choose when to enter the locked mode, and also the pointer will be in the center of the stage when it enters the locked mode.

Here is an example program. When the “Start” button is clicked, we first hide that button, then lock the pointer:

 
Now the mouse will only become locked after you click “Start”: