UICanvas

Enumerations

RenderMode

Rendering space for UI canvas elements.

Values:

  • ScreenSpaceOverlay = 0 - Render canvas as overlay on top of the whole screen

  • ScreenSpaceCamera = 1 - Render ui elements into the viewport of the camera set in UICanvas.camera; without a camera the canvas behaves like ScreenSpaceOverlay

  • WorldSpace = 2 - Render ui elements in world space, in every camera selected by UICanvas.visibility; input picks the topmost of those cameras under the mouse

ScreenMode

Define the mode used to scale the canvas when its target area changes. The target area is defined by the canvas render mode: see RenderMode.

Values:

  • Custom = 0 - Canvas size and scale completely controlled by the user.

  • Fit = 1 - Scale canvas to fit the target area and keep aspect ratio.

  • FitExtend = 2 - Scale canvas to fit the smallest target area dimension and another dimension is extended to fill the area. Don’t keep aspect ratio. Default mode.

  • Fullscreen = 3 - Canvas size is set to the target area size. Don’t scale canvas and don’t keep aspect ratio.

Classes

UICanvas : NativeComponent

Note

UIFrame component is automatically added to the node if it is not already present

This component is used to enable rendering of UI children.

Example:

let canvas = create_node(NodeData())
add_component(canvas, new UICanvas())

let textNode = create_node(NodeData(
    parent = canvas,
    position = float3(0.0, 0.0, 0.0)
))
add_component(textNode, new UIText(
    text = "Hello, World!",
    fontSize = 48.0
))

let imageNode = create_node(NodeData(
    parent = canvas,
    position = float3(0.0, 200.0, 0.0)
))
add_component(imageNode, new UIImage(
    textureId = request_texture("image.png"),
    size = float2(300., 300.)
))

// Need any camera for UI to be seen
add_component(create_node(NodeData()), new Camera())

Fields used per render mode:

  • ScreenSpaceOverlay: screenMode, referenceSize; camera and visibility are ignored

  • ScreenSpaceCamera: camera (the owner; null falls back to overlay behavior), screenMode, referenceSize

  • WorldSpace: visibility (which cameras render and click it); camera is ignored

Properties:

UICanvas.renderMode: RenderMode
UICanvas.renderMode =(value: RenderMode)

The render mode of the canvas. Default is ScreenSpaceOverlay

Arguments:
UICanvas.visibility: MeshVisibility
UICanvas.visibility =(value: MeshVisibility)

Cameras a WorldSpace canvas is rendered to and receives input from; other render modes ignore the field. Only the CameraN bits drive input; the EditorCamera bit affects editor-view rendering only. Default is MeshVisibility.FullVisibility.

Arguments:
UICanvas.camera: NodeId
UICanvas.camera =(value: NodeId)

The camera that owns a ScreenSpaceCamera canvas: its viewport defines the layout, render and input area. With the default null node (or an unusable camera) the canvas behaves like ScreenSpaceOverlay. Other render modes ignore the field.

Arguments:
UICanvas.localPosition2D: float2
UICanvas.localPosition2D =(value: float2)

Local position of the canvas. Default is (0, 0).

Arguments:

  • value : float2

UICanvas.size: float2
UICanvas.size =(value: float2)

Size of the image. This field can only be accessed in code. The same effect can be achieved by changing UIFrame.size property.

To change the value in editor use UIFrame.size of the node.

Arguments:

  • value : float2

UICanvas.pivot: float2
UICanvas.pivot =(value: float2)

Node’s origin relative to it’s content. Left-top of the content is (0,0), right-bottom is (1,1). Default is (0.5, 0.5).

Arguments:

  • value : float2

UICanvas.screenMode: ScreenMode
UICanvas.screenMode =(value: ScreenMode)

How the canvas is scaled when the screen size changes. ScreenSpaceOverlay canvases scale against the screen, ScreenSpaceCamera canvases against their camera’s viewport; WorldSpace ignores the field.

Arguments:
UICanvas.referenceSize: float2
UICanvas.referenceSize =(value: float2)

Reference size the Fit and FitExtend screen modes scale against; other modes ignore it. Default (0,0) captures the canvas frame size when the scaling first needs it.

Arguments:

  • value : float2