Layout/Grouping

By nesting elements within layouts/groupings, you are able to easily group elements together in-game. It allows for adjusting/moving them together, uniform padding and additional visual flair possibilities.

Each layout element has its own attributes specific to its type. Additionally, elements within a layout are subject to common common layout element attributes.

Element Summary¶

Layout Summary¶

Element Name	Description
`<Panel></Panel>`	A "window" in which elements can be confined.
`<HorizontalLayout></HorizontalLayout>`	A horizontal row of elements.
`<VerticalLayout></VerticalLayout>`	A vertical column of elements.
`<GridLayout></GridLayout>`	A grid of elements.
`<TableLayout></TableLayout>`	A layout element based on HTML tables, allowing you to specify the position of elements in specific rows/columns.
`<Row></Row>`	A row within a TableLayout.
`<Cell></Cell>`	A cell within a TableLayout.

Scroll View Summary¶

Element Name	Description
`<HorizontalScrollView></HorizontalScrollView>`	A scrollable horizontal row of elements.
`<VerticalScrollView></VerticalScrollView>`	A scrollable vertical column of elements.

Layout Element Details¶

Layout Details¶

Panel¶

A "window" in which elements can be confined.

Attribute Name	Description	Type / Options	Default Value
padding	Specifies the padding for this panel. Please note that if padding is specified, the panel will function as a LayoutGroup (which it does not do by default).	float(left) float(right) float(top) float(bottom)	(none)

<Panel>
    <Text>Text contained within Panel</Text>
</Panel>

HorizontalLayout¶

A horizontal row of elements.

Attribute Name	Description	Type / Options	Default Value
padding		float(left) float(right) float(top) float(bottom)	`0 0 0 0`
spacing	Spacing between child elements.	float	`0`
childAlignment		UpperLeft UpperCenter UpperRight MiddleLeft MiddleCenter MiddleRight LowerLeft LowerCenter LowerRight	`UpperLeft`
childForceExpandWidth			`true`
childForceExpandHeight			`true`

<HorizontalLayout>
    <Button>Button One</Button>
    <Button>Button Two</Button>
    <Button>Button Three</Button>
</HorizontalLayout>

VerticalLayout¶

A vertical column of elements.

Attribute Name	Description	Type / Options	Default Value
padding		float(left) float(right) float(top) float(bottom)	`0 0 0 0`
spacing	Spacing between child elements.	float	`0`
childAlignment		UpperLeft UpperCenter UpperRight MiddleLeft MiddleCenter MiddleRight LowerLeft LowerCenter LowerRight	`UpperLeft`
childForceExpandWidth			`true`
childForceExpandHeight			`true`

<VerticalLayout>
    <Button>Button One</Button>
    <Button>Button Two</Button>
    <Button>Button Three</Button>
</VerticalLayout>

GridLayout¶

A grid of elements.

Attribute Name	Description	Type / Options	Default Value
padding		float(left) float(right) float(top) float(bottom)	`0 0 0 0`
spacing	Spacing between child elements	float(x) float(y)	`0 0`
cellSize		float(x) float(y)	`100 100`
startCorner		UpperLeft UpperRight LowerLeft LowerRight	`UpperLeft`
startAxis		Horizontal Vertical	`Horizontal`
childAlignment		UpperLeft UpperCenter UpperRight MiddleLeft MiddleCenter MiddleRight LowerLeft LowerCenter LowerRight	`UpperLeft`
constraint		Flexible FixedColumnCount FixedRowCount	`Flexible`
constraintCount		integer	`2`

<GridLayout>
    <Button>Button One</Button>
    <Button>Button Two</Button>
    <Button>Button Three</Button>
</GridLayout>

TableLayout¶

A layout element based on HTML tables, allowing you to specify the position of elements in specific rows/columns.

Attribute Name	Description	Type / Options	Default Value
padding		float(left) float(right) float(top) float(bottom)	`0 0 0 0`
cellSpacing	Spacing between each cell.	float	`0`
columnWidths	(Optional) Explicitly set the width of each column. Use a value of 0 to auto-size a specific column.	float list - e.g. '32 0 0 32'	(none)
automaticallyAddColumns	If more cells are added to a row than are accounted for by columnWidths, should this TableLayout automatically add one or more new auto-sized entries (0) to columnWidths?		`true`
automaticallyRemoveEmptyColumns	If there are more entries in columnWidths than there are cells in any row, should this TableLayout automatically remove entries from columnWidths until their are no 'empty' columns?		`true`
autoCalculateHeight	If set to true, then the height of this TableLayout will automatically be calculated as the sum of each rows preferredHeight value. This option cannot be used without explicitly sized rows.		`false`
useGlobalCellPadding	If set to true, then all cells will use this TableLayout's cellPadding value.		`true`
cellPadding	Padding for each cell.	float(left) float(right) float(top) float(bottom)	`0 0 0 0`
cellBackgroundImage	Image to use as the background for each cell.	string
cellBackgroundColor	Color for each cells background.		`rgba(1,1,1,0.4)`
rowBackgroundImage	Image to use as the background for each row.	string
rowBackgroundColor	Color to use for each rows background.		`clear`

