HP Bar Scaling Issues

[Fortune_.]

So I am making a hp bar with surface.DrawPoly(), the only issue is, it won't scale right.

Example:
[URL=http://s74.photobucket.com/user/Fortune117/media/brokenhud_zpsfa69980c.png.html][IMG]http://i74.photobucket.com/albums/i273/Fortune117/brokenhud_zpsfa69980c.png[/IMG][/URL]

[URL=http://s74.photobucket.com/user/Fortune117/media/BrokenHud2_zpsc4b16cfd.png.html][IMG]http://i74.photobucket.com/albums/i273/Fortune117/BrokenHud2_zpsc4b16cfd.png[/IMG][/URL]

Code:

surface.SetDrawColor(Color(0,255,55,255))

local barcalc = (100/health)

local hpbar =
{
	{ x = (100*(health/100))+barcalc, y = ScrH()-15 },
	{ x = (125*(health/100))+barcalc, y = ScrH()-40 },
	{ x = (300*(health/100))+barcalc, y = ScrH()-40 },
	{ x = (275*(health/100))+barcalc, y = ScrH()-15}
	
	}
	
	
surface.DrawPoly( hpbar )

I have been working on this for a while and can't seem to figure it out. Anyone know the solution?

[Rubat]

Don't move the left Xes depending on health, only move the right ones. ( Top and bottom ones in your code as far as I can tell )

[Fortune_.]

If I do that, the positions become less than the static ones.

By that I mean that the health bar actually reverses.

[Rubat]

Adjust the health ratios.

[Acecool]

What he's talking about is about the importance of using modifiers without affecting positioning. A modifier would be a float / 0-1 number. To do this for health, it's simply health / 100. Then you'll have a 0-1 number which can be used to modify the width of the total bar-width based directly on the fraction of health remaining.

It would work something like this:
[lua]hook.Add("HUDPaint", "MyHudExample", function( )
local _p = LocalPlayer( );
if ( !IsValid( _p ) ) then return; end

local _health = _p:Health( );
local _healthMod = _health / 100;
// Separated out for the example

// Our bar, we want to be 250 units wide when 100 health, 125 units long at 50 hp, etc...
// By using a 0-1 modifier, we can very easily accomplish this
local _w = 250 * _healthMod;
local _h = 10; // 10 units high

// Center of screen without offsetting for width, to offset for width we'd do ( ScrW( ) / 2 ) - ( _w / 2 )
local _x = ScrW( ) / 2;
local _y = ScrH( ) / 2;

// Curvature on each corner
local _cornerDepth = 0;

// Color of the box
local _color = Color( 50, 50, 50, 255 );

// Draw a test box...
draw.RoundedBox( _cornerDepth, _x, _y, _w, _h, _color );
end );[/lua]

For your example with the poly, you shouldn't be subtracting that much from the top-right and bottom-right points.

Example DrawRect which will work with simplified math:
[lua]//
// Simple Rectangle Poly function with easier x, y, w, and h
//
function MakeRectPoly( _x, _y, _w, _h )
// The creation of the Poly without texture support
local _poly = {
{ x = _x, y = _y, u = 0, v = 0 }, // Top Left
{ x = ( _x + _w ), y = _y, u = 0, v = 0 }, // Top Right
{ x = ( _x + _w ), y = ( _y + _h ), u = 0, v = 0 }, // Bottom Right
{ x = _x, y = ( _y + _h ), u = 0, v = 0 }, // Bottom Left
};

return _poly;
end[/lua]

So, with the above poly function with an incorporated bit of code to support the way you TILT the rect:

[lua]//
// Simple Rectangle Poly function with easier x, y, w, and h
//
function MakeRectPoly( _x, _y, _w, _h, _tilt )
// The creation of the Poly without texture support
local _poly = {
{ x = ( _x + _tilt ), y = _y, u = 0, v = 0 }, // Top Left
{ x = ( _x + _w + _tilt ), y = _y, u = 0, v = 0 }, // Top Right
{ x = ( _x + _w ), y = ( _y + _h ), u = 0, v = 0 }, // Bottom Right
{ x = _x, y = ( _y + _h ), u = 0, v = 0 }, // Bottom Left
};

return _poly;
end

//
// Make a poly hp bar
//
hook.Add("HUDPaint", "MyHudExample", function( )
local _p = LocalPlayer( );
if ( !IsValid( _p ) ) then return; end

local _health = _p:Health( );
local _healthMod = _health / 100;
// Separated out for the example

// Our bar, we want to be 250 units wide when 100 health, 125 units long at 50 hp, etc...
// By using a 0-1 modifier, we can very easily accomplish this
local _w = 250 * _healthMod;
local _h = 10; // 10 units high

// Center of screen without offsetting for width, to offset for width we'd do ( ScrW( ) / 2 ) - ( _w / 2 )
local _x = ScrW( ) / 2;
local _y = ScrH( ) / 2;

// Color of the box
local _color = Color( 50, 50, 50, 255 );

// Tilt, how far we want the top moved over to the right; in this case, let's make it uniform with height
local _tilt = _h;

// Draw a test box...
surface.SetDrawColor( _color );
MakeRectPoly( _x, _y, _w, _h, _tilt );
end );[/lua]

[Fortune_.]

[QUOTE=Acecool;44275090]What he's talking about is about the importance of using modifiers without affecting positioning. A modifier would be a float / 0-1 number. To do this for health, it's simply health / 100. Then you'll have a 0-1 number which can be used to modify the width of the total bar-width based directly on the fraction of health remaining.

It would work something like this:
[lua]hook.Add("HUDPaint", "MyHudExample", function( )
local _p = LocalPlayer( );
if ( !IsValid( _p ) ) then return; end

local _health = _p:Health( );
local _healthMod = _health / 100;
// Separated out for the example

// Our bar, we want to be 250 units wide when 100 health, 125 units long at 50 hp, etc...
// By using a 0-1 modifier, we can very easily accomplish this
local _w = 250 * _healthMod;
local _h = 10; // 10 units high

// Center of screen without offsetting for width, to offset for width we'd do ( ScrW( ) / 2 ) - ( _w / 2 )
local _x = ScrW( ) / 2;
local _y = ScrH( ) / 2;

// Curvature on each corner
local _cornerDepth = 0;

// Color of the box
local _color = Color( 50, 50, 50, 255 );

// Draw a test box...
draw.RoundedBox( _cornerDepth, _x, _y, _w, _h, _color );
end );[/lua]

For your example with the poly, you shouldn't be subtracting that much from the top-right and bottom-right points.

Example DrawRect which will work with simplified math:
[lua]//
// Simple Rectangle Poly function with easier x, y, w, and h
//
function MakeRectPoly( _x, _y, _w, _h )
// The creation of the Poly without texture support
local _poly = {
{ x = _x, y = _y, u = 0, v = 0 }, // Top Left
{ x = ( _x + _w ), y = _y, u = 0, v = 0 }, // Top Right
{ x = ( _x + _w ), y = ( _y + _h ), u = 0, v = 0 }, // Bottom Right
{ x = _x, y = ( _y + _h ), u = 0, v = 0 }, // Bottom Left
};

return _poly;
end[/lua]

So, with the above poly function with an incorporated bit of code to support the way you TILT the rect:

[lua]//
// Simple Rectangle Poly function with easier x, y, w, and h
//
function MakeRectPoly( _x, _y, _w, _h, _tilt )
// The creation of the Poly without texture support
local _poly = {
{ x = ( _x + _tilt ), y = _y, u = 0, v = 0 }, // Top Left
{ x = ( _x + _w + _tilt ), y = _y, u = 0, v = 0 }, // Top Right
{ x = ( _x + _w ), y = ( _y + _h ), u = 0, v = 0 }, // Bottom Right
{ x = _x, y = ( _y + _h ), u = 0, v = 0 }, // Bottom Left
};

return _poly;
end

//
// Make a poly hp bar
//
hook.Add("HUDPaint", "MyHudExample", function( )
local _p = LocalPlayer( );
if ( !IsValid( _p ) ) then return; end

local _health = _p:Health( );
local _healthMod = _health / 100;
// Separated out for the example

// Our bar, we want to be 250 units wide when 100 health, 125 units long at 50 hp, etc...
// By using a 0-1 modifier, we can very easily accomplish this
local _w = 250 * _healthMod;
local _h = 10; // 10 units high

// Center of screen without offsetting for width, to offset for width we'd do ( ScrW( ) / 2 ) - ( _w / 2 )
local _x = ScrW( ) / 2;
local _y = ScrH( ) / 2;

// Color of the box
local _color = Color( 50, 50, 50, 255 );

// Tilt, how far we want the top moved over to the right; in this case, let's make it uniform with height
local _tilt = _h;

// Draw a test box...
surface.SetDrawColor( _color );
MakeRectPoly( _x, _y, _w, _h, _tilt );
end );[/lua][/QUOTE]
Thanks acecool :D, once again your a life saver.