User Interface Elements

Compass List

Compass lists are similar to lists, but map their items to cardinal directions for selection.

Properties

System

NameExplanationType
NameThe name of the element.String

Appearance

NameExplanationType
Is VisibleWhether or not the element is visible.Toggle
Hide When UnfocusedWhether or not to hide the element when it becomes unfocusedToggle

Cursor Appearance

NameExplanationType
Animate Cursor When UnfocusedWhether or not to animate the cursor when the element is unfocusedToggle
Color MaskThe color mask to apply to the cursor on the element.Color
Cursor Fits ContentsWhether or not the cursor is stretched to fit the currently selected item in the element.Toggle
Cursor Mask MarginThe margin to apply to the cursor on the element.Number
Cursor Mask StrategyThe strategy used to compose the masked cursor on the element.Skin Strategy
Cursor OffsetThe amount in pixels to offset the cursor on the element.Number
Hide Cursor When UnfocusedWhether or not to hide the cursor when the element is unfocused.Toggle
Require Key SelectionWhether or not the appropiate key is required to maintain the selection.Toggle
SpriteThe sprite to display in the element.Sprite
TypeThe method of displaying the cursor on the elementStrategy
Renders in BackgroundWhether or not the cursor renders behind the selected item.Toggle

Cursor Sound Effects

NameExplanationType
Use Default SoundsWhether or not to use the default system sound effects.Toggle
Movement Sound EffectThe sound to play when a cursor moves.Sound Effect?
Confirm Sound EffectThe sound to play when confirmation occurs.Sound Effect?
Buzzer Sound EffectThe sound to play when an invalid action occurs.Sound Effect?

Item Appearance

NameExplanationType
Font FamilyThe font family of the text in the element.Font Family
Font SizeThe font size of the text in the element.Number
ColorThe color of the text in the element.Color
Use Drop ShadowWhether or not to use a drop shadow on the text in the element.Toggle
Drop Shadow ColorThe drop shadow color of the text in the element.Color
Drop Shadow OffsetThe amount in pixels to offset the drop shadow for the text in the element.Number
Text Horizontal AlignmentThe horizontal alignment of the text in the element.Alignment
Text Vertical AlignmentThe vertical alignment of the text in the element.Alignment
Text Margin LeftThe left margin in pixels of the text in the element.Number
Text Margin TopThe top margin in pixels of the text in the element.Number
Text Margin RightThe right margin in pixels of the text in the element.Number
Text Margin BottomThe bottom margin in pixels of the text in the element.Number
Sprite Horizontal AlignmentThe horizontal alignment of the sprite or image in the element.Alignment
Sprite Margin LeftThe left margin in pixels of the sprite or image in the element.Number
Sprite Margin RightThe right margin in pixels of the sprite or image in the element.Number
Sprite Margin TopThe top margin in pixels of the sprite or image in the element.Number
Sprite Margin BottomThe bottom margin in pixels of the sprite or image in the element.Number
Sprite Vertical AlignmentThe vertical alignment of the sprite or image in the element.Alignment

Position

NameExplanationType
Use Relative PositioningWhether or not to use relative positioning and sizing for the element.Toggle
Pixel XThe x coordinate in pixels of the element.Number
Pixel YThe y coordinate in pixels of the element.Number
Pixel WidthThe width in pixels of the element.Number
Pixel HeightThe height in pixels of the element.Number
Relative XThe x coordinate relative to the container of the element.Number
Relative YThe y coordinate relative to the container of the element.Number
Relative WidthThe width relative to the container of the element.Number
Relative HeightThe height relative to the container of the element.Number
Margin LeftThe left margin in pixels of the element.Number
Margin RightThe right margin in pixels of the element.Number
Margin TopThe top margin in pixels of the element.Number
Margin BottomThe bottom margin in pixels of the element.Number

Gauge

Gauges display values as ratios or percentages, either vertically or horizontally.

Properties

System

NameExplanationType
NameThe name of the element.String

Appearance

