Making vertical HP bar go decrease at top instead of bottom

What I mean is this is my code
[lua]draw.RoundedBox(0, 19, ScrH() - 209, 82, 150, Color(0,0,0,255))
draw.RoundedBox(0, 20, ScrH() - 210, 80, 150, Color(255,255,255,255))
draw.RoundedBox(0, 20, ScrH() - 210, 80, health * 1.5, Color(255,0,0,255))[/lua]
For the life of me I CANNOT find how to make it go “upsidedown”. What I mean is instead of the bar being fully red at 100 hp and there being white at the BOTTOM of the HP area at 90 hp, I want the white to be at the TOP and the red to go decrease at the top instead of the bottom. Hopefully you know what I mean. I tried a lot of things but it won’t work.

I’m thinking you would have to lower the RoundedBox and decrease the height at the same time.

Im a nub tho

[lua]draw.RoundedBox(0, 20, ScrH() - 210 + (health * 1.5), 80, health * 1.5, Color(255,0,0,255))[/lua]
Untested but it should do what you want.

Pretty much, as the box shrinks it will also move it down the same amount.

highvoltage, it’s not working. What happens is it starts fully below the healthbar area and then as health goes down it starts to get smaller on both sides and shrink into the middle… wat

[editline]why do i need to put text here for it to work lol[/editline]
Modified the code to make it pixel perfect with the bar area…
[lua]draw.RoundedBox(0, 20, ScrH() - 360 + (health * 1.5), 80, health * 1.5, Color(255,0,0,255))[/lua]
When getting hurt, it goes up. and if it where going down with that amount, it’d be 2x as much as it should. It’s being weird.

Wait, so you want a box, that would go down when losing health?



draw.RoundedBox(0, 19, ScrH() - 209, 82, 150, Color(0,0,0,255))
draw.RoundedBox(0, 20, ScrH() - 210, 80, 150, Color(255,255,255,255))
draw.RoundedBox(0, 20, ScrH() - 60 - ply:Health() * 1.5 , 80, ply:Health() * 1.5, Color(255,0,0,255))

also make it look a little better if you do this



health = Lerp(0.05, health, ply:Health())
draw.RoundedBox(0, 19, ScrH() - 209, 82, 150, Color(0,0,0,255))
draw.RoundedBox(0, 20, ScrH() - 210, 80, 150, Color(255,255,255,255))
draw.RoundedBox(0, 20, ScrH() - 60 - health * 1.5 , 80, health * 1.5, Color(255,0,0,255))

So i just got this made up, it reverse the x,y positions of the roundedBox.


	function surface.DrawHealthBox( x, y, w, h, col)
local t = {
{ x = x, y = y},
{ x = x+w, y = y},
{ x = x+w, y = y-h},
{ x = x, y = y-h}
}


surface.SetDrawColor(col)
surface.DrawPoly(t)
end

You make this a function outside of your draw hook

then place it inside your draw hook like so



Health = 0
local function hudPaint()


 Health = math.min(100, (Health == LocalPlayer():Health() and Health) or Lerp(0.1, Health, LocalPlayer():Health()))
	local DrawHealth = math.Min(Health / GAMEMODE.Config.startinghealth, 1)
	
	
surface.DrawHealthBox( ScrW()/2, ScrH()/2,100,100 * DrawHealth, Color(255,255,255,255))


EDIT:
Position it to wherever you wish using




surface.DrawHealthBox( x, y, w, h, col)



x and y are ofcourse the POS of bottom left corner, x is how far across you want it, y is how far up.

PM me if you have an issue.




[ERROR] gamemodes/payday/gamemode/cl_init.lua:322: attempt to index field 'Config' (a nil value)
  1. fn - gamemodes/payday/gamemode/cl_init.lua:322
   2. unknown - addons/ulib/lua/ulib/shared/hook.lua:183


[lua]function surface.DrawHealthBox( x, y, w, h, col)
local t = {
{ x = x, y = y},
{ x = x+w, y = y},
{ x = x+w, y = y-h},
{ x = x, y = y-h}
}

surface.SetDrawColor(col)
surface.DrawPoly(t)
end

