Protected_Autosize properties
Readonlychildrenonly used when rtt = true
OptionalglobalReadonlyisOptionallocalProtectedonOptionalpreloadReadonlypropsOptionalrenderOptionalrenderOptionalsceneOptionalsceneReadonlystageOptionalstrictOptionaltextureAutosize
When enabled, the Node automatically resizes based on its content
Texture Autosize Mode:
Children Autosize Mode:
Mode Selection Logic:
Performance:
Autosize
When enabled, the Node automatically resizes based on its content
Texture Autosize Mode:
Children Autosize Mode:
Mode Selection Logic:
Performance:
Clipping Mode
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.
Clipping Mode
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.
The color of the Node.
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.
The color of the Node.
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.
The color of the bottom-left corner of the Node for gradient rendering.
See color for more information about color values and gradient rendering.
The color of the bottom-left corner of the Node for gradient rendering.
See color for more information about color values and gradient rendering.
The color of the bottom edge of the Node for gradient rendering.
See color for more information about color values and gradient rendering.
The color of the bottom edge of the Node for gradient rendering.
See color for more information about color values and gradient rendering.
The color of the bottom-right corner of the Node for gradient rendering.
See color for more information about color values and gradient rendering.
The color of the bottom-right corner of the Node for gradient rendering.
See color for more information about color values and gradient rendering.
The color of the left edge of the Node for gradient rendering.
See color for more information about color values and gradient rendering.
The color of the left edge of the Node for gradient rendering.
See color for more information about color values and gradient rendering.
The color of the right edge of the Node for gradient rendering.
See color for more information about color values and gradient rendering.
The color of the right edge of the Node for gradient rendering.
See color for more information about color values and gradient rendering.
The color of the top-left corner of the Node for gradient rendering.
See color for more information about color values and gradient rendering.
The color of the top-left corner of the Node for gradient rendering.
See color for more information about color values and gradient rendering.
The color of the top edge of the Node for gradient rendering.
See color for more information about color values and gradient rendering.
The color of the top edge of the Node for gradient rendering.
See color for more information about color values and gradient rendering.
The color of the top-right corner of the Node for gradient rendering.
See color for more information about color values and gradient rendering.
The color of the top-right corner of the Node for gradient rendering.
See color for more information about color values and gradient rendering.
contain mode for text
This property sets how the text should be contained within its bounding box.
contain mode for text
This property sets how the text should be contained within its bounding box.
Node data element for custom data storage (optional)
This property is used to store custom data on the Node as a key/value data store. Data values are limited to string, numbers, booleans. Strings will be truncated to a 2048 character limit for performance reasons.
This is not a data storage mechanism for large amounts of data please use a dedicated data storage mechanism for that.
The custom data will be reflected in the inspector as part of data-* attributes
Node data element for custom data storage (optional)
This property is used to store custom data on the Node as a key/value data store. Data values are limited to string, numbers, booleans. Strings will be truncated to a 2048 character limit for performance reasons.
This is not a data storage mechanism for large amounts of data please use a dedicated data storage mechanism for that.
The custom data will be reflected in the inspector as part of data-* attributes
Font Family
Font Family
Font Size
The font size to use when looking up the font face.
The font size is specified in pixels and is the height of the font's em-square. The em-square is essentially the height of the capital letters for the font. The actual height of the text can be larger than the specified font size, as the font may have ascenders and descenders that extend beyond the em-square.
Font Size
The font size to use when looking up the font face.
The font size is specified in pixels and is the height of the font's em-square. The em-square is essentially the height of the capital letters for the font. The actual height of the text can be larger than the specified font size, as the font may have ascenders and descenders that extend beyond the em-square.
Image Type to explicitly set the image type that is being loaded
This property must be used with a src that points at an image. In some cases
the extension doesn't provide a reliable representation of the image type. In such
cases set the ImageType explicitly.
regular is used for normal images such as png, jpg, etc
compressed is used for ETC1/ETC2 compressed images with a PVR or KTX container
svg is used for scalable vector graphics
Image Type to explicitly set the image type that is being loaded
This property must be used with a src that points at an image. In some cases
the extension doesn't provide a reliable representation of the image type. In such
cases set the ImageType explicitly.
regular is used for normal images such as png, jpg, etc
compressed is used for ETC1/ETC2 compressed images with a PVR or KTX container
svg is used for scalable vector graphics
Combined position of the Node's Mount Point
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.
Combined position of the Node's Mount Point
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.
X position of the Node's Mount Point
Y position of the Node's Mount Point
The Node's parent Node.
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.
The Node's parent Node.
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.
Returns the framebuffer dimensions of the RTT parent
Returns the parent render texture node if it exists.
Combined position of the Node's Pivot Point
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.
Combined position of the Node's Pivot Point
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.
X position of the Node's Pivot Point
Y position of the Node's Pivot Point
Rotation of the Node (in Radians)
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-clockwise0: No rotationMath.PI / 2: 90 degree rotation clockwiseMath.PI: 180 degree rotation clockwise3 * Math.PI / 2: 270 degree rotation clockwise2 * Math.PI: 360 rotation clockwiseRotation of the Node (in Radians)
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-clockwise0: No rotationMath.PI / 2: 90 degree rotation clockwiseMath.PI: 180 degree rotation clockwise3 * Math.PI / 2: 270 degree rotation clockwise2 * Math.PI: 360 rotation clockwiseScale to render the Node at
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.
Scale to render the Node at
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.
Scale to render the Node at (X-Axis)
The scaleX value multiplies the provided width of the Node around the Node's Pivot Point (defined by the pivot props).
Scale to render the Node at (X-Axis)
The scaleX value multiplies the provided width of the Node around the Node's Pivot Point (defined by the pivot props).
Scale to render the Node at (Y-Axis)
The scaleY value multiplies the provided height of the Node around the Node's Pivot Point (defined by the pivot props).
Scale to render the Node at (Y-Axis)
The scaleY value multiplies the provided height of the Node around the Node's Pivot Point (defined by the pivot props).
The Node's shader
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.
The Node's shader
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.
Image URL
When set, the Node's texture is automatically set to an ImageTexture using the source image URL provided (with all other settings being defaults)
Image URL
When set, the Node's texture is automatically set to an ImageTexture using the source image URL provided (with all other settings being defaults)
The height of the rectangle from which the Image Texture will be extracted. This value can be negative. If not provided, the image's source natural height will be used.
The height of the rectangle from which the Image Texture will be extracted. This value can be negative. If not provided, the image's source natural height will be used.
She width of the rectangle from which the Image Texture will be extracted. This value can be negative. If not provided, the image's source natural width will be used.
She width of the rectangle from which the Image Texture will be extracted. This value can be negative. If not provided, the image's source natural width will be used.
The x coordinate of the reference point of the rectangle from which the Texture
will be extracted. width and height are provided. And only works when
createImageBitmap is available. Only works when createImageBitmap is supported on the browser.
The x coordinate of the reference point of the rectangle from which the Texture
will be extracted. width and height are provided. And only works when
createImageBitmap is available. Only works when createImageBitmap is supported on the browser.
The y coordinate of the reference point of the rectangle from which the Texture
will be extracted. Only used when source srcWidth width and srcHeight height
are provided. Only works when createImageBitmap is supported on the browser.
The y coordinate of the reference point of the rectangle from which the Texture
will be extracted. Only used when source srcWidth width and srcHeight height
are provided. Only works when createImageBitmap is supported on the browser.
Text alignment
Alignment of the text relative to it's contained bounds. For best results,
use contain mode 'width' or 'both' and a set an explicit
width for the text to be aligned within.
Text alignment
Alignment of the text relative to it's contained bounds. For best results,
use contain mode 'width' or 'both' and a set an explicit
width for the text to be aligned within.
The Node's Texture.
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.
The Node's Texture.
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.
Options to associate with the Node's Texture
Options to associate with the Node's Texture
Word Break for text
This property sets how words should break when reaching the end of a line.
'overflow': Uses the Css/HTML normal word-break behavior, generally not used in app development.'break-all': To prevent overflow, word breaks should happen between any two characters.'break-word': To prevent overflow, word breaks should happen between words. If words are too long word breaks happen between any two characters.Word Break for text
This property sets how words should break when reaching the end of a line.
'overflow': Uses the Css/HTML normal word-break behavior, generally not used in app development.'break-all': To prevent overflow, word breaks should happen between any two characters.'break-word': To prevent overflow, word breaks should happen between words. If words are too long word breaks happen between any two characters.The Node's z-index.
Add a texture to the current RenderOp.
Assigned Texture Index of the texture in the render op
This function calculates the clipping rectangle for a node.
The function then checks if the node is rotated. If the node requires clipping and is not rotated, a new clipping rectangle is created based on the node's global transform and dimensions. If a parent clipping rectangle exists, it is intersected with the node's clipping rectangle (if it exists), or replaces the node's clipping rectangle.
Finally, the node's parentClippingRect and clippingRect properties are updated.
Checks if the node is renderable based on world alpha, dimensions and out of bounds status.
Destroy the node and cleanup all resources
Optionaldata: anyChecks if the node has dimensions (width/height)
Checks if the node is out of the viewport bounds.
ProtectednotifyOptionallistener: (target: any, data: any) => voidOverride renderQuads to handle SDF vs Canvas rendering
Sets the renderable state and triggers changes if necessary.
The new renderable state
Override CoreNode's update method to handle text-specific updates
Override is renderable check for SDF text nodes
Changes the renderable state of the node.
Writable properties of a Node.