A Layer is a fundamental UI building block for defining visible UI elements of Frames. A Layer is an element of an Layers array defined in a Frame. Layer XML elements, as a part of Layers array, can be defined on any Frame, which includes elements like Buttons and CheckButtons.
- Texture ... - 0 or more Textures to be rendered in the Layer
- FonstString ... - 0 or more FonstStrings to be rendered in the Layer
- level (DRAWLAYER) - Layer level in 'Z order'. Default is 'ARTWORK'.
- textureSubLevel (int) - Additional sub-leveling of 'level'. Range of -8 .. 7. Default is '0'.
An Anchor is also a fundamental UI building block for defining positional layout for UI elements of LayoutFrames. An Anchor is an element of an Anchors array defined in a LayoutFrame. Anchor XML elements, as a part of Anchors array, can be defined on any LayoutFrame or LayoutFrame type, which also includes Frames, Textures, and FontStrings.
<Frame name="MyFrame"> <Layers> <Layer> <Texture> <Size x="100" y="100" /> <HitRectInsets> <AbsInset left="0" right="-100" top="0" bottom="0"/> </HitRectInsets> <Color a="1" r="1" g="1" b="1" /> </Texture> <Texture> <Size x="100" y="100" /> <Color a="1" r="1" g="1" b="1" /> </Texture> </Layer> </Layers> </Frame>
This example will show a frame with a single default layer, displaying two textures.
There are 3 levels of layers: BACKGROUND is in the back, ARTWORK is in the middle and OVERLAY is in front. If you want to be sure that a object is before another, you must specify the level where you want to place it.
BACKGROUND - Level 0. Place the background of your frame here.
BORDER - Level 1. Place the artwork of your frame here .
ARTWORK - Level 2. Place the artwork of your frame here.
OVERLAY - Level 3. Place your text, objects, and buttons in this level.
HIGHLIGHT - Level 4. Place your text, objects, and buttons in this level.
- Elements in the HIGHLIGHT Layer are automatically shown or hidden when the mouse enters or leaves.
- For Highlighting to work you need enableMouse="true" in your <Frame> attributes.
Note: The above are capitalized for a reason. See example:
<Layers> <Layer level="BACKGROUND"> ... </Layer> <Layer level="ARTWORK"> ... </Layer> <Layer level="OVERLAY"> ... </Layer> </Layers>