RectShape2D

The RectShape2D node displays a shape that can be selected from predefined samples or defined arbitrarily, and an image or a gallery showreel of multiple images. The shape and images can be displayed together, in which case the image is displayed on the top of the shape.

RectShape2D facilitates the design of 2D interfaces by providing configuration parameters that allow you to easily manage how the graphic scales and aligns when the RectShape2D size or aspect ratio does not match the graphic size or aspect ratio.

Platform support

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

Adaptive size support

RectShape2D provides functionalities to manage how the displayed image behaves when the node rect has a different size and aspect ratio from the displayed image. The behavior is configured independently through these parameters.

Wrap mode

The imageWrapMode and shapeWrapMode fields define how the graphic is wrapped in the node rect.

stretch

The simplest behavior is achieved with the style stretch. This behaves exactly as a Rect2D node and stretches the graphic so that is covers the entire rect area.

fit

The fit behavior makes the graphic keep its original aspect ratio and keeps the whole graphic inside the node rect by possibly displaying a padding on the top, bottom, left, or right corners—depending on the container aspect ratio and selected imageWrapAlignment.

fill

The fill behavior makes the graphic keep its original aspect ratio and fills all the available space in the node rect by possibly cropping the graphic on the top, bottom, left, or right corners—depending on the container aspect ratio and selected imageWrapAlignment. The logic is to fill either the width or height of the node rect (whichever is smaller) and crop the graphic on the other measure.

fill_width

The fill_width behavior makes the graphic keep its original aspect ratio and fills all the available width in the node rect by possibly cropping the graphic or displaying a padding on the top or bottom—depending on the container aspect ratio and selected imageWrapAlignment. The logic is to fill the width of the node rect and crop or pad the graphic on the height.

fill_height

The fill_height behavior makes the graphic keep its original aspect ratio and fills all the available height in the node rect by possibly cropping the graphic or displaying a padding on the top or bottom—depending on the container aspect ratio and selected imageWrapAlignment. The logic is to fill the height of the node rect and crop or pad the graphic on the width.

original_size

The original_size behavior makes the graphic keep its original aspect ratio regardless of the size and aspect ratio of the container. Padding and cropping of the image may occur in both width and height when the node rect size is different from the graphic size depending on the selected imageWrapAlignment.

Wrap Alignment

The imageWrapAlignment field defines how to align the graphic inside the node rect when a wrap mode (different from stretch) is applied.

The most effective way to test this parameter’s effect is to render an image in a bigger container and select original_size as imageWrapMode. This way, a small image will display inside a bigger node rect and the effect of selecting an alignment is clearly different between different options. By selecting an imageWrapMode such as fill_width, the options in the imageWrapAlignment field left, center, and right will have the same result due to the image already filling all the horizontal space and so would each top_left, top_right and bottom_left, bottom_right respectively.

center

The center behavior aligns the graphic at the center of the rect node.

top

The top behavior aligns the graphic at the center of the rect node and keeps it horizontally centered.

bottom

The top behavior aligns the graphic at the bottom of the rect node and keeps it horizontally centered.

left

The left behavior aligns the graphic at the left of the rect node and keeps it vertically centered.

right

The right behavior aligns the graphic at the right of the rect node and keeps it vertically centered.

top_left

The top_left behavior aligns the graphic at the top-left corner of the rect node.

top_right

The top_right behavior aligns the graphic at the top-right corner of the rect node.

bottom_left

The bottom_left behavior aligns the graphic at the bottom-left corner of the rect node.

bottom_right

The bottom_right behavior aligns the graphic at the bottom-right corner of the rect node.

Image functionalities

RectShape2D can display a single image, a list of images, or an animated gif.

Gallery showreel functionalities

When the images field is provided by a list of images, you can set up an automatic image loop.

Playing an animated gif

For RectShape2D to display an animated GIF, the images field must contain only the .gif file. This feature is supported only on the XR-Win platform and not on the portable platforms.

Shape functionalities

The RectShape2D node can draw a shape that can have a border. The shape can be picked from three predefined shapes: rectangle, rounded_rectangle, and circle, or arbitrarily defined.

isOverGraphics

RectShape2D provides the isOverGraphics field that gives control of the over state of the pointer with a pixel-perfect check. This field is true if the pixel of the RectShape2D graphic underlying the pointer position is colored with an alpha > 0, false otherwise.

renderToTexture2D

RectShape2D supports the rendering to a Texture2D.

Code example

This is a code example for the RectShape2D node. It creates a node with an image overlayed to a rounded_rectangle shape.

<RectShape2D name="RectShape2D_ImgAndShape"

templateInfo="RectShape2D|RectShape2D_ImgAndShape"

position="100 100"

size="600 400"

images="Sample_image.png"

imageWrapMode="original_size"

imageWrapAlignment="center"

shapeColor="0.329411774873734 0.552941203117371 0.831372559070587 1"

shapeBorderThicknes="6"

shapeBorderColor="0.752941191196442 0.313725501298904 0.301960796117783 1"

shapeRoundRectCorner="50" />

Image color filter modes

The following options define the strategy to use when applying a color filter to an image:

• none—The selected color is not applied to the images.

• screen—The selected color is added to the image. This makes the image brighter and has more effect on dark colors. Black color is colored, light colors will tend to white, and white color stays white (since it is already the lightest color possible). This mode is suited to color black or dark glyphs by a selected color.

• multiply—The image colors are multiplied by the selected color. This makes the images darker and has more effect on light colors. White color is colored, dark colors will tend to black, and black color stays black (since it is already the darkest color possible). This mode is suited to color white or light glyphs by a selected color.

• overlay—Applies both screen and multiply strategies to the image by the selected color. This keeps the image brightness almost the same, has a balanced influence on light and dark colors, and allows to color both black and white.

• invert—Inverts the color of the displayed image. The selected color is not used in this mode.

  

RectShape2D fields

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

Field inheritance: NodeBase > RectBase2D > RectShape2D