Camera

The Camera in a game is the main tool used to capture Scenes. The visible range of the Camera is controlled by adjusting camera-related parameters. The Camera is represented as follows in the Cocos Creator editor:

camera

The Camera‘s visual range is composed of 6 planes forming a Frustum, a Near Plane, and a Far Plane to control the visible distance and range of near and far distance, at the same time, they also constitute the size of the viewport.

camera view

To use Camera, please refer to the Camera API.

Camera component

The Camera Component is an important functional component that we use to present a Scene.

camera component

PropertyDescription
PriorityRender priority of the camera. High-priority Camera‘s will be rendered first in the rendering process
VisibilityThe Visibility of the Camera. Used to control the Visibility of different models in the same Camera.
ClearFlagsClearing flags of the Camera, spaces which part of the framebuffer will be actually clearedevery frame. Contains:
DONT_CLEAR: not clear.
DEPTH_ONLY: only clear the depth.
SLOD_COLOR: clear the color, depth and template buffer.
SKYBOX: enable skybox to clear depth only.
ClearColorClear the specified color
ClearDepthClear the specified depth
ClearStencilClear the specified template buffer
ProjectionProjection mode. Divided into perspective projection (PERSPECTIVE) and orthogonal projection (ORTHO)
FovAxisThe axis on which the FOV would be fixed regardless of screen aspect changes
FovField of view of the camera
OrthoHeightViewport height in orthogonal mode
NearThe near clipping distance of the camera, should be as large as possible within acceptable range
FarThe far clipping distance of the camera, should be as small as possible within acceptable range
ApertureThe camera aperture, which affects the exposure parameters of the camera
ShutterThe camera shutter, which affects the exposure parameters of the camera
IsoThe camera ISO, which affects the exposure parameters of the camera
RectThe position and size of the viewport that the camera will eventually render to the screen
TargetTextureOutput render target texture of the camera, which renders directly to the screen. Defaults to null

Camera group rendering

The Camera‘s group rendering function is determined by the Visibility property and the Layer property of the node. The user can set the Visibility value through code to complete the group rendering. It should be noted that the Visibility value is bitwise comparison, and the user can manipulate the top 20 bits of Visibility through bit operations to complete the grouping.

The Camera and models provided by default are all rendered without grouping. You do not need to change this value if the game has no special requirements to do so.

Set the Visibility property

The Visibility property is used to set which layers of nodes should be observed by the camera, and multiple Layers can be selected at the same time.

Note: the rendering of 2d elements (such as Sprite) also follows the Layer and Visibility judgement, adjust the Layer and Visibility as required.

When you check multiple Layers in the Visibility property, the value of the Visibility property is calculated by performing a | operation on the property values of multiple Layers.

For example, in the following image, the Visibility property of the camera has both UI_3D and DEFAULT Layer checked, and by looking up the value of the Layer property, notice the value of the UI_3D property is 1 << 23 , the value of the DEFAULT property is 1 << 30, and the value of the Visibility property is 1 << 23 | 1 << 30 = 1820327937.

camera visibility gizmo

For additional information on the implementation of Layer, please refer to the Layer documentation.

Visibility calculations for the camera

The Visibility property allows multiple Layers to be selected at the same time, while the Layer on the Node has its own value, so the Visibility property of the camera is an 232 bit integer. Each visible Layer occupies one bit, using bitwise operations, and supports up to 32 different Layer labels (one bit for each Layer value, that is, represented by 232). When the camera is culling, the Layer’s property value of each node will perform a & operation with the camera, and if the Visibility property of the camera contains this Layer, then the current node will be visible to the camera, and vice versa.