Structuring a 2D interface using hierarchy

A 2D interface definition is based on a well-structured use of hierarchy.

Conceptually, there are no limits or constraints to the hierarchy height. Every 2D interface node type may be the interface root and every node type may be the child of another node type.

Guidelines

The following guidelines apply to 2D interface creation:

• If the interface contains multiple elements it is best to use a rect or a layer as root.

• The root node position coordinates are absolute (in reference to the top left of the screen) and expressed in pixels. The coordinates of child nodes are relative to the parent.

• At runtime, the values of position, scale, fading and visualization states are propagated from a level to all the subordinate levels. In other words, from the changed node to all its descendants. The reverse is not true.

• Take care to distinguish between position and center. By default, the positioning of an object displays its top left vertex at the position coordinates. The center field is used to give an offset to this placement. For example, assigning half object width and height as center, the object is positioned with its center on the given position.

• The hierarchy depth defines the z position of the objects, if not done explicitly. This means that the root is the lowest layer, its children appear above it, and their children appear above that and so on.

Code example

This is a code example of 2D interface code.

<rect name="menu" image="menu_fondo.png" show="false" position="1152 672" center="256 384" size="512 512" scale="0.5 0.5">

<button name="buttonZoomOut" show="true" position="112 256" center="64 64" size="128 128" propagateMouse="false">

<rect image="menu_zoom_out_off.png" order="2" opacity="1" size="128 128" />

<rect image="menu_zoom_out_on.png" order="2" opacity="1" size="128 128" />

</button>

<button name="buttonZoomIn" show="true" position="388 256" center="64 64" size="128 128" propagateMouse="false">

<rect image="menu_zoom_in_off.png" order="2" opacity="1" size="128 128" />

<rect image="menu_zoom_in_on.png" order="2" opacity="1" size="128 128" />

</button>

<button name="buttonRestart" show="true" position="256 113" center="64 16" size="128 32" propagateMouse="false">

<rect image="menu_restart_off.png" order="2" opacity="1" size="128 32" />

<rect image="menu_restart_on.png" order="2" opacity="1" size="128 32" />

</button>

<button name="buttonMain" show="true" position="256 256" center="64 64" size="128 128" propagateMouse="false">

<rect image="menu_main_off.png" order="2" opacity="1" center="0 -48" size="128 32" />

<rect image="menu_main_on.png" order="2" opacity="1" center="0 -48" size="128 32" />

</button>

<button name="buttonJet" show="true" position="118 143" center="32 64" size="64 128" scale="0.7 0.7" propagateMouse="false">

<rect image="menu_jet_off.png" order="2" opacity="1" size="64 128" />

<rect image="menu_jet_on.png" order="2" opacity="1" size="64 128" />

</button>

<button name="buttonSteam" show="true" position="392 143" center="64 32" size="128 64" scale="0.7 0.7" propagateMouse="false">

<rect image="menu_steam_off.png" order="2" opacity="1" size="128 64" />

<rect image="menu_steam_on.png" order="2" opacity="1" size="128 64" />

</button>

<button name="buttonTime" show="true" position="118 365" center="32 32" size="64 64" scale="0.7 0.7" propagateMouse="false">

<rect image="menu_time_off.png" order="2" opacity="1" size="64 64" />

<rect image="menu_time_on.png" order="2" opacity="1" size="64 64" />

</button>

<button name="buttonLife" show="true" position="392 365" center="32 64" size="64 128" scale="0.7 0.7" propagateMouse="false">

<rect image="menu_life_off.png" order="2" opacity="1" size="64 128" />

<rect image="menu_life_on.png" order="2" opacity="1" size="64 128" />

</button>

<button name="buttonDrag" show="true" position="186 334" center="0 0" size="142 157" propagateMouse="false"/>

</rect>

Result

An example of the result.