DarkRP Hud not fitting all resolutions

[Borris_Squad]

SO basicly people who join my server at a resolution below 1920X1080 Complain they cant see the hud. One person says make it dynamic. I dont know what to do. :? Thanks

[TheFreeman193]

This means scaling your HUD with the screen width/height. A good place to start is looking at [url=http://wiki.garrysmod.com/page/Global/ScrW]ScrW[/url] and [url=http://wiki.garrysmod.com/page/Global/Scrh]ScrH[/url].

[Borris_Squad]

[QUOTE=thefreeman193;47238645]This means scaling your HUD with the screen width/height. A good place to start is looking at [url=http://wiki.garrysmod.com/page/Global/ScrW]ScrW[/url] and [url=http://wiki.garrysmod.com/page/Global/Scrh]ScrH[/url].[/QUOTE] But i have made the hud, just people cant see on resolutions lower than 720p

[Netheous]

Use ScrW() and ScrH() for positioning.

Basically, all you have to know is:

ScrW() starts at right edge, so if you do ScrW() - 200 it'll be 200 px from right edge
ScrH() starts at the bottom, so if you do ScrH() - 500 it'll be 500 px from bottom edge.

When positioning stuff closer to top or left edges, you don't need and shouldn't use ScrW() or ScrH()

[TheFreeman193]

[QUOTE=Borris_Squad;47238652]But i have made the hud, just people cant see on resolutions lower than 720p[/QUOTE]

Have you hardcoded the size/position of the HUD elements?

[Borris_Squad]

Tomorrow I will paste the code

[Acecool]

Do something similar to what Netheous says; but not quite... If someone with resolution of 800x600 joins but you code something to be W - 800, then it'll likely not be seen. It is unlikely someone with that resolution will join, but you can hard-code your x, y, w, and h values and apply modifiers to them; or apply modifies to the W( ) - x value to ensure it'll scale.

I do have an example ( although the y position is flawed in the health-bar example if I recall correctly.

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

Understanding how to hard-code the size of your hud, and have it scale by using modifiers:
[url]https://dl.dropboxusercontent.com/u/26074909/tutoring/hud/understanding_hardcoding_of_screensizes.lua.html[/url]

Basic Health bar with and without modifiers.
[url]https://dl.dropboxusercontent.com/u/26074909/tutoring/hud/basic_healthbar.lua.html[/url]

[robbert^^]

It's simple . ScrW () returns the width of the screen and ScrH () returns the height. So, if you'd wanted 10% of the width:
[lua]
Scrw () * 0.10
[/lua]

This will scale on all screens ( if you did ALL the sizes like this aswell. ). Here is a better example:

[lua]
local w, h = ScrW (), ScrH () \\ Lets get these values only once shall we?

function GM:HUDPaint ()
surface. SimpleText ( "I scale!", "default", ( w - ( w * 0.10 ) ), ( h * 0.50 ), Color ( 255, 255, 255, 255 ) )
end
[/lua]

it's alwys better to localize your calculations outside the function either with a bunch of different names or a table but I'm typing this on a phone so you'll have to figure that out.

[MeepDarknessM]

[QUOTE=robbert^^;47241648]
[lua]
local w, h = ScrW (), ScrH () \\ Lets get these values only once shall we?
[/lua][/QUOTE]

and then i change my screen size...

[robbert^^]

their problem? sorry but you can just rejoin if you changed it in-game. but if you insist doing something unnecessary you could make a check somewhere. up to him.

[MeepDarknessM]

[QUOTE=robbert^^;47241663]their problem? sorry but you can just rejoin if you changed it in-game. but if you insist doing something unnecessary you could make a check somewhere. up to him.[/QUOTE]

I actually wrote a solution for this right when i saw your post but lua's limitations made it impossible to complete.. you can do something like this but you can't compare the ScrW() returns and such.. you could probably do ScrW() * 1 > aaaa though..

[url]http://pastebin.com/NbVpwREt[/url]

[robbert^^]

Well, you're doing stuff in a function that gets called allot. i normally avoid doing things like checks in there unless i absolutely have to.

Wasn't there a function/hook called 'OnResolutionChanged' or something? If so, you could do the check there. thus something like this:
[lua]
hook.Add( 'OnResolutionChanged', 'Resize', function()
if ( w != ScrW() or h != ScrH() ) then
w, h = ScrW(), ScrH()
end
end )
[/lua]

If that function/hook exists then it would be perfect since it should only be called once the resolution changes, so you wouldn't need to check it somewhere else.

[Acecool]

I wrote some code for PlayerChangedResolution which monitored the values in HUDPaint and it'd call the hook with old and new values when the resolution did change.

Willox posted an alternative that is more efficient because it executes once on change; he also used hook.Run instead of hook.Call - hook.Run tries to run all possible hooks with that name whilst hook.Call typically checks to see if the main functions exists first.

Here:

//
// Willox
//
hook.Add( "Initialize", "Resolution Change", function( )
	if ( ResolutionChangedHookLogic ) then return; end
	ResolutionChangedHookLogic = vgui.CreateFromTable( {
		Base = "Panel";
		PerformLayout = function( )
			hook.Run( "ResolutionChanged", ScrW( ), ScrH( ) );
		end;
	} ):ParentToHUD( );
end );

[meharryp]

[url=http://facepunch.com/showthread.php?t=1453691&p=47236425&viewfull=1#post47236425]This is what he's doing wrong.[/url] Instead of doing ScrW() - 2000 or any other big value for positioning, just hardcode it.

[Borris_Squad]

Just gonna past my code

 local function Base()
    
	
    draw.RoundedBox(0, ScrW() - 2000 - -90, ScrH () - 130 - 10, 350, 125, Color(0, 0, 0, 200)) --- Hud Base
	
	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
	    draw.RoundedBox(0, ScrW() - 1640 - -90, ScrH () - 22 - 10, (130 + 0) * DrawHealth / 100, 15.5, Color(255, 0, 0, 250)) --- Health
	end

	
		
	draw.RoundedBox(0, ScrW() - 1640 - -90, ScrH () - 22.5 - 11.5, 130.5, 19.5, Color(0, 0, 0, 250)) --- Black Outline Health
	
	draw.SimpleText("Health: ".. EchoHealth, "TargetID", ScrW() - 1640 - -110, ScrH() -22 - 12, Color(255,255,255,255)) --- Health Text
	
	local DrawHealth = math.ceil(LocalPlayer():getDarkRPVar("Energy") or 0)
	local EchoHealth = math.ceil(LocalPlayer():getDarkRPVar("Energy") or 0)
	
	draw.RoundedBox(0, ScrW() - 1640 - -90, ScrH () - 41 - 10, (130) * DrawHealth / 100, 15.5, Color(3, 250, 11, 250)) --- Hunger
	
	draw.SimpleText("Hunger", "TargetID", ScrW() - 1640 - -130, ScrH() - 41 - 12, Color(255,  255, 255,255)) --- Hunger Text
	
	draw.RoundedBox(0, ScrW() - 1640 - -90, ScrH () - 41.5 - 11.5, 130.5, 19.5, Color(0, 0, 0, 250)) --- Black Outline Hunger
	
	draw.RoundedBox(0, ScrW() - 1640 - -90, ScrH () - 62 - 11.5, 130.5, 19.5, Color(0, 0, 0, 250)) --- Black Outline Armor
	
	local DrawHealth = LocalPlayer():Armor() or 0
	local EchoHealth = LocalPlayer():Armor() or 0
	
	draw.RoundedBox(0, ScrW() - 1640 - -90, ScrH () - 62 - 10, (130) * DrawHealth / 100, 15.5, Color(0, 34, 255, 250)) --- Armor
	
	draw.SimpleText("Armor: ".. EchoHealth, "TargetID", ScrW() - 1640 - -110, ScrH() - 62 - 12, Color(255,255,255,255)) --- Armor Text 
	 
	
	
	
	local DrawHealth = LocalPlayer():GetNWInt( "tcb_stamina" ) or 0
	local DrawHealth = LocalPlayer():GetNWInt( "tcb_stamina" ) or 0
	
	if DrawHealth > 100 then DrawHealth = 100 end 
	if DrawHealth < 0 then DrawHealth = 0 end
	
	if DrawHealth != 0 then
	    draw.RoundedBox(0, ScrW() - 1640 - -90, ScrH () - 83 - 10, (130 + 0) * DrawHealth / 100, 15.5, Color(255, 0, 0, 250)) --- Stamina
	end

	
		
	draw.RoundedBox(0, ScrW() - 1640 - -90, ScrH () - 82.5 - 11.5, 130.5, 19.5, Color(0, 0, 0, 250)) --- Black Outline Stamina
	
	draw.SimpleText("   Stamina", "TargetID", ScrW() - 1640 - -110, ScrH() -83 - 12, Color(255,255,255,255)) --- Stamina Text
	
	local DrawHealth = LocalPlayer():Health() or 0
	local EchoHealth = LocalPlayer():Health() or 0
	
	draw.SimpleText("Name: ".. LocalPlayer():Name(), "TargetID", ScrW() - 2000 - -100, ScrH() - 120 - 12, Color(255,255,255,255)) --- Name Text
	
	draw.SimpleText("Occupation:".. LocalPlayer():getDarkRPVar( "job" ), "TargetID", ScrW() - 2000 - -100,  ScrH() - 105 - 12, Color(255,255,255,255)) --- Job Text
	
	draw.SimpleText("Money: " .. LocalPlayer():getDarkRPVar( "money" ), "TargetID", ScrW() - 2000 - -100, ScrH() - 90 - 12, Color(255,255,255,255)) --- Money Text
	
	draw.SimpleText("Salary: ", "TargetID", ScrW() - 2000 - -100, ScrH() - 75 - 12, Color(255,255,255,255)) --- Salary Text
	
	draw.SimpleText("Clan:", "TargetID", ScrW() - 2000 - -100, ScrH() - 60 - 12, Color(255,255,255,255)) --- Clan Text
	
	draw.SimpleText("Description: A new citizen of Evocity", "TargetID", ScrW() - 2000 - -100, ScrH() - 45 - 12, Color(255,255,255,255)) --- Information Text
	
	draw.SimpleText("Ingame Time:", "TargetID", ScrW() - 2000 - -100, ScrH() - 30 - 12, Color(255,255,255,255)) --- Information Text

	draw.SimpleText("Visit our website:http://civilisationrp.icyboards.net/", "TargetID", ScrW() - 550 - -130, ScrH() - 100 - 12, Color(255,  255, 255,255))

	
end 

[editline]2nd March 2015[/editline]

Its a mess i know but shhhhh! Its my first working hud that does not creat script errors, sure does not work for people lower than 1080p or higher but shhh! XD

[robbert^^]

Alright, don't feel bad but you did make allot of mistakes. it's fine though since i'd assume you're new to coding and we all have to start somewhere.

first off all, you have to realize that every screen resolution is different. Allot of players will have smaller screens then you have, thus doing:
[lua]
ScrW() - 2000 - -100
[/lua]

will result on the text being drawn outside of the screen.
some basic understanding is good to have so let me explain a couple of things. first of all, everything starts at the left top of your screen, to test this just do this:
[lua]
draw.SimpleText("Hi i'm at the left top of your screen!", "default", 10, 10, Color(255, 255, 255,255))
[/lua]

See that this gets drawn at the left top of your screen? now, lets do the right bottom:
[lua]
draw.SimpleText("hi i'm at the right bottom of your screen!", "default", ScrW() -10, ScrH() - 10, Color(255, 255, 255,255))
[/lua]
this will draw at the right bottom of your screen because we get the maximum width and hight of the screen and and take 10 pixels off, should be enough to draw the text on screen.

[B]small test for you, yes i want you to come back and show me the result.[/B]
[B]Question 1[/B]
it probably doesn't fit so i want you to make it fit. post the result code you have.

[B]Question 2[/B]
Now, you probably managed to display the text correctly. For the second question i want you to draw the text at the left bottom of the screen. Again, post the result.

Now, if you did these two questions correctly we'll continue on.

these two:
[lua]
ScrW()
ScrH()
[/lua]

just return the width and the height of the screen, assuming you're past high school, you understand that
[lua]
ScrW() * 0.10
[/lua]

will be 10% of the player his screen width, which would be the same as( This is my screen width, this can differ between players )
[lua]
1920 * 0.10
[/lua]

So, as my final example( and the final questions )
[lua]
draw.RoundedBox(0, ScrW() * 0.10, ScrH() * 0.10, ScrW() * 0.10, ScrH() * 0.10, Color(0, 0, 0, 250))
[/lua]

this will draw a rounded box at the left top of your screen.
[B]Question 3[/B]
I want you to draw this at the left bottom of the screen using ScrW() AND ScrH(), nothing else.( this means no ScrW() - 9001 ). Post the result.

[B]Question 4[/B]
Draw this again at the left bottom of your screen. Again, Post the result.

[B]Question 5[/B]
for the final question, Draw this at the bottom right of your screen. Post the result when you're done.

[Borris_Squad]

i know me saying this sounds dumb but, i dont under stand "Question 1
it probably doesn't fit so i want you to make it fit. post the result code you have." :p

[robbert^^]

Test it out in game, the text will probably go outside of the screen, so if it does, adjust it and post the result.( yes i will test the result t make sure you at least tried. )

[Borris_Squad]

[QUOTE=robbert^^;47243542]Test it out in game, the text will probably go outside of the screen, so if it does, adjust it and post the result.( yes i will test the result t make sure you at least tried. )[/QUOTE]

Ok i get you :)

[editline]2nd March 2015[/editline]

 draw.SimpleText("hi i'm at the right bottom of your screen!", "TargetID", ScrW() -300, ScrH() - 30, Color(255,  255, 255,255)) 

[editline]2nd March 2015[/editline]

[QUOTE=Borris_Squad;47243560]Ok i get you :)

[editline]2nd March 2015[/editline]

 draw.SimpleText("Hi i'm at the left top of your screen!", "TargetID", ScrW() -300, ScrH() - 30, Color(255,  255, 255,255)) 

[/QUOTE] It was ment to be at the bottom right XD

[robbert^^]

Close enough, now the bottom right.
[lua]
draw.SimpleText("hi i'm at the right bottom of your screen!", "default", ScrW() -10, ScrH() - 10, Color(255, 255, 255,255))
[/lua]

[Borris_Squad]

So do it again but with that text?

[editline]2nd March 2015[/editline]

Bottem Left

 draw.SimpleText("Hi i'm at the left top of your screen!", "default", 10, 1050, Color(255,  255, 255,255)) 

Bottom Right

 draw.SimpleText("hi i'm at the right bottom of your screen!", "TargetID", ScrW() -370, ScrH() - 30, Color(255,  255, 255,255)) 

[editline]2nd March 2015[/editline]

i have to go for an hour will be back though :P

[Borris_Squad]

[QUOTE=robbert^^;47243656]Close enough, now the bottom right.
[lua]
draw.SimpleText("hi i'm at the right bottom of your screen!", "default", ScrW() -10, ScrH() - 10, Color(255, 255, 255,255))
[/lua][/QUOTE] Dont hate me but how do you want me to return the width and hight? :{

[Borris_Squad]

So what should i do?

[Borris_Squad]

[QUOTE=Netheous;47238661]Use ScrW() and ScrH() for positioning.

Basically, all you have to know is:

ScrW() starts at right edge, so if you do ScrW() - 200 it'll be 200 px from right edge
ScrH() starts at the bottom, so if you do ScrH() - 500 it'll be 500 px from bottom edge.

When positioning stuff closer to top or left edges, you don't need and shouldn't use ScrW() or ScrH()[/QUOTE]

So if i do Scrh() -1080, people who are not running the game at 1920x1080 cant see becuase its not on their screen, so what would i do so the website text is at the top middle of every ones screen?

[meharryp]

0, ScrW() / 2

The top of everyone's screen will always be the same coordinate.

[Borris_Squad]

[QUOTE=meharryp;47280573]0, ScrW() / 2

The top of everyone's screen will always be the same coordinate.[/QUOTE]

 draw.SimpleText("Visit our website:http://civilisationrp.icyboards.net/", "Trebuchet24", ScrW() -1910, ScrH() -1060, Color(255,  255, 255,255)) --- Website Link And Or Server Name 

So this here, its at the top left of my screen, using that can you give an example so it will be at the top left of every ones screen instead? Becuase if i see how it would look their i will most likly understand :)

[TheFreeman193]

If you're anchoring to the top/left of the screen, use an offset from 0. If from the right/bottom, use an offset from ScrW()/ScrH() minus the width of whatever you're rendering.

[url=http://wiki.garrysmod.com/page/draw/SimpleText]draw.SimpleText[/url] actually makes this even easier, since you can pass two further arguments that allow for vertical/horizontal alignment.

[meharryp]

Imagine this is your screen:
[img]http://i.imgur.com/lh1sCt6.png[/img]
ScrW() returns 16 and ScrH() returns 9. On that image is the point ( 3, 3 ). This can also be interpreted as ( ScrW() - 13, ScrH() - 6 ). However, using ScrW() and ScrH() in this situation will make it so that someone who has a screen that, for example is 10x6, the cross will be placed off the grid, like so:
[img]http://i.imgur.com/Jc5IvpZ.png[/img]
Placing it at ( 3, 3 ) on this grid will achieve the same effect as if the screen was 16x9:
[img]http://i.imgur.com/Ip2iYbk.png[/img]

Doing ScrW() - 1080 is basically the same as hard-coding your HUD elements.

[editline]8th March 2015[/editline]

Also you spelled civilization wrong.

[Borris_Squad]

So instead of ScrW() - 1080 I would ScrW() 3,3?

[meharryp]

:suicide:

No. Have/did you learn how to do coordinates or vectors in school? ( 3, 3 ) is how you display a position on a grid, using the format ( x, y ). ScrW() returns the x value of the screen, and ScrH() returns the y value.