NameExplanationType
Color MaskThe color mask to apply to the element.Color
Current ValueThe templated value to leverage to control the current value of the gauge.String
EndThe sprite to use for the end of the gauge.Sprite
FillThe sprite to use for the filled area between the start and end of the gauge.Sprite
Fill StrategyThe method of utilizing the Fill to fill between the start and end of the gauge.Fill Strategy
Maintain LimitsWhether or not to prevent the gauge from growing beyond the minimum or maximum values.Toggle
Maximum ValueThe templated value to leverage to control the maximum value of the gauge.String
Minimum ValueThe templated value to leverage to control the minimum value of the gauge.String
OrientationThe orientation of the gauge.Orientation
StartThe sprite to use for the start of the gauge.Sprite

Position

NameExplanationType
Margin LeftThe left margin in pixels of the element.Number
Margin TopThe top margin in pixels of the element.Number
Margin RightThe right margin in pixels of the element.Number
Margin BottomThe bottom margin in pixels of the element.Number
Pixel XThe x coordinate in pixels of the element.Number
Pixel YThe y coordinate in pixels of the element.Number
Pixel WidthThe width in pixels of the element.Number
Pixel HeightThe height in pixels of the element.Number
Relative XThe x coordinate relative to the container of the element.Number
Relative YThe y coordinate relative to the container of the element.Number
Relative WidthThe width relative to the container of the element.Number
Relative HeightThe height relative to the container of the element.Number
Use Relative PositioningWhether or not to use relative positioning and sizing for the element.Toggle

List

Lists are used to setup simple, fixed selectable options. A more extensible version, the Templated List, can be used to display highly configurable, variable selectable options.

Properties

System

NameExplanationType
NameThe name of the element.String

Appearance

NameExplanationType
Is VisibleWhether or not the element is visible.Toggle
OrientationThe direction of the items composition in the element.Orientation
Enable LoopingWhether or not the items in the element loop to the beginning after reaching the end and vice versa.Toggle
Hide When UnfocusedWhether or not to hide the element when it becomes unfocused.Toggle

Cursor Appearance

NameExplanationType
SpriteThe sprite to use for the cursor on the element.Sprite
TypeThe method of displaying the cursor on the element.Cursor Type
Cursor Mask StrategyThe strategy used to compose the masked cursor on the element.Skin Strategy
Color MaskThe color mask to apply to the cursor on the element.Color
Cursor Mask MarginThe margin to apply to the cursor on the element.Number
Cursor OffsetThe amount in pixels to offset the cursor on the element.Number
Cursor Fits ContentsWhether or not the cursor is stretched to fit the currently selected item in the element.Toggle
Animate Cursor When UnfocusedWhether or not to animate the cursor when the element is unfocused.Toggle
Hide Cursor When UnfocusedWhether or not to hide the cursor when the element is unfocused.Toggle
Renders in BackgroundWhether or not the cursor renders behind the selected item.Toggle

Cursor Sound Effects

NameExplanationType
Use Default SoundsWhether or not to use the default system sound effects.Toggle
Movement Sound EffectThe sound to play when a cursor moves.Sound Effect?
Confirm Sound EffectThe sound to play when confirmation occurs.Sound Effect?
Buzzer Sound EffectThe sound to play when an invalid action occurs.Sound Effect?

Item Appearance

NameExplanationType
Font FamilyThe font family of the text in the element.Font Family
Font SizeThe font size of the text in the element.Number
ColorThe color of the text in the element.Color
Use Drop ShadowWhether or not to use a drop shadow on the text in the element.Toggle
Drop Shadow ColorThe drop shadow color of the text in the element.Color
Drop Shadow OffsetThe amount in pixels to offset the drop shadow for the text in the element.Number
Text Horizontal AlignmentThe horizontal alignment of the text in the element.Alignment
Text Vertical AlignmentThe vertical alignment of the text in the element.Alignment
Text Margin LeftThe left margin in pixels of the text in the element.Number
Text Margin TopThe top margin in pixels of the text in the element.Number
Text Margin RightThe right margin in pixels of the text in the element.Number
Text Margin BottomThe bottom margin in pixels of the text in the element.Number
Sprite Horizontal AlignmentThe horizontal alignment of the sprite or image in the element.Alignment
Sprite Margin LeftThe left margin in pixels of the sprite or image in the element.Number
Sprite Margin RightThe right margin in pixels of the sprite or image in the element.Number
Sprite Margin TopThe top margin in pixels of the sprite or image in the element.Number
Sprite Margin BottomThe bottom margin in pixels of the sprite or image in the element.Number
Sprite Vertical AlignmentThe vertical alignment of the sprite or image in the element.Alignment

