Defines an action executed by the control. The exact moment when the action is executed depends on the control and it components but in regular the action is fired if the component is clicked.

Allows to define multiple actions executed by the control. The actions are executed in their definition order. See ui.Control.action property for more information.

The control's alignment on x-axis. Needs to be supported by the layout. The following alignments are available:

• left
• center
• right

The control's alignment on y-axis. Needs to be supported by the layout. The following alignments are available:

• top
• center
• bottom

Defines the anchor-point of the control which is used for rotation and zooming. For Example: If the anchor-point is set to [0.5, 0.5] and a rotation is executed it will rotate around its own center. Otherwise with [0, 0] it rotates around its top-left corner. The anchor-point has no effect on the position (x/y of dstRect).

Defines animations for the control. Each animations need to be bound to a different event.

Data-Bindings used by the control.

The blend-mode used for blending. The following blend modes are supported:

• add - Additive Blending
• sub - Subtractive Blending
• normal - Normal Blending

The control's color.

Additional components added to the control.

An object to define custom data. That custom data has not effect by default but can be used with bindings or custom components.

Associates the layout with a data-source. In that case the layout's controls are generated automatically depending on the amount of the data. Use the template-property to define the appearance of each control. The value is a binding-expression and should return an array of data or a number-value. If its a number-value it will be used as the count of controls to create.

The layout needs to support data-fields. That is only the case for ui.StackLayout and ui.GridLayout.

A condition which is executed on each data-object. The data-object is only processed if the condition returns true.

Makes the object draggable vertically or horizontally. Useful to implement sliders, scroll-bars, etc. See descriptor for more information.

Indicates if the control is enabled. A disable control is rendered different and doesn't respond to user-input. The exact behavior depends on the control's components.

If true, the control's size will not resize to fit an associated image like for ui.Image control.

Defines the position and size of the control. It is also possible use percentage values and small formulas. For example:

[0, 0, "100%", "100% - 50"]
[0, 0, "100%", "Math.max(100% - 50, 10)"]

Assigns the control to a group. The effect of depends on the components.

The unique identifer of the component. The control can be accessed using $ in formulas und binding-expressions.

Indiciates if the control inherits opacity, zoom, angle, color, tone and anchor-point from its parent layout.

Defines a space around the control. The parent-layout must support margins. Otherwise that property has no effect. The format is [top, left, bottom, right].

The control's opacity. Goes from 0=Transparent to 255=Opaque.

The order-index to control the update-order of controls. The higher the value, the earlier the control is updated in the list of controls.

Defines a space around the control's visual content. It allows to shift the visual content without affecting the control's position and size. The format is [top, left, bottom, right]

Indicates if the control is selectable. Selectable control's may have a different appearance on selected/unselected state but the exact behavior depends on the components. For example: The gs.Component_HotspotBehavior component allows different control's images for selected/unselected state and set the game object's selected-property to the current selection-state.

The control's style name. A style allows to define control-properties on a central place and then re-use it for multiple controls to reduce redundant data. A styles needs to be added to the ui.UIManager.styles object which stores key-values pairs with the style-name as key and the style-data as value. For example:

To use that style, the style-property must be used:

Allows to add multiple styles to a control. See ui.Control.style for more information.

Defines the template used to create the control's if a data-field is present. It can be just the name of a template or template-definition. To access the data the template should display, the index-property can be used which is part of every control displayed in a layout. For Example:

Lets say the data-field is defined as "$dataFields.database.characters" to display all characters. The template is defined as a simple ui.Text control. To display the name of each character the following binding can be used:

The type-name of the control. Can be a name of a template or an internal type name. Internal types are:

• ui.Text
• ui.Image
• ui.ImageButton
• ui.ImageMap
• ui.Video
• ui.FreeLayout
• ui.StackLayout
• ui.SpreadLayout
• ui.GridLayout

The updateBehavior controls in which cases the control is updated.

• normal - Updates the control only if necessary. However, in some cases that is not enough.
• continuous - Updates the control every frame.

Updating a control doesn't mean that only one control is updated. A single update of a control can trigger updates on other controls as well if there are dependencies and also the parent-layout is updated.

Indicates if the control is visible. An invisible control will not be rendered but still takes up space in layouts.

The z-index controls the overlapping of controls. A control with a higher z-index is drawn above a control with a lower z-index.