Interface ISceneNode

interface ISceneNode {
    add: ((child) => void);
    alpha: number;
    children: INode[];
    clipping: boolean;
    color: number;
    colorBl: number;
    colorBottom: number;
    colorBr: number;
    colorLeft: number;
    colorRight: number;
    colorTl: number;
    colorTop: number;
    colorTr: number;
    destroy: (() => void);
    find: ((key) => null | ISceneNode);
    get: (() => null | INode);
    height: number;
    id: number;
    mount: number;
    mountX: number;
    mountY: number;
    parent: null | INode;
    pivot: number;
    pivotX: number;
    pivotY: number;
    remove: ((child) => void);
    rotation: number;
    scale: null | number;
    scaleX: number;
    scaleY: number;
    shader: null | ShaderRef;
    src: string;
    texture: null | TextureRef;
    width: number;
    x: number;
    y: number;
    zIndex: number;
    zIndexLocked: number;
    animate(props, settings): IAnimationController;
    emit<K>(event, data): void;
    flush(): void;
    off<K>(event, listener): void;
    on<K>(event, listener): void;
    once<K>(event, listener): void;
}

Hierarchy

  • INode
    • ISceneNode

Properties

add: ((child) => void)

Type declaration

    • (child): void
    • Adds a new child node to the scene

      Parameters

      Returns void

alpha: number

The alpha opacity of the Node.

Remarks

The alpha value is a number between 0 and 1, where 0 is fully transparent and 1 is fully opaque.

Default

1

children: INode[]
clipping: boolean

Clipping Mode

Remarks

Enable Clipping Mode when you want to prevent the drawing of a Node and its descendants from overflowing outside of the Node's x/y/width/height bounds.

For WebGL, clipping is implemented using the high-performance WebGL operation scissor. As a consequence, clipping does not work for non-rectangular areas. So, if the element is rotated (by itself or by any of its ancestors), clipping will not work as intended.

TODO: Add support for non-rectangular clipping either automatically or via Render-To-Texture.

Default

false

color: number

The color of the Node.

Remarks

The color value is a number in the format 0xRRGGBBAA, where RR is the red component, GG is the green component, BB is the blue component, and AA is the alpha component.

Gradient colors may be set by setting the different color sub-properties: colorTop, colorBottom, colorLeft, colorRight, colorTl, colorTr, colorBr, colorBl accordingly.

Default

0xffffffff (opaque white)

colorBl: number

The color of the bottom-left corner of the Node for gradient rendering.

Remarks

See color for more information about color values and gradient rendering.

colorBottom: number

The color of the bottom edge of the Node for gradient rendering.

Remarks

See color for more information about color values and gradient rendering.

colorBr: number

The color of the bottom-right corner of the Node for gradient rendering.

Remarks

See color for more information about color values and gradient rendering.

colorLeft: number

The color of the left edge of the Node for gradient rendering.

Remarks

See color for more information about color values and gradient rendering.

colorRight: number

The color of the right edge of the Node for gradient rendering.

Remarks

See color for more information about color values and gradient rendering.

colorTl: number

The color of the top-left corner of the Node for gradient rendering.

Remarks

See color for more information about color values and gradient rendering.

colorTop: number

The color of the top edge of the Node for gradient rendering.

Remarks

See color for more information about color values and gradient rendering.

colorTr: number

The color of the top-right corner of the Node for gradient rendering.

Remarks

See color for more information about color values and gradient rendering.

destroy: (() => void)

Type declaration

    • (): void
    • Destroys the node and all its children

      Returns void

find: ((key) => null | ISceneNode)

Type declaration

    • (key): null | ISceneNode
    • Find a node by key

      Parameters

      • key: string

        string key

      Returns null | ISceneNode

      ISceneNode or null

get: (() => null | INode)

Type declaration

    • (): null | INode
    • Gets the internal Lightning 3 node. Note: This should not be needed in most cases.

      Returns null | INode

      INode or null

height: number

The height of the Node.

Default

0

id: number
mount: number

Combined position of the Node's Mount Point

Remarks

The value can be any number between 0.0 and 1.0:

  • 0.0 defines the Mount Point at the top-left corner of the Node.
  • 0.5 defines it at the center of the Node.
  • 1.0 defines it at the bottom-right corner of the node.

Use the mountX and mountY props seperately for more control of the Mount Point.

When assigned, the same value is also passed to both the mountX and mountY props.

Default

0 (top-left)
mountX: number

X position of the Node's Mount Point

Remarks

The value can be any number between 0.0 and 1.0:

  • 0.0 defines the Mount Point's X position as the left-most edge of the Node
  • 0.5 defines it as the horizontal center of the Node
  • 1.0 defines it as the right-most edge of the Node.

The combination of mountX and mountY define the Mount Point

Default

0 (left-most edge)
mountY: number

Y position of the Node's Mount Point

Remarks

The value can be any number between 0.0 and 1.0:

  • 0.0 defines the Mount Point's Y position as the top-most edge of the Node
  • 0.5 defines it as the vertical center of the Node
  • 1.0 defines it as the bottom-most edge of the Node.

The combination of mountX and mountY define the Mount Point

Default

0 (top-most edge)
parent: null | INode

The Node's parent Node.

Remarks

The value null indicates that the Node has no parent. This may either be because the Node is the root Node of the scene graph, or because the Node has been removed from the scene graph.