Item Details

NameExplanationType
Use Item SizingWhether or not item sizing is defined rather than automatically calculated.Toggle
Use Relative PositioningWhether or not to use relative positioning and sizing for the item in the element.Toggle
Pixel WidthThe width in pixels of the item in the element.Number
Pixel HeightThe height in pixels of the item in the element.Number
Relative WidthThe width relative to the templated list of the item.Number
Relative HeightThe height relative to the templated list of the item.Number

Position

NameExplanationType
Use Relative PositioningWhether or not to use relative positioning and sizing for the element.Toggle
Pixel XThe x coordinate in pixels of the element.Number
Pixel YThe y coordinate in pixels of the element.Number
Pixel WidthThe width in pixels of the element.Number
Pixel HeightThe height in pixels of the element.Number
Relative XThe x coordinate relative to the container of the element.Number
Relative YThe y coordinate relative to the container of the element.Number
Relative WidthThe width relative to the container of the element.Number
Relative HeightThe height relative to the container of the element.Number
Margin LeftThe left margin in pixels of the element.Number
Margin RightThe right margin in pixels of the element.Number
Margin TopThe top margin in pixels of the element.Number
Margin BottomThe bottom margin in pixels of the element.Number

Scripts

NameExplanationType
FocusedThe script to execute when the element gains focus.Script
UnfocusedThe script to execute when the element loses focus.Script

Item Properties

Appearance

NameExplanationType
TextThe text to display in the element.String
SpriteThe sprite to display in the element.Sprite or Model
Use Sprite OnlyWhether or not to display the sprite or image only.Toggle
Use Space if HiddenWhether or not to occupy the space if the item is not rendered.Toggle
Color MaskThe color of the text to override in the element.Color
Override StylesWhether or not the item should use different styling from what was specified in the list element.Toggle
Text Margin LeftThe left margin in pixels of the text to override in the element.Number
Text Margin RightThe right margin in pixels of the text to override in the element.Number
Text Margin TopThe top margin in pixels of the text to override in the element.Number
Text Margin BottomThe bottom margin in pixels of the text to override in the element.Number
Sprite Horizontal AlignmentThe horizontal alignment of the sprite or image to override in the element.Alignment
Sprite Vertical AlignmentThe vertical alignment of the sprite or image to override in the element.Alignment
Sprite Margin LeftThe left margin in pixels of the sprite or image to override in the element.Number
Sprite Margin TopThe top margin in pixels of the sprite or image to override in the element.Number
Sprite Margin RightThe right margin in pixels of the sprite or image to override in the element.Number
Sprite Margin BottomThe bottom margin in pixels of the sprite or image to override in the element.Number

Disabled Effect

NameExplanationType
Color MaskThe color of the text to override in the element.Color
GrayscaleWhether or not to apply greyscale tone to the element.Toggle
Invert Condition ValueWhether or not to invert the value of the relevant element.Toggle
OpacityThe opacity of the element.Number
SwitchThe global switch to leverage for the disabled effect.Switch
Use EffectWhether or not to use the effect.Toggle
Use SwitchWhether or not to use a global switch to control the accessibility of the element.Toggle
VisibleWhether or not the element should be visible when disabled.Toggle

Scripts

NameExplanationType
ExecuteThe script to execute when the item is selected.Script
FocusedThe script to execute when the item gains focus.Script
UnfocusedThe script to execute when the item loses focus.Script

Pane

Panes are used to show a background pattern or border.

