DarkRP Hud not fitting all resolutions

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

This means scaling your HUD with the screen width/height. A good place to start is looking at ScrW and ScrH.

But i have made the hud, just people cant see on resolutions lower than 720p

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()

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

Tomorrow I will paste the code

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:
https://dl.dropboxusercontent.com/u/26074909/tutoring/hud/proper_hud_creation.lua.html

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

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

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.

and then i change my screen size…

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.

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…

http://pastebin.com/NbVpwREt

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.

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 );


This is what he’s doing wrong. Instead of doing ScrW() - 2000 or any other big value for positioning, just hardcode it.

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

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.

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

Question 2
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.
Question 3
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.

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

Question 5
for the final question, Draw this at the bottom right of your screen. Post the result when you’re done.

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.” :stuck_out_tongue:

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. )

Ok i get you :slight_smile:

[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]

It was ment to be at the bottom right XD

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]