User Manual

Element

An Element component when in a hierarchy with a Screen Component ancestor is used to build user interfaces made up of 2D components such as images and text. The Element provides layout properties such as anchors and a pivot point.

See the User Interface section for more details.

Group Element

The group element provides just the layout properties of the Element component

Group Element

Image Element

The image element displays an image using a texture asset or a solid color.

Image Element

Text Element

The text element renders a string of text using a font asset.

Text Element

Common Component Properties

PropertyDescription
TypeThe type of Element: Group, Image or Text
PresetChoosing a layout preset will automatically set the Anchor and Pivot properties to a preset value.
AnchorDetermine where the element calculates its position in relation to. See the Layout section for more information.
PivotDetermin where the pivot point of the Element is. (0,0) is bottom left, (1,1) is top right. See the Layout section for more information.
SizeThe width and height of the Element. This may be automatically calculated depending on other settings
MarginThe distance from the edge of the element to the Anchor. This is only available when the Anchor is split (non-equal in one axis).
Use InputIf enabled, this Element is added to the list of elements that check for input and fire input related events.
LayersThe Layers to render this element into. More on Layers here

Image Component Properties

PropertyDescription
RectDefine the area of the texture asset to display.
MaskSwitch Image Element into a mask. Masks do not render into the scene, but instead limit child elements to only be rendered where this element is rendered.
TextureThe texture asset displayed
ColorThe color to tint the element.
OpacityThe transparency of the element.
LayersThe Layers to render this element into. More on Layers here

Text Component Properties

PropertyDescription
AlignmentDetermine how the text is aligned with in the element. (0,0) is bottom left, (1,1) is top right.
TextThe text string to display.
Font SizeThe size in Screen component pixels to render the font at.
Line HeightThe size in Screen component pixels to move down for a new line.
SpacingA multiplier to apply to the amount advanced between each character.
FontThe font asset.
ColorThe color to tint the font.
OpacityThe transparency of the element.
Wrap LinesEnable text wrapping. Any text that overflows the width of the text element will be wrapped to the next line.
LayersThe Layers to render this element into. More on Layers here