Multiple line hp bar

Is it possible to make a hp bar as shown in
I don’t think that drawing multiple lines would do it, maybe use a material? but then it would look horrible on other resolutions

well, that’s how it’s done in the screenshot.
drawing multiple lines.

You can tell by the boxes being slightly mis-aligned.

I’d probably use a material and draw only part of it with


This should mimic how Battlefront is doing it.

local function DrawSegmentBar(x, y, w, h, threshold)
    local padding = 10
    local segments = math.ceil(1 / threshold)
    local totalWidth = w - (padding * (segments - 1))
    local excess = 1 % threshold

    for i = 0, segments - 1 do
        local width = threshold * totalWidth
        local xpos = math.floor(x + (i * width) + (i * padding))

        if (i == (segments - 1) and excess > 0) then
            width = excess * totalWidth

        surface.DrawRect(xpos, y, width, h)

Threshold is at what percentage of the hp along an interval will the bar make a space.
Example, if I use “0.5” as the value, then it will divide it equally in half. “0.8” will divide it into two, but not equal parts.

An easy way to think of this is to use

valueOfEachSegment / maxValue

So applying this again to health, if I use “100 / 150”, meaning each segment represents 100 health and I have a max of 150 health, I’ll get


I should add that this doesn’t do progress. You’ll have to do that yourself, using either stencils or SetScissorRect

Nothing is impossible.

Thanks, helped me a lot