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:


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

Property Description
Priority Render priority of the camera. High-priority Camera's will be rendered first in the rendering process
Visibility The Visibility of the Camera. Used to control the Visibility of different models in the same Camera.
ClearFlags Clearing 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.
ClearColor Clear the specified color
ClearDepth Clear the specified depth
ClearStencil Clear the specified template buffer
Projection Projection mode. Divided into perspective projection (PERSPECTIVE) and orthogonal projection (ORTHO)
FovAxis The axis on which the FOV would be fixed regardless of screen aspect changes
Fov Field of view of the camera
OrthoHeight Viewport height in orthogonal mode
Near The near clipping distance of the camera, should be as large as possible within acceptable range
Far The far clipping distance of the camera, should be as small as possible within acceptable range
Aperture The camera aperture, which affects the exposure parameters of the camera
Shutter The camera shutter, which affects the exposure parameters of the camera
Iso The camera ISO, which affects the exposure parameters of the camera
Please refer to Exposure below for more information
Rect The position and size of the viewport that the camera will eventually render to the screen
TargetTexture Output 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 = 1082130432.

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.


Aperture, Shutter, Iso: These three parameters of Camera will determine the amount of incoming light, which in turn affects the exposure value. Only takes effect if the scene has HDR turned on. The algorithm is usually as follows:

ev = log 2 (ApertureValue2 / ShutterValue*k / IsoValue)

ApertureValue, ShutterValue and IsoValue are obtained by looking up the enumeration values of the three attributes Aperture, Shutter, Iso. Where k is a cosntant.

The following images demonstrate the effect of exposure on a scene:



To enable scene HDR, please refer to Skybox - Toggling HDR/LDR mode.

results matching ""

    No results matching ""