Making an HUD

[tzahush]

Hey guys.
I've made an HUD but for some reason i can only see it once i press tab.
This is my code:

hook.Add( "HUDPaint", "SummonsHUD", function()-- This is the hook format: name, identifier, then function
	surface.SetMaterial( mat )
	surface.DrawTexturedRect( 200, 800, 500, 180 )
end )

[boxama]

Show all of your code. How are you setting the variable "mat"?

[tzahush]

Never mind i think its just on my single game.
But i got another question.
I've made a HUD and its fine.
But it only works good on aspect ratio 4:3.
How do i make it compliable with all of the aspect ratios?

[freakyy]

Is your hud in an image?
If so: This is not a good idea. Either you create your HUD using the drawing functions, or you spread it in multiple images and place them relatively.

[boxama]

Not quite sure of the best method, but what I went for was...
Position EVERYTHING relative to ScrW() and ScrH() or statically.
Size EVERYTHING statically.

[tzahush]

ok, this is my code for drawing.
how am i suppose to actully do that?
And yes im using an image with texts.

local mat = Material( "images/hud/hud.png" )
hook.Add( "HUDPaint", "SummonsHUD", function()-- This is the hook format: name, identifier, then function
	surface.SetMaterial( mat )
	surface.DrawTexturedRect( 30, 800, 600, 220 )
	draw.SimpleText(LocalPlayer().DarkRPVars.job,"healthf", 115,ScrH() - 98, Color(120,0,0), TEXT_ALIGN_LEFT, TEXT_ALIGN_TOP)
	draw.SimpleText("$" ..LocalPlayer().DarkRPVars.salary,"healthf", 138,ScrH() - 48, Color(120,0,0), TEXT_ALIGN_LEFT, TEXT_ALIGN_TOP)
	draw.SimpleText("$" ..LocalPlayer().DarkRPVars.money,"healthf", 141,ScrH() - 75, Color(120,0,0), TEXT_ALIGN_LEFT, TEXT_ALIGN_TOP)

	local Health = LocalPlayer():Health()
	local DrawHealth = math.Min(Health / GAMEMODE.Config.startinghealth, 1)
	if Health > 0 then
		draw.RoundedBox(2,85,ScrH() - 154 , 134	 * DrawHealth , 25 ,Color(150,0,0,255))
		end
		if Health <= 0 then
				draw.DrawText("0%", "healthf", 178 , ScrH() - 174, Color(205,0,0,255))
				else
				draw.DrawText(Health.. "%", "healthf", 178, ScrH() - 173, Color(205,0,0,255))
				end
					-- Armor --
	local Armor = LocalPlayer():Armor()
	if Armor > 0 then
	draw.RoundedBox(2,232,ScrH() - 155, 136 * Armor / 100 , 27 ,Color(0,0,120,255))
	end
	if Armor <= 0 then
		draw.DrawText("0%", "healthf", 325, ScrH() - 173, Color(0,0,120,255))
		else
			draw.DrawText(Armor.. "%", "healthf", 325, ScrH() - 173, Color(0,0,120,255))
	end
end )

[Acecool]

One of the easiest ways to ensure the HUD sizes "correctly" is to set a modifier. That is, you set a variable for the screen-resolution that you designed the HUD in. Then, a very simple division is performed to get a "modifier", or something you multiply the x/y w/h elements of the HUD with so it scales based on size.

Here's an example of that: [url]https://dl.dropboxusercontent.com/u/26074909/tutoring/vgui/understanding_hardcoding_of_screensizes.lua.html[/url]

Edit: When using an image, you may scale it and it could turn out not so good. I recommend for scaling images you only scale along 1 axis such as width, and then do a relative scale for height so it keeps the proper image aspect ratio.

[tzahush]

I can do it with desiging it for all 3 aspect ratios?
like check the aspect ratio instead, and make it good for each and every one?
By the way in ur example you have just done it for one resoltuion, at least thats why i understood :P.

[SarahKerrigan]

[QUOTE=tzahush;44728192]I can do it with desiging it for all 3 aspect ratios?
like check the aspect ratio instead, and make it good for each and every one?
By the way in ur example you have just done it for one resoltuion, at least thats why i understood :P.[/QUOTE]

Noh his example is very good.
Lets say we do

local wMod = ScrW() / 2000

200*wMod

If your screen width is 2000 ScrW() will return 2000 and therefore 2000 / 2000 is 1.
So 200*1 = 200
If your screen width only way 1000 ScrW() would return 1000 and therefore 1000 / 2000 is 0.5
So 200*0.5 = 100.

Simple and even easier than ScrW() and ScrH() to use

[tzahush]

[QUOTE=SarahKerrigan;44728465]Noh his example is very good.
Lets say we do

local wMod = ScrW() / 2000

200*wMod

If your screen width is 2000 ScrW() will return 2000 and therefore 2000 / 2000 is 1.
So 200*1 = 200
If your screen width only way 1000 ScrW() would return 1000 and therefore 1000 / 2000 is 0.5
So 200*0.5 = 100.

Simple and even easier than ScrW() and ScrH() to use[/QUOTE]
ok and then use them as variables in my places for x and y i guess, right?

[SarahKerrigan]

[QUOTE=tzahush;44728547]ok and then use them as variables in my places for x and y i guess, right?[/QUOTE]

local xScreenRes = 1920
local yScreenRes = 1080
local wMod = ScrW() / xScreenRes
local hMod = ScrH() / yScreenRes

You shall use wMod in x and hMod in y.
like

draw.RoundedBox(0, 10*wMod, 5*hMod, 50*wMod, 100*hMod, Color(166,0,0,255))