Authoring Layouts Array

Authoring Layouts — Array

An array lays out a list of children in either a horizontal row or a vertical column. It's the everyday "stack of things" container — a row of buttons, a column of stat panels, a list of pinned-location cards, etc.

See Authoring Layouts for the file format and base fields. This page only covers fields specific to the array type.

JSON schema

Parsed in EmoTracker.Data/Layout/ArrayPanel.cs. Matches the array branch in layouts.json.

Field	Type	Required	Default	Description
type	"array"	yes	—	Literal string.
orientation	string	no	"vertical"	Direction children flow: "horizontal" or "vertical".
style	string	no	"stack"	How children are packed: "stack" (single line that overflows) or "wrap" (wraps to new lines when the cross axis fills up).
content	array	no	empty	Ordered list of layout elements that the array contains.

Plus the standard base fields from Authoring Layouts → Fields every layout element shares.

The default orientation in the parser is vertical, despite the schema's description saying horizontal. Read the source if your layout looks rotated 90° from what you expected.

Mouse behavior

An array passes mouse input straight through to its children. The array itself doesn't intercept anything unless you give it a background (which then becomes a click target).

Examples

A horizontal row of items

{
  "type": "array",
  "orientation": "horizontal",
  "content": [
    { "type": "item", "item": "sword" },
    { "type": "item", "item": "shield" },
    { "type": "item", "item": "bow" }
  ]
}

A wrapping grid of items

When you have an unknown number of children and want them to flow onto multiple lines based on available width, use style: "wrap":

{
  "type": "array",
  "orientation": "horizontal",
  "style": "wrap",
  "content": [
    { "type": "item", "item": "sword" },
    { "type": "item", "item": "shield" },
    { "type": "item", "item": "bow" },
    { "type": "item", "item": "hookshot" },
    { "type": "item", "item": "lamp" },
    { "type": "item", "item": "hammer" }
  ]
}

For fixed-grid arrangements (always N columns × M rows of identical items), prefer Item Grid — it's smaller to author and lets you size each cell uniformly.

A vertical column of group boxes

{
  "type": "array",
  "orientation": "vertical",
  "content": [
    { "type": "group", "header": "Items", "content": { "type": "itemgrid", "rows": [...] } },
    { "type": "group", "header": "Dungeons", "content": { "type": "itemgrid", "rows": [...] } },
    { "type": "group", "header": "Bosses", "content": { "type": "itemgrid", "rows": [...] } }
  ]
}

Tips and pitfalls

• stack vs wrap. Stack is a single straight line that may overflow if the parent doesn't allow it. Wrap moves overflowing children to a new "line" along the perpendicular axis.
• Use h_alignment / v_alignment on children to control how each child sits in the array's slot, not on the array itself unless you want to align the array within its parent.
• For free-form overlapping placement, use Canvas instead. Arrays are strictly linear.
• For docking children to specific edges, use Dock instead. Arrays don't understand dock.

See also

• Authoring Layouts — top-level format and base fields
• Authoring Layouts — Item Grid — for fixed N×M grids of identical items
• Authoring Layouts — Dock — for edge-pinned children
• Authoring Layouts — Canvas — for absolute positioning
• layouts.json schema — authoritative JSON schema