making a HUD multi resolution

[JabbaTheWut]

So I have recently made a HUD and currently people can only see the whole thing if they are using my screen resolution. For example if someone is running in windowed mode they have to make there screen full screen. How can I change this?

[PortalGod]

you can use [img]http://wiki.garrysmod.com/favicon.ico[/img] [url=http://wiki.garrysmod.com/page/Global/ScreenScale]Global.ScreenScale[/url] to get it to scale with screen resolution, or you can use fractions of [img]http://wiki.garrysmod.com/favicon.ico[/img] [url=http://wiki.garrysmod.com/page/Global/ScrW]Global.ScrW[/url] and [img]http://wiki.garrysmod.com/favicon.ico[/img] [url=http://wiki.garrysmod.com/page/Global/ScrH]Global.ScrH[/url]

personally, I'm a little lazy, so I like to make everything look nice on my resolution and then use my own version of screenscale

[lua]
local function sizex(num)
return math.ceil(num * (ScrW()/1920))
end

local function sizey(num)
return math.ceil(num * (ScrH()/1080))
end
[/lua]

[mitterdoo]

make use of ScrW() and ScrH(). they both return the screen's width and height.
[editline].[/editline]
ninja'd again

[JabbaTheWut]

[QUOTE=PortalGod;47091292]you can use [img]http://wiki.garrysmod.com/favicon.ico[/img] [url=http://wiki.garrysmod.com/page/Global/ScreenScale]Global.ScreenScale[/url] to get it to scale with screen resolution, or you can use fractions of [img]http://wiki.garrysmod.com/favicon.ico[/img] [url=http://wiki.garrysmod.com/page/Global/ScrW]Global.ScrW[/url] and [img]http://wiki.garrysmod.com/favicon.ico[/img] [url=http://wiki.garrysmod.com/page/Global/ScrH]Global.ScrH[/url]

personally, I'm a little lazy, so I like to make everything look nice on my resolution and then use my own version of screenscale

[lua]
local function sizex(num)
return math.ceil(num * (ScrW()/1920))
end

local function sizey(num)
return math.ceil(num * (ScrH()/1080))
end
[/lua][/QUOTE]

Well I what I know my screen res. What I am trying to do is make it so the will fit any screen size.

my code:

[lua]

local function Base()

-- outline
draw.RoundedBox(10, ScrW() / 2 - 965 + 2, 0, 400, 61, Color(255, 255, 255, 230))
-- health outline
draw.RoundedBox(10, ScrW() / 2 - 965, 0, 400, 60, Color(0, 0, 0, 250))
-- health bar outline
draw.RoundedBox(4, ScrW() / 2 - 930 , ScrH() - 40 - 1015, 340, 20, Color(255, 255, 255, 250))

local DrawHealth = LocalPlayer():Health() or 0
local EchoHealth = LocalPlayer():Health() or 0

if DrawHealth > 100 then DrawHealth = 100 end
if DrawHealth < 0 then DrawHealth = 0 end

if DrawHealth != 0 then
-- Health Bar
draw.RoundedBox(4, ScrW() / 2 - 930 + 2, ScrH() - 40 - 1016 + 2, (336) * DrawHealth / 100, 17.5, Color(255, 0, 0, 255))
end

draw.DrawText( "Health: "..EchoHealth, "Trebuchet24", ScrW() / 2 - 930 + 2, ScrH() - 40 - 1038 + 2, Color(196, 182, 181, 255))

---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

-- outline
draw.RoundedBox(10, ScrW() / 2 + 562 + 2, 0, 420, 61, Color(255, 255, 255, 230))
-- armor
draw.RoundedBox(10, ScrW() / 2 + 565, 0, 400, 60, Color(0, 0, 0, 250))
-- armor bar outline
draw.RoundedBox(4, ScrW() / 2 + 600 , ScrH() - 40 - 1015, 340, 22, Color(255, 255, 255, 250))

local DrawHealth = LocalPlayer():Armor() or 0
local EchoHealth = LocalPlayer():Armor() or 0