Properties

System

NameExplanationType
NameThe name of the element.String

Appearance

NameExplanationType
Is VisibleWhether or not the element is visible.Toggle
BackgroundThe image to display as a background in the element.Sprite
StrategyThe strategy used to compose the background.Skin Strategy
Color MaskThe color mask to apply to the element.Color
Hue ShiftThe hue shift to apply to the element.Number

Context

NameExplanationType
Is Linked to Selected ContextWhether or not the context is linked to the current selection in the user interface.Toggle
Is Linked to UI ContextWhether or not the context is linked to the user interface.Toggle
Template TypeThe data type to expect for templating.
Note: This is not used by the engine and only assists in providing suggestions in the Template.
Data Type?

Position

NameExplanationType
Use Relative PositioningWhether or not to use relative positioning and sizing for the element.Toggle
Pixel XThe x coordinate in pixels of the element.Number
Pixel YThe y coordinate in pixels of the element.Number
Pixel WidthThe width in pixels of the element.Number
Pixel HeightThe height in pixels of the element.Number
Relative XThe x coordinate relative to the container of the element.Number
Relative YThe y coordinate relative to the container of the element.Number
Relative WidthThe width relative to the container of the element.Number
Relative HeightThe height relative to the container of the element.Number
Margin LeftThe left margin in pixels of the element.Number
Margin TopThe top margin in pixels of the element.Number
Margin RightThe right margin in pixels of the element.Number
Margin BottomThe bottom margin in pixels of the element.Number

Picture

Pictures are used to show static images or sprites, including animated, in a user interface.

Properties

System

NameExplanationType
NameThe name of the element.String

Appearance

NameExplanationType
Color MaskThe color mask to apply to the element.Color
Horizontal AlignmentThe horizontal alignment of the element.Alignment
Hue ShiftThe hue shift to apply to the element.Number
ImageThe static image to display in the element.Image
SpriteThe sprite to display in the element.Sprite
Stretch to BoundariesWhether or not to stretch the image or sprite to fit the size of the element.Toggle
TemplateThe template details for the element.String
Use TemplateWhether or not to use a template for the image or sprite.Toggle
Vertical AlignmentThe vertical alignment of the element.Alignment

Context

NameExplanationType
Is Linked to Selected ContextWhether or not the context is linked to the current selection in the user interface.Toggle
Is Linked to UI ContextWhether or not the context is linked to the user interface.Toggle
Template TypeThe data type to expect for templating.
Note: This is not used by the engine and only assists in providing suggestions in the Template.
Data Type?

Position

NameExplanationType
Use Relative PositioningWhether or not to use relative positioning and sizing for the element.Toggle
Pixel XThe x coordinate in pixels of the element.Number
Pixel YThe y coordinate in pixels of the element.Number
Pixel WidthThe width in pixels of the element.Number
Pixel HeightThe height in pixels of the element.Number
Relative XThe x coordinate relative to the container of the element.Number
Relative YThe y coordinate relative to the container of the element.Number
Relative WidthThe width relative to the container of the element.Number
Relative HeightThe height relative to the container of the element.Number
Margin LeftThe left margin in pixels of the element.Number
Margin TopThe top margin in pixels of the element.Number
Margin RightThe right margin in pixels of the element.Number
Margin BottomThe bottom margin in pixels of the element.Number

Slider

Sliders allow numeric values to be altered up or down.

Properties

System

NameExplanationType
NameThe name of the element.String

Cursor

NameExplanationType
SpriteThe sprite to use for the current position on the sliderSprite
Cursor OffsetThe amount in pixels to offset the cursor on the element.Number
Hide Cursor When UnfocusedWhether or not to hide the cursor when the element is unfocused.Toggle

Cursor Sound Effects

NameExplanationType
Use Default SoundsWhether or not to use the default system sound effects.Toggle
Movement Sound EffectThe sound to play when a cursor moves.Sound Effect?
Confirm Sound EffectThe sound to play when confirmation occurs.Sound Effect?

Appearance

