Attributes
boundaryAs mentioned in the Introduction, attributes are modifiers that can be applied to elements. They can be applied to individual elements or to whole groups of them.
Important
They consists of two parts, a tag and a value. The value is always in quotation marks.
Attribute types
For XML, most of the attribute types are self-explanatory, like string or float (See Lua Scripting section for details on those). However XML has some unique types.
- HTML 6 Char Hex:
#FFFFFF
(white 100% opacity) - 8 Char Hex:
#FFFFFFCC
(white 80% opacity) - RGB Color:
rgb(1,1,1)
(white 100% opacity) - RGBA Color:
rgba(1,1,1,0.8)
(white 80% opacity) - Player Color:
White
(white 100% opacity)
- HTML 6 Char Hex:
- Color block values are used to specify the colors for elements such as buttons and input fields.
- Format: (normalColor|highlightedColor|pressedColor|disabledColor) where each color is formatted as above, e.g.
#FFFFFF|White|#C8C8C8|rgba(0.78,0.78,0.78,0.5)
- True:
1
ortrue
- False:
0
orfalse
- True:
Common Attributes
Elements all share some common attributes which are not repeated under their separate entries. They can be broker down into category.
General Attributes
Attribute Name | Description | Type / Options | Default Value |
---|---|---|---|
active | Specifies whether or not this element is active. This can be used to hide/show elements via scripting. Triggering this via script will not trigger animations. | bool | true |
class | This allows you to group elements together by giving them the same class. It is used with Defaults. | string | (none) |
id | Used by Lua scripting to identify an element within the XML. | string | (none) |
isDropReceiver | Determine if an object triggers onElementDropped. | bool | false |
visibility | What colors are able to see the element. See below for additional details. | string | (visible to all) |
Visibility Targets
The visibility attribute allows for only certain people or groups to see an element. Hiding an element will hide its children as well.
Visible To All Players
Not using the visibility attribute (or setting it to an empty string) does not limit the visibility of the element.
Visiblity Selection
Host
: Only visible to the game host.Admin
: Only visible to the host and any promoted player.Red
: Only visible to the player in that seat color. (Works with all valid color names)Clubs
: Only visible to members of that player group. (Works with all valid team names)
Combining Groups
You are able to list multiple color names in a single string by placing a vertical line |
between valid entries.
Example: "Red|Blue|Host"
would be visible to the red seat, blue seat and the host of the server.
Text Attributes
Many, but not all, elements have a text attribute.
Image Attributes
Applies to elements with an image component. The string that image
s all take is the NAME THE IMAGE WAS GIVEN WHEN YOU PUT IT IN THE IN-GAME ASSET MANAGER.
Appearance Attributes
Layout Element Attributes
These will only apply to elements within a layout group.
Position/Size Attributes (Basic)
Attribute Name | Description | Type / Options | Default Value |
---|---|---|---|
rectAlignment | Defines this elements position within its parent. Only applies to elements not contained within layout groups. | UpperLeft, UpperCenter, UpperRight, MiddleLeft, MiddleCenter, MiddleRight, LowerLeft, LowerCenter, LowerRight | MiddleCenter |
width | Defines the width of this element. | float (fixed width) or a Percentage value | 100% |
height | Defines the height of this element. | float (fixed width) or a Percentage value | 100% |
offsetXY | Defines an offset to the position of this element, e.g. a value of -32 0 will cause this element to be 32 pixels to the left of where it would otherwise be. |
float (x) float (y) | 0 0 |
Position/Size Attributes (Adv)
These provide deeper access to Unity's RectTransform properties.
Attribute Name | Description | Type / Options | Default Value |
---|---|---|---|
anchorMin | float(x) float(y) | ||
anchorMax | float(x) float(y) | ||
sizeDelta | float(x) float(y) | ||
pivot | float(x) float(y) | ||
position | float(x) float(y) float(z) | ||
rotation | float(x) float(y) float(z) | ||
scale | float(x) float(y) | ||
offsetMin | float(left) float(bottom) | ||
offsetMax | float(left) float(bottom) |
Dragging Attributes
Allow users to move elements by click/dragging.
Animation Attributes
Attribute Name | Description | Type / Options | Default Value |
---|---|---|---|
showAnimation |
|
None |
|
hideAnimation |
|
None |
|
showAnimationDelay | Adds a short delay before playing this element's show animation. | float | 0 |
hideAnimationDelay | Adds a short delay before playing this element's hide animation. | float | 0 |
animationDuration | Specifies how long show/hide animations should take to play. | float | 0.25 |
Tooltip Attributes
Allow any element to have a tooltip (text that appears when the element is hovered over by the mouse).
Event Attributes
Allows Lua scripting events to be triggered by any element, through a variety of interactions. See the Input Elements page for how to interact with Lua scripting.
Attribute Name | Description | Type / Options | Default Value |
---|---|---|---|
onClick | Clicking on the element. | string | |
onMouseEnter | Pointer entering the boundary of the element. | string | |
onMouseExit | Pointer leaving the boundary of the element. | string | |
onDrag | Element drag event. | string | |
onBeginDrag | Element beginning to be dragged. | string | |
onEndDrag | Element being release from its drag. | string | |
onMouseDown | Mouse click action. | string | |
onMouseUp | Mouse click finishing action. | string | |
onSubmit | string | ||
onElementDropped | An element needs isDropReceiver for this to trigger | string |
Note
onClick, onMouseEnter, onMouseExit, onMouseDown and onMouseUp all pass the click button. The values are -1 LMB, -2RMB, -3 MMB, 0 touch single, 1 double touche, 2 triple touch.
Usage
Single Element Attributes
This is how you would assign attributes to a single element.
One Attribute
<Button onClick="test">Hello</Button>
Multiple Attributes
<Button onClick="test" allowDragging="true">Hello</Button>
Many Attributes
<Button height="100" width="200" color="blue" onClick="test" allowDragging="true" rectAlignment="MiddleRight" tooltip="Test Tooltip" tooltipPosition="Above" fontSize="32" textColor="#ff0000" >Hello </Button>