if DrawHealth > 100 then DrawHealth = 100 end
if DrawHealth < 0 then DrawHealth = 0 end

if DrawHealth != 0 then
-- Armor Bar
draw.RoundedBox(4, ScrW() / 2 + 600 + 2, ScrH() - 40 - 1015 + 2, (336) * DrawHealth / 100, 17.5, Color(255, 6, 0, 255))
end

draw.DrawText( "Armor: "..EchoHealth, "Trebuchet24", ScrW() / 2 + 600 + 2, ScrH() - 40 - 1038 + 2, Color(196, 182, 181, 255))

-- job info outline
draw.RoundedBox(10, ScrW() / 2 - 106 + 3, 0, 206, 71, Color(255, 255, 255, 250))
-- Job Info
draw.RoundedBox(10, ScrW() / 2 - 100, 0, 200, 70, Color(0, 0, 0, 250))
-- Job
draw.DrawText( "Job: "..( LocalPlayer():getDarkRPVar( "job" ) or 0 ), "Trebuchet24", ScrW() - 1035 + 2, ScrH () -1078 + 2, Color(196, 182, 181, 255))
-- Salary
draw.DrawText ( "Salary: $" .. ( LocalPlayer( ):getDarkRPVar( "salary" ) or 0 ), "Trebuchet24", ScrW() - 1035 + 2, ScrH () -1040 + 2, Color(196, 182, 181, 255))

-- Playerinfo Outline
draw.RoundedBox(10, ScrW() / 2 - 968 + 1, ScrH() - 40 - 78 + 2, 140, 85, Color(255, 255, 255, 250))
-- Playerinfo
draw.RoundedBox(10, ScrW() / 2 - 968, ScrH() - 40 - 75, 140, 83, Color(0, 0, 0, 250))
-- Print the rank
draw.DrawText(LocalPlayer():GetUserGroup(), "Trebuchet24", ScrW() / 2 - 950, ScrH() - 40 - 75, Color(196, 182, 181, 255))
-- Print your wallet amount
draw.DrawText( "$".. ( LocalPlayer():getDarkRPVar( "money" ) or 0 ), "Trebuchet24", ScrW() / 2 - 950, ScrH() - 19 - 75, Color(196, 182, 181, 255))
-- Nick Name
draw.DrawText( LocalPlayer():Nick(), "Trebuchet24", ScrW() / 2 - 950, ScrH() + 3 - 75, Color(196, 182, 181, 255))

end

[/lua]

[aStonedPenguin]

Don't subtract a static number from ScrW and ScrH as they will change. Additionally you should utilize the xAlign parameter and you can also use draw.SimpleText which returns text size so you can then use that to position the next text.

[Acecool]

A few examples for your:

[url]https://dl.dropboxusercontent.com/u/26074909/tutoring/hud/proper_hud_creation.lua.html[/url]

[url]https://dl.dropboxusercontent.com/u/26074909/tutoring/hud/understanding_hardcoding_of_screensizes.lua.html[/url]

[url]https://dl.dropboxusercontent.com/u/26074909/tutoring/hud/basic_healthbar.lua.html[/url]

Remove .html for .lua

[JabbaTheWut]

Thank you guys! All the info here has been very helpful!

[RedXVIII]

[QUOTE=Acecool;47091347]A few examples for your:

[url]https://dl.dropboxusercontent.com/u/26074909/tutoring/hud/proper_hud_creation.lua.html[/url]

[url]https://dl.dropboxusercontent.com/u/26074909/tutoring/hud/understanding_hardcoding_of_screensizes.lua.html[/url]

[url]https://dl.dropboxusercontent.com/u/26074909/tutoring/hud/basic_healthbar.lua.html[/url]

Remove .html for .lua[/QUOTE]

These are some great examples, thank you for sharing this information.

[ExtReMLapin]

Feel free to check [URL="https://github.com/ExtReMLapin/GryMod/blob/master/lua/autorun/client/cl_hud.lua"]that[/URL]

Eyefinity support, (3 monitors) multi resolutions and format (16:9 ; 4:3 ...) support.