Controlling the camera

The scripting API provides two primary camera modes: first-person and third-person. These modes determine the player's viewpoint and are critical in defining the overall gameplay experience.

Using third-person camera mode

The third-person mode places the camera behind and slightly above the target object (typically the player), providing a broader view of the surroundings. In this, the camera uses the mouse movements to rotate around a target.

To set the camera mode to third-person, you use the Camera.mode property. This can be done as follows:

import { Camera, Player } from "@oo/scripting";
 
export default class GameManager {
 
    onReady() {
 
        Camera.mode = "thirdperson";
 
        Camera.target = Player.avatar
 
    }
}

In addition to setting mode. We also provide a target, this is the object that the camera will follow from a certain distance.

You can also change the position that the camera maintains vs the target object by setting the maxZoomOut and heightOffset property.

The following example places the camera a little farther behind the player by setting maxZoomOut. And moves the default vertical position of the camera a little higher.

import { Camera } from "@oo/scripting";
 
 
//...
Camera.maxZoomOut = 10
 
Camera.heightOffset = 2

Another setting you can change is the pointer lock behavior in desktop devices. By default, when the user clicks on the scene, the camera will enter the pointerlock mode. In tnis mode, the mouse cursor is hidden and you can control the camera by just moving the mouse (without having to hold mouse buttons down).

To disable pointerlock mode, you can set the Camera.usePointerLock to false

import { Camera } from "@oo/scripting";
 
//...
Camera.usePointerLock = false

When pointerlock mode is disabled, the user needs to hold down the left mouse button while moving the mouse to rotate the camera.

Note: usePointerLock has effect only on desktop devices.

Using first-person camera mode

In a first-person mode, the camera is positioned to mimic the player’s viewpoint, offering a direct and immersive experience. In this, the camera uses the same mouse movements, but the rotation is applied to the camera itself, not to its orbit around the player.

Setting the first-person mode involves the same code as in third-person, we just use "firstperson" instead.

import { Camera, Player } from "@oo/scripting";
 
export default class GameManager {
 
    onReady() {
 
        Camera.mode = "firstperson";
 
        Camera.target = Player.avatar
 
    }
}

The target in this mode is used to determine the head position where the camera will be placed.

There's nothing else to this mode. The behavior of pointerlock is the same as outlined in the third-mode section.