hook.Add(“HUDPaint”, “PaintHealth”, function()
local health = LocalPlayer():Health()
local shield = LocalPlayer():Armor()
draw.RoundedBox(0, 19, ScrH() - 211, 82, 152, Color(0,0,0,255))
draw.RoundedBox(0, 20, ScrH() - 210, 80, 150, Color(255,255,255,255))
Health = 0

Health = math.min(100, (Health == LocalPlayer():Health() and Health) or Lerp(0.1, Health, LocalPlayer():Health()))
local DrawHealth = math.Min(Health / GAMEMODE.Config.startinghealth, 1)

surface.DrawHealthBox( ScrW()/2, ScrH()/2,100,100 * DrawHealth, Color(255,255,255,255))

draw.SimpleText(shield … “%”, “coolvetica2”, 33, ScrH() - 15 - 40, Color(255,255,255,255))
end)[/lua]

Mine should work.

You arent using DarkRP are you, my fault

Change


	local DrawHealth = math.Min(Health / GAMEMODE.Config.startinghealth, 1)

to


	local DrawHealth = math.Min(Health / 100, 1)

There are “enough” examples, but I’ll throw a few into the mix. When developing, try to simplify your problem… Simplify the logic as much as possible. Here are some examples where I showed a few people how to simplify their math to make it much easier to understand in order to create a tilted rectangle poly ( if you read the original thread, you’ll see why )… Additionally, there is a bar that drains from left to right instead of right to left. And a few things on HUD Creation and sizing…

Proper HUD Hooks / creation
https://dl.dropboxusercontent.com/u/26074909/tutoring/vgui/proper_hud_creation.lua.html

Hardcoding screensize, and making it work for other resolutions
https://dl.dropboxusercontent.com/u/26074909/tutoring/vgui/understanding_hardcoding_of_screensizes.lua.html

Rect Expand left instead of right
https://dl.dropboxusercontent.com/u/26074909/tutoring/vgui/draw_roundedbox_expand_left_instead_of_right.lua.html

Basics of creating poly shapes
https://dl.dropboxusercontent.com/u/26074909/tutoring/poly/creating_shapes_using_poly.lua.html

Tilted rect poly
https://dl.dropboxusercontent.com/u/26074909/tutoring/poly/tilted_rectangle_poly_as_health_meter.lua.html

Another Tilted rect poly
https://dl.dropboxusercontent.com/u/26074909/tutoring/poly/another_tilted_health_bar.lua.html

The basic thing for you to understand is that your x and y should be fixed, your w should be too. y it the only thing that should change… You’d just convert your size into a float ( 0-1 ) and use it as a modifier against the maximum size the bar can be ( how it fits into your hud / layout ) by using a simple equation:


// ( HP / MAX_HP ) = HP_FLOAT_MODIFIER * MAX_HP_BAR_HEIGHT_INT = proper for scaling FIXED struct.. You can just apply a modifier to it from the Hardcoding screensize tut to scale it for resolutions..

local _y = ( LocalPlayer( ):Health( ) / LocalPlayer( ):GetMaxHealth( ) ) * MAX_HP_BAR_HEIGHT;

Now, for the other proplem… You want to make a gradient if I read correctly where the top of the bar is red, and the bottom is white? You’d use materials/vgui or phoenix or whatever/ gradient up/down.vtf/vmt

Using that, you can have it fade from one color to the other.

No, I don’t want a gradient. Think about a health bar. You would usually think it to be red, then the red would be removed from the right side of the bar and replaced with for example black. Then eventually, all health gone. Well, I want a vertical version of that, but when I tried doing it, instead of the red filling the area and the black coming from the top, the black comes from the bottom (or should I say the red is erased from the bottom) instead of the top. What I want is for it to be erased from the top.

snip for bad reading

From what I understand, you’re looking for: https://dl.dropboxusercontent.com/u/26074909/tutoring/vgui/draw_roundedbox_expand_left_instead_of_right.lua.html except rotated 90 degrees… ( instead of left to right as in the example, you’re looking for top to bottom, with a filler )

So, I wrote this tutorial up for you ( X-Axis is LEFT-TO-RIGHT, Y-Axis is TOP-TO-BOTTOM in the case of 2D / HUD drawing ):
https://dl.dropboxusercontent.com/u/26074909/tutoring/vgui/draw_roundedbox_shrink_down_instead_of_left.lua.html

He still isnt using code suggested by me. Which worked…

You would have to decrease the height and move the bar down at the same rate. Also clamp your variables to prevent variables

^^ i made a poly that reverses the x and y pos to the bottom. And simply drops so you dont have to change positioning.

My apologies, I forgot something simple in my code:
[lua]draw.RoundedBox(0, 20, ScrH() - 210 + (health * -1.5), 80, health * 1.5, Color(255,0,0,255))[/lua]
I even tested it in game.

That’s because using surface.DrawPoly for a rectangle is a bit obtuse