NameExplanationType
Is VisibleWhether or not the element is visible.Toggle
Animate When UnfocusedWhether or not to animate the cursor and fill when unfocused.Toggle
Color MaskThe color mask to apply to the element.Color
FillThe sprite to use for the filled area between the start and end of the slider.Sprite
Fill StrategyThe method of utilizing the Fill to fill between the start and end of the slider.Strategy
Minimum ValueThe Value to leverage to control the minimum value of the slider.Variable or Value
Maximum ValueThe value to leverage to control the maximum value of the slider.Variable or Value
Current ValueThe current value to leverage to control the minimum value of the sliderVariable
ChangeThe value to leverage to control the change of the value of the slider.Variable or Value
OrientationThe orientation of the slider.Orientation
Invert DirectionWhether or not to invert the direction of the sliderToggle
Use Floating PointsWhether or not to use floating points when evaluating the values.Toggle
Use IntegersWhether or not to use integers when evaluating the values.Toggle

Position

NameExplanationType
Margin LeftThe left margin in pixels of the element.Number
Margin TopThe top margin in pixels of the element.Number
Margin RightThe right margin in pixels of the element.Number
Margin BottomThe bottom margin in pixels of the element.Number
Pixel XThe x coordinate in pixels of the element.Number
Pixel YThe y coordinate in pixels of the element.Number
Pixel WidthThe width in pixels of the element.Number
Pixel HeightThe height in pixels of the element.Number
Relative XThe x coordinate relative to the container of the element.Number
Relative YThe y coordinate relative to the container of the element.Number
Relative WidthThe width relative to the container of the element.Number
Relative HeightThe height relative to the container of the element.Number
Use Relative PositioningWhether or not to use relative positioning and sizing for the element.Toggle

Templated List

Templated lists are used to setup dynamic selectable options. They are Context? driven, which allows for properties of different data types to be displayed.

Properties

System

NameExplanationType
NameThe name of the element.String

Appearance

NameExplanationType
Enable LoopingWhether or not the items in the element loop to the beginning after reaching the end and vice versa.Toggle
Hide When UnfocusedWhether or not to hide the element when it becomes unfocused.Toggle
OrientationThe direction of the items composition in the element.Orientation
Template TypeThe data type to expect for templating.
Note: This is not used by the engine and only assists in providing suggestions in the Template.
Data Type?

Context

NameExplanationType
Custom ContextThe custom context property to use on the element.String
Use Custom ContextWhether or not to use a custom context property on the element.Toggle

Cursor Appearance

NameExplanationType
Animate Cursor When UnfocusedWhether or not to animate the cursor when the element is unfocused.Toggle
Color MaskThe color mask to apply to the cursor on the element.Color
Cursor Mask MarginThe margin to apply to the cursor on the element.Number
Mask StrategyThe strategy used to compose the masked cursor on the element.Skin Strategy
Cursor OffsetThe amount in pixels to offset the cursor on the element.Number
Hide Cursor When UnfocusedWhether or not to hide the cursor when the element is unfocused.Toggle
SpriteThe sprite to use for the cursor on the element.Sprite
TypeThe method of displaying the cursor on the element.Cursor Type

Cursor Sound Effects

NameExplanationType
Use Default SoundsWhether or not to use the default system sound effects.Toggle
Buzzer Sound EffectThe sound to play when an invalid action occurs.Sound Effect?
Confirm Sound EffectThe sound to play when confirmation occurs.Sound Effect?
Movement Sound EffectThe sound to play when a cursor moves.Sound Effect?

Item Details

NameExplanationType
Item ComponentsEnables the item component editor. 
Margin LeftThe left margin in pixels of the item in the element.Number
Margin TopThe top margin in pixels of the item in the element.Number
Margin RightThe right margin in pixels of the item in the element.Number
Margin BottomThe bottom margin in pixels of the item in the element.Number
Pixel WidthThe width in pixels of the item in the element.Number
Pixel HeightThe height in pixels of the item in the element.Number
Relative WidthThe width relative to the templated list of the item.Number
Relative HeightThe height relative to the templated list of the item.Number
Use Relative PositioningWhether or not to use relative positioning and sizing for the item in the element.Toggle

Item Disabled Effect

NameExplanationType
Color MaskThe color mask to apply to the item in the element.Color
GrayscaleWhether or not to apply a grayscale tone to the item in the element.Toggle
Invert Condition ValueWhether or not to invert the value of the relevant property.Toggle
OpacityThe opacity of the item in the element.Number
SwitchThe global switch to leverage for the disabled effect.Switch
TemplateThe templated value to leverage for the disabled effect.String
Use SwitchWhether or not to use a global switch to control the accessibility of the item.Toggle
Use Template ValueWhether or not to use a templated value to control the accessibility of the item.Toggle
VisibleWhether or not the item should be visible when disabled.Toggle

Position

NameExplanationType
Margin LeftThe left margin in pixels of the element.Number
Margin TopThe top margin in pixels of the element.Number
Margin RightThe right margin in pixels of the element.Number
Margin BottomThe bottom margin in pixels of the element.Number
Pixel XThe x coordinate in pixels of the element.Number
Pixel YThe y coordinate in pixels of the element.Number
Pixel WidthThe width in pixels of the element.Number
Pixel HeightThe height in pixels of the element.Number
Relative XThe x coordinate relative to the container of the element.Number
Relative YThe y coordinate relative to the container of the element.Number
Relative WidthThe width relative to the container of the element.Number
Relative HeightThe height relative to the container of the element.Number
Use Relative PositioningWhether or not to use relative positioning and sizing for the element.Toggle

Scripts

NameExplanationType
ExecuteThe script to execute when an item is selected.Script
FocusedThe script to execute when the templated list gains focus.Script
Item FocusedThe script to execute when an item gains focus.Script
Item UnfocusedThe script to execute when an item loses focus.Script
UnfocusedThe script to execute when the templated list loses focus.Script

Text

Text is used to display text or text patterns.

Properties

System

NameExplanationType
NameThe name of the element.String

Appearance

NameExplanationType
ColorThe color of the text in the element.Color
Drop Shadow ColorThe drop shadow color of the text in the element.Color
Drop Shadow OffsetThe amount in pixels to offset the drop shadow for the text in the element.Number
Font FamilyThe font family of the text in the element.Font Family
Font SizeThe font size of the text in the element.Number
Horizontal AlignmentThe horizontal alignment of the text in the element.Alignment
TextThe text to display in the element.String
Use Drop ShadowWhether or not to use a drop shadow on the text in the element.Toggle
Use Word WrappingWhether or not to wrap text to fit cleanly on multiple lines.Toggle
Vertical AlignmentThe vertical alignment of the text in the element.Alignment

Context

NameExplanationType
Is Linked to Selected ContextWhether or not the context is linked to the current selection in the user interface.Toggle
Is Linked to UI ContextWhether or not the context is linked to the user interface.Toggle
Template TypeThe data type to expect for templating.
Note: This is not used by the engine and only assists in providing suggestions in the Template.
Data Type?

Effects

NameExplanationType
Character Delay (milliseconds)The number of milliseconds to wait before displaying the next character in the textNumber
Character SoundThe sound effect to play when each character displays in the text.Sound Effect?

Position

NameExplanationType
Margin LeftThe left margin in pixels of the element.Number
Margin TopThe top margin in pixels of the element.Number
Margin RightThe right margin in pixels of the element.Number
Margin BottomThe bottom margin in pixels of the element.Number
Pixel XThe x coordinate in pixels of the element.Number
Pixel YThe y coordinate in pixels of the element.Number
Pixel WidthThe width in pixels of the element.Number
Pixel HeightThe height in pixels of the element.Number
Relative XThe x coordinate relative to the container of the element.Number
Relative YThe y coordinate relative to the container of the element.Number
Relative WidthThe width relative to the container of the element.Number
Relative HeightThe height relative to the container of the element.Number
Use Relative PositioningWhether or not to use relative positioning and sizing for the element.Toggle