In order to make sure that a Node can be rendered on the screen, it must be added to the scene graph by setting it's parent property to a Node that is already in the scene graph such as the root Node.

Default

null

pivot: number

Combined position of the Node's Pivot Point

Remarks

The value can be any number between 0.0 and 1.0:

  • 0.0 defines the Pivot Point at the top-left corner of the Node.
  • 0.5 defines it at the center of the Node.
  • 1.0 defines it at the bottom-right corner of the node.

Use the pivotX and pivotY props seperately for more control of the Pivot Point.

When assigned, the same value is also passed to both the pivotX and pivotY props.

Default

0.5 (center)
pivotX: number

X position of the Node's Pivot Point

Remarks

The value can be any number between 0.0 and 1.0:

  • 0.0 defines the Pivot Point's X position as the left-most edge of the Node
  • 0.5 defines it as the horizontal center of the Node
  • 1.0 defines it as the right-most edge of the Node.

The combination of pivotX and pivotY define the Pivot Point

Default

0.5 (centered on x-axis)
pivotY: number

Y position of the Node's Pivot Point

Remarks

The value can be any number between 0.0 and 1.0:

  • 0.0 defines the Pivot Point's Y position as the top-most edge of the Node
  • 0.5 defines it as the vertical center of the Node
  • 1.0 defines it as the bottom-most edge of the Node.

The combination of pivotX and pivotY define the Pivot Point

Default

0.5 (centered on y-axis)
remove: ((child) => void)

Type declaration

    • (child): void
    • Removes a child node from the tree, this will unmount the node and destroy it.

      Parameters

      Returns void

rotation: number

Rotation of the Node (in Radians)

Remarks

Sets the amount to rotate the Node by around it's Pivot Point (defined by the pivot props). Positive values rotate the Node clockwise, while negative values rotate it counter-clockwise.

Example values:

  • -Math.PI / 2: 90 degree rotation counter-clockwise
  • 0: No rotation
  • Math.PI / 2: 90 degree rotation clockwise
  • Math.PI: 180 degree rotation clockwise
  • 3 * Math.PI / 2: 270 degree rotation clockwise
  • 2 * Math.PI: 360 rotation clockwise
scale: null | number

Scale to render the Node at

Remarks

The scale value multiplies the provided width and height of the Node around the Node's Pivot Point (defined by the pivot props).

Behind the scenes, setting this property sets both the scaleX and scaleY props to the same value.

NOTE: When the scaleX and scaleY props are explicitly set to different values, this property returns null. Setting null on this property will have no effect.

Default

1.0
scaleX: number

Scale to render the Node at (X-Axis)

Remarks

The scaleX value multiplies the provided width of the Node around the Node's Pivot Point (defined by the pivot props).

Default

1.0
scaleY: number

Scale to render the Node at (Y-Axis)

Remarks

The scaleY value multiplies the provided height of the Node around the Node's Pivot Point (defined by the pivot props).

Default

1.0
shader: null | ShaderRef

The Node's shader

Remarks

The shader defines a Shader used to draw the Node. By default, the Default Shader is used which simply draws the defined texture or color(s) within the Node without any special effects.

To create a Shader in order to set it on this property, call RendererMain.createShader.

Note: If this is a Text Node, the Shader will be managed by the Node's TextRenderer and should not be set explicitly.

src: string

Image URL

Remarks

When set, the Node's texture is automatically set to an ImageTexture using the source image URL provided (with all other settings being defaults)

texture: null | TextureRef

The Node's Texture.

Remarks

The texture defines a rasterized image that is contained within the width and height dimensions of the Node. If null, the Node will use an opaque white ColorTexture when being drawn, which essentially enables colors (including gradients) to be drawn.

If set, by default, the texture will be drawn, as is, stretched to the dimensions of the Node. This behavior can be modified by setting the TBD and TBD properties.

To create a Texture in order to set it on this property, call RendererMain.createTexture.

If the src is set on a Node, the Node will use the ImageTexture by default and the Node will simply load the image at the specified URL.

Note: If this is a Text Node, the Texture will be managed by the Node's TextRenderer and should not be set explicitly.

width: number

The width of the Node.

Default

0

x: number

The x coordinate of the Node's Mount Point.

Remarks

See mountX and mountY for more information about setting the Mount Point.

Default

0

y: number

The y coordinate of the Node's Mount Point.

Remarks

See mountX and mountY for more information about setting the Mount Point.

Default

0

zIndex: number

The Node's z-index.

Remarks

TBD

zIndexLocked: number

Methods

  • Parameters

    • props: Partial<INodeAnimatableProps>
    • settings: Partial<AnimationSettings>

    Returns IAnimationController

  • Type Parameters

    • K extends string | number

    Parameters

    • event: Extract<K, string>
    • data: unknown

    Returns void

  • Returns void

  • Type Parameters

    • K extends string | number

    Parameters

    • event: Extract<K, string>
    • listener: INodeEvents[K]

    Returns void

  • Type Parameters

    • K extends string | number

    Parameters

    • event: Extract<K, string>
    • listener: INodeEvents[K]

    Returns void

  • Type Parameters

    • K extends string | number

    Parameters

    • event: Extract<K, string>
    • listener: INodeEvents[K]

    Returns void

Generated using TypeDoc