Overview

A custom health bar can be achieved by creating UI in XML, hooking it up with GMUI, attaching it to the unit with DCEI.AttachFrameToUnit(), and then binding the UI elements to the unit’s stats with data binding.

XML

First, by opening the UI Editor window in the editor, we can write some XML. We’re going to create a basic bar that we can reuse multiple times using the include feature.

A bar has three frames:

• The top container frame is for the black background which is visible as the bar fill decreases
• A mask frame that can mask out the fill as the unit’s health decreases
• The fill frame, which is the actual green part of a health bar

CustomStatusBar/Bar

<Frame frameImage="loading_bar_empty" width="200" height="15" frameImagePixelsPerUnitMultiplier="3" frameImageColor="#000000ff" layout="flex">
    <Mask id="Mask" frameImage="loading_bar_empty" frameImagePixelsPerUnitMultiplier="3" widthPercent="105" heightPercent="105">
        <Frame id="Fill" frameImage="btn_grey01_invert" widthPercent="100" heightPercent="100" frameImagePixelsPerUnitMultiplier="3" />
    </Mask>
</Frame>

Next, we can create a Frame that includes this multiple times — once for health, once for mana, and a third time which we could use for various purposes. I’ve also included a text frame to display the exact numerical value of the unit’s health in addition to the bar.

Some things to note here:

• Frames need IDs to reference later in Lua
• You can change child frames of an Include by adding a frame of the same type with the same ID: we overwrite the fill color to be green and blue for our health and mana bars this way
• As per our XML naming standards, include frame IDs should be “snake_case” while other frames should be UpperCamelCase.

CustomStatusBar