Scrh/Scrw questions

So I’ve been working on a hud. I had my friend join to see it, then realized it didn’t work on every resolution. I looked up the ScrH and ScrW uses and they make 0 sense to me. Can someone explain how I use them? Thanks in advance.

ScrH returns the screen hight and ScrW returns the screen width. What’s not to understand?

I don’t understand how to input it into a draw.RoundedBox. I’m mainly wondering how I do the values

[editline]8th September 2017[/editline]

Although, after getting a headache looking all this up, I’m starting to grasp it.

You just want to stop thinking in terms of “this box is 400 pixels wide” and start thinking in terms of “i want this box to take up 10% of the screen and be 2% in from the edge”. Knowing how many pixels wide and tall the screen is will let you do the math.

Ok, so does ScrW start on the left or right side. Same with ScrH, top or bottom?

[editline]8th September 2017[/editline]

And, if it’s percentages, how would I make rectangles in specific spots?

Does it matter if a ruler is turned upward or downward? The distance is always the same.

ScrW is equal to the distance from the screen’s left to the screen’s right, but if it were the other way round, it’d be identical anyway.
ScrH is equal to the distance from the screen’s top to the screen’s bottom, but if it were the other way round, it’d be identical anyway.

Coordinates are measured from the top left of the screen.

The thing is, I can only get the box along the edges. I’m not understanding how to get it in a certain spot if it’s not pixels.

to get an x coordinate 2% in from the left:



x = ScrW()  * 0.02


to get it 2% in from the right:



x = ScrW() * 0.98


etc.

Can I see what your HUD is meant to look like? Maybe it’s not scalable

Sure, 1 sec.

[editline]8th September 2017[/editline]

First One: Where I’m at

Second one: What I want it to look like.

If it’s just the text that’s the problem, then just set its position to the end of the bars. If you post some code I could try.

The text isn’t the issue yet. I was mainly wondering about the rectangles. I can’t seem to move them away from the edge.

Just subtract something from the Y coordinate and it should work?

Add something to the X if you want it to move that way as well

The thing is, you guys are talking about percentages. I have no clue how I go about subtracting with ScrW or ScrH

[editline]8th September 2017[/editline]


 local function SimpleFrame()
  draw.RoundedBox( 0, 35, 1036, 400, 30, hudcolors.background_health_armor_bar_background ) --White background
  draw.RoundedBox( 3, 30, 30, 400, 150, hudcolors.background_health_armor_bar_background ) --Background behind avatar image
  draw.RoundedBox( 0, 35, 996, 400, 30, hudcolors.background_health_armor_bar_background ) --White background

end 

and


  
  draw.RoundedBox( 0, 42, 1004, hw, 15, hudcolors.health_bar ) -- Health Bar
  draw.RoundedBox( 0, 42, 1044, aw, 15, hudcolors.armor_bar) -- Armor Bar


This is what I’m using to make those boxes.

Can you explain where I fill in the Scr’s

What are hw and aw?


 
  local hw = playerHealth / maxHealth * maxWidth
  local aw = playerArmor / 100 * maxWidth


Before you posted your code, I tried to make a remake of the HUD in the image. Maybe this will give you an idea:



surface.CreateFont( "HUDFont", { font = "Trebuchet MS", size = 20 } )

hook.Add( "HUDPaint", "blah", function()

	surface.SetDrawColor( 0, 0, 0, 120 )
	surface.DrawRect( 0, ScrH() * 0.72, ScrW() * 0.35, ScrH() * 0.05 )
	surface.DrawRect( 0, ScrH() * 0.8, ScrW() * 0.35, ScrH() * 0.05 )

	surface.SetFont( "HUDFont" )

	local armor = LocalPlayer():Armor() / 100
	surface.SetDrawColor( 0, 0, 150 )
	surface.DrawRect( 0, ScrH() * 0.73, ScrW() * 0.343 * armor, ScrH() * 0.03 )

	surface.SetTextColor( 0, 0, 150 )
	surface.SetTextPos( ScrW() * 0.35, ScrH() * 0.73 )
	surface.DrawText( armor * 100 .. "%" )

	local health = LocalPlayer():Health() / LocalPlayer():GetMaxHealth()
	surface.SetDrawColor( 150, 0, 0 )
	surface.DrawRect( 0, ScrH() * 0.81, ScrW() * 0.343 * health, ScrH() * 0.03 )

	surface.SetTextColor( 150, 0, 0 )
	surface.SetTextPos( ScrW() * 0.35, ScrH() * 0.81 )
	surface.DrawText( health * 100 .. "%" )

end )


[editline]9th September 2017[/editline]

This is a pretty crappy example though. For my old HUD, I never used ScrW() or ScrH(). I need to update it.

I put yours in to see it, that’s basically what I’m looking for except I need the bars smaller. How would I edit my code do you think. And same with the text.

I cleaned up my crappy example, and now it’s super easy to specify whatever width and height and other coordinates you want.



surface.CreateFont( "HUDFont", { font = "Trebuchet MS", size = 15 } )

local function DrawHUDRectangle( x, y, w, h, bg, fg, innerW )

	surface.SetDrawColor( bg )
	surface.DrawRect( x, y, w, h )
	surface.SetDrawColor( fg )
	surface.DrawRect( x, y + h / 4, innerW * ( w - h / 4 ), h / 2 )

	draw.SimpleText( innerW * 100 .. "%", "HUDFont", x + w, y + h / 2, fg, TEXT_ALIGN_LEFT, TEXT_ALIGN_CENTER )

end

hook.Add( "HUDPaint", "blah", function()

	local background = Color( 0, 0, 0, 120 )

	local armorCol = Color( 0, 0, 150 )
	local armor = LocalPlayer():Armor() / 100
	DrawHUDRectangle( 0, ScrH() * 0.8, ScrW() * 0.3, ScrH() * 0.03, background, armorCol, armor )

	local healthCol = Color( 150, 0, 0 )
	local health = LocalPlayer():Health() / LocalPlayer():GetMaxHealth()
	DrawHUDRectangle( 0, ScrH() * 0.85, ScrW() * 0.3, ScrH() * 0.03, background, healthCol, health )

end )


Just change the multiplier in any of the DrawHUDRectangle parts, and everything still lines up perfectly.

Thank you so much. This was my first time trying things from scratch and I got stumped at this part.

[editline]8th September 2017[/editline]

I got one last question, how do I go about adding more boxes to this? Every thing I’m trying isn’t working. I’m not familiar with these hooks.