<TableLayout>
    <!-- Row 1 -->
    <Row>
        <Cell><Button>Button One</Button></Cell>
        <Cell><Button>Button Two</Button></Cell>
    </Row>
    <!-- Row 2 -->
    <Row>
        <Cell><Button>Button One</Button></Cell>
        <Cell><Button>Button Three</Button></Cell>
    </Row>
</TableLayout>

Row¶

A row within a TableLayout.

Attribute Name	Description	Type / Options	Default Value
preferredHeight	Sets the height for this row. Use a value of '0' to specify that this row should be auto-sized.	float	`0`
dontUseTableRowBackground	If set to true, then this row will ignore the tables' rowBackgroundImage and rowBackgroundColor values, allowing you to override those values for this row.		`false`

Cell¶

A cell within a TableLayout.

Attribute Name	Description	Type / Options	Default Value
columnSpan	__	int	`1`
dontUseTableCellBackground	If set to true, then this cell will ignore the tables' cellBackgroundImage and values, allowing you to override those values for this cell.		`false`
overrideGlobalCellPadding	If set to true, then this cell will ignore the tables' cellPadding value, allowing you to set unique cell padding for this cell.		`false`
padding	Padding values to use for this cell if overrideGlobalCellPadding is set to true.	float(left) float(right) float(top) float(bottom)	`0 0 0 0`
childForceExpandWidth			`true`
childForceExpandHeight			`true`

Scroll View Details¶

HorizontalScrollView¶

A scrollable horizontal row of elements. This is an input element.

A layout element such as a Panel, HorizontalLayout, GridLayout, or TableLayout can be used to position child elements within the Scroll View.

Attribute Name	Description	Type / Options	Default Value
onValueChanged	When a selection is made, its name is sent to a function with this name.	string	(none)
horizontal			`true`
vertical			`false`
movementType		Unrestricted Elastic Clamped	`Clamped`
elasticity		float	`0.1`
inertia			`true`
decelerationRate		float	`0.135`
scrollSensitivity		float	`1`
horizontalScrollbarVisibility		Permanent AutoHide AutoHideAndExpandViewport	`AutoHide`
verticalScrollbarVisibility		Permanent AutoHide AutoHideAndExpandViewport	(none)
noScrollbars	If set to true, then this scroll view will have no visible scrollbars.		`false`
scrollbarBackgroundColor			`#FFFFFF`
scrollbarColors			`#FFFFFF\|#FFFFFF\|#C8C8C8\|rgba(0.78,0.78,0.78,0.5)`
scrollbarImage		string

<HorizontalScrollView>
    <HorizontalLayout>
        <Panel>
            <Text>1</Text>
        </Panel>
        <Panel>
            <Text>2</Text>
        </Panel>
        <Panel>
            <Text>3</Text>
        </Panel>
        <Panel>
            <Text>4</Text>
        </Panel>
    </HorizontalLayout>
</HorizontalScrollView>

VerticalScrollView¶

A scrollable vertical column of elements. This is an input element.

A layout element such as a Panel, HorizontalLayout, GridLayout, or TableLayout can be used to position child elements within the Scroll View.

Attribute Name	Description	Type / Options	Default Value
onValueChanged	When a selection is made, its name is sent to a function with this name.	string	(none)
horizontal			`false`
vertical			`true`
movementType		Unrestricted Elastic Clamped	`Clamped`
elasticity		float	`0.1`
inertia			`true`
decelerationRate		float	`0.135`
scrollSensitivity		float	`1`
horizontalScrollbarVisibility		Permanent AutoHide AutoHideAndExpandViewport	(none)
verticalScrollbarVisibility		Permanent AutoHide AutoHideAndExpandViewport	`AutoHide`
noScrollbars	If set to true, then this scroll view will have no visible scrollbars.		`false`
scrollbarBackgroundColor			`#FFFFFF`
scrollbarColors			`#FFFFFF\|#FFFFFF\|#C8C8C8\|rgba(0.78,0.78,0.78,0.5)`
scrollbarImage		string

<VerticalScrollView>
    <VerticalLayout>
        <Panel>
            <Text>1</Text>
        </Panel>
        <Panel>
            <Text>2</Text>
        </Panel>
        <Panel>
            <Text>3</Text>
        </Panel>
        <Panel>
            <Text>4</Text>
        </Panel>
    </VerticalLayout>
</VerticalScrollView>