Gradient2D

The Gradient2D node introduces advanced rendering capabilities for 2D elements. It enables the definition of gradient settings that can be applied to supported nodes, replacing traditional solid color fills with dynamic, multi-color gradients for advanced visual presentation.

Platform support

This node is fully supported on XR-Windows, XR-Portable Windows, XR-Portable iOS, XR-Portable Android, and XR-P WASM platforms.

Gradient setup

The Gradient2D node supports three distinct gradient types:

• Linear

• Radial

• Circular

Each type offers unique rendering effects, and supports from 2 to up to 16 colors, determined by the gradientStopsCount field.

A unique gradientStop field is created according to the selected gradientStopsCount.

Each gradientStop is defined by a color and a position.

The position is normalized to a 0-1 range, ensuring the relative placement of each color, regardless the node's dimensions. This approach guarantees consistent visual results across different shapes and sizes without requiring manual adjustments.

Linear gradient

Creates a smooth color transition along a straight line. The direction of the gradient is determined by the angle field (0°-360°).

Radial gradient

Produces a gradient that radiates outward from the central point.

The central point is defined by the centerX and centerY fields, normalized to the 0-1 range.

The radius field controls how far the gradient extends from the center. A larger radius creates a software spread.

Circular gradient

Creates a gradient along a circular arc.

The centerX and centerY fields allow to set the gradient's central point, normalized to the 0-1 range.

startAngle and endAngle fields define the arc segment where the gradient applies (for example, a startAngle of 0 and a endAngle of 180 creates a half-circle gradient).

Integration with 2D nodes

The Gradient2D node is supported by:

• Rect2D

• RectShape2D

• Button2D

• ButtonShape2D

• ChargeButton2D

For these nodes, an extra field is available for each color property.

When a Gradient2D node is assigned, it overrides the standard color field, giving priority to the gradient.

Code example

This is a code example for the Gradient2D node.

<Gradient2D name="Gradient2D" templateInfo="Gradient2D|Gradient2D_0" gradientStopsCount="3">

<patch name="Gradient2D" gradientStop0.color="0 1 0 1" gradientStop0.position="0" gradientStop1.color="0 0 1 1" gradientStop1.position="0.5" gradientStop2.color="1 0 0 1" gradientStop2.position="1" />

</Gradient2D>

Gradient2D fields

These are the fields for Gradient2D node. Only the node-specific fields are indicated, not fields obtained by inheritance.

Field inheritance: NodeBase

Variable fields

The variable fields for the Gradient2D node.