League of Legends Style health Bars ( on HUD and TargetID )

[Greyfoxzb]

I have been working on making a league of legends health bar. However I have not been able to get it working completely.

Help would be appreciated.

What is a LoL style health bar you ask?

It is a health bar that is a full length health bar like this [============] but when you go over 100 HP the health bar splits into seperate bars and each new bar that is formed represents an additional 100hp when full.

So a LoL health bar that is 300 HP would look like this [====|====|====]

I am trying to make it so that no matter how much HP I have the Bars will correctly split into sections and continue to properly progress each bar individually and properly represent the correct amount of life.

Currently I have made my health bars Progress based off of HP, and I have made a new set of health bars that draws rectangles in a row like [][][][][][][][] based off of the HP.

I am having trouble getting the health bars to progress properly meaning the last one in the line moves down only.

To give you an idea of what I might be working with here is some sample code:

-- simple rounded box rectangle for hp
local hp = LocalPlayer():Health()
draw.RoundedBox(0, 10, ScrH() - 15 - 20, hp, 15, Color(255,0,0,255)) // the hp bar

-- a simple way to draw rectangles in a row
local n = hp/10
	if n < 11 then
		
		surface.SetDrawColor(255,0,0,255)
		for i=0,n-1 do
			surface.DrawRect((25+(9*i))/800*ScrW(),(600-75)/600*ScrH(),6/800*ScrW(),4/600*ScrH())
		end
		surface.SetDrawColor(100,10,10,255)
		for i=n,9 do
			surface.DrawRect((25+(9*i))/800*ScrW(),(600-75)/600*ScrH(),6/800*ScrW(),4/600*ScrH())
		end
	end

[Greyfoxzb]

Anyone that can shed some insight on this?

[brandonj4]

I'm not a fan of LoL but I ended up creating this for you:
[lua]
local maxhp = 100
hook.Add("HUDPaint", "CustomHPBar", function()
local ply = LocalPlayer()
if !ply:Alive() then return end
local hp = ply:Health()
if hp > maxhp or hp < maxhp then
local num,_ = math.modf(hp/100)
maxhp = ((num)*100)
end
local margin = 20
local height = 15
draw.RoundedBox(0, margin, ScrH()-margin-height, maxhp, height, Color(50,50,50,255))
draw.RoundedBox(0, margin, ScrH()-margin-height, hp, height, Color(255,0,0,255))
if maxhp >= 101 then
local factor = maxhp/100
local divW = 5
for i = 1, factor do
draw.RoundedBox(0, margin+(i*100), ScrH()-margin-height, divW, height, Color(0,0,0,255))
end
end
end)
[/lua]
[IMG]http://puu.sh/27bha[/IMG]

[Greyfoxzb]

[QUOTE=brandonj4;39691976]I'm not a fan of LoL but I ended up creating this for you:
[lua]
local maxhp = 100
hook.Add("HUDPaint", "CustomHPBar", function()
local ply = LocalPlayer()
if !ply:Alive() then return end
local hp = ply:Health()
if hp > maxhp or hp < maxhp then
local num,_ = math.modf(hp/100)
maxhp = ((num)*100)
end
local margin = 20
local height = 15
draw.RoundedBox(0, margin, ScrH()-margin-height, maxhp, height, Color(50,50,50,255))
draw.RoundedBox(0, margin, ScrH()-margin-height, hp, height, Color(255,0,0,255))
if maxhp >= 101 then
local factor = maxhp/100
local divW = 5
for i = 1, factor do
draw.RoundedBox(0, margin+(i*100), ScrH()-margin-height, divW, height, Color(0,0,0,255))
end
end
end)
[/lua]
[/QUOTE]

Thanks man, this will help me dissect what I was doing wrong and hopefully make a nice looking health bar with good functionality . Appreciate it!

Edit: After some tweaking got it to function.

Edit2: I have another question, how would I go about making the width of the hp bar that represents a section of 100 hp smaller based off of the total life or the total amount of 100 sections.

IE when I have 2500 life I don't want ti to go across my screen. I want it to stay relative to an average sized HP bar but with the small sections to indicate how much hp I have. EG league of legends style:
[IMG]http://i.imgur.com/aU4KJKl.jpg[/IMG]

[brandonj4]

You can easily do this yourself, you just have to spend your own time editing the code I gave you.

[Hugabuga]

[url]http://wiki.garrysmod.com/page/Libraries/math/Clamp[/url]

[Greyfoxzb]

[QUOTE=Persious;39694015][url]http://wiki.garrysmod.com/page/Libraries/math/Clamp[/url][/QUOTE]

math.clamp isn't what Im looking for.

EDIT: after tinkering with it a bit and explaining the code to myself I figured out the math to make the code dynamically adjust the dividers and progress the individual bars like League.

Thanks Guys!

[Hugabuga]

Ughh, I also sent the wrong link. I see that I came to enter the clamp page instead of the math library. My bad :P

[0oRichard]

Can't you just use a UV texture, scale it down and repeat it in width? I think that's how LoL does it.