View source for WoW:How the user interface is rendered

{{uitech}}

{{wikify}}
(Posted in the WoW UI Forum by Slouken on 2005-05-26)


== Page Composition ==

Well, an understanding of how the UI is rendered would help:

There are several strata that a frame goes into, e.g. background, normal, dialog, tooltip. A strata simply means that all frames in one strata will be rendered above frames in a lower strata, and below frames in a higher strata.

 The actual strata, according to UI.xsd are: PARENT, BACKGROUND, LOW, MEDIUM,
 HIGH, DIALOG, FULLSCREEEN, FULLSCREEN_DIALOG, TOOLTIP. Note that PARENT is a
 'compile time' only strata, and doesn't exist at runtime, use GetFrameStrata
 at runtime.

Within a strata, each frame has a frame level, which determines the order in which it is rendered. The optimal layout is to have all frames in the same strata at the same frame level, since they can be batched and rendered at the same time. When a "toplevel" frame is clicked on, it is raised above other frames in the strata.

Within a frame, there are several draw layers, e.g. background, artwork, overlay, which can contain textures and fontstrings. Within a single draw layer, textures are rendered first, and then fontstrings are rendered afterwards, so text always shows above textures within a single draw layer. Other than that, there is no defined render order, so if you have two overlapping textures in the same draw layer, you never know which will overlap the other.

 As of 1.9, the available levels are: BACKGROUND, BORDER, ARTWORK, OVERLAY, HIGHLIGHT

Only frames can get mouse events, and then only if they have mouse event handlers or are frame types which are clickable (buttons). The mouse focus goes to the frame which is registered for mouse events with the highest strata and the highest frame level under the cursor.

I hope that helps!

== Event/Update Ordering ==
(This part's just provided by me, based on in-game observation and information from slouken)

Each time the screen is re-rendered (i.e. each Frame, in the FPS sense), the process runs as follows:

# Handle pending UI Events, Key presses, Mouse Clicks.
# Execute OnUpdate on each visible Frame with a handler.
# Repaint UI over the top of the game world.

The most important part of this is that OnUpdates happen right before painting the UI, so you can defer making rendering decisions until then without any visible impact.