Multiple line hp bar

Garry's Mod coding
#1

Is it possible to make a hp bar as shown in https://media.discordapp.net/attachments/366275479889641472/366292737793851392/Screen_Shot_2017-10-07_at_1.27.24_PM.png?width=960&height=460
I don’t think that drawing multiple lines would do it, maybe use a material? but then it would look horrible on other resolutions

#2

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

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

#3

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

surface.DrawTexturedRectUV

#4

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
        end


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

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

http://zombine.me/ss/hl2_2017-10-07_17-40-56.png

EDIT:

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

#5

Nothing is impossible.

#6

Thanks, helped me a lot