HUD Scrambles when resolution is changed. How to fix?

Hello everyone! I recently began coding(I’m a beginner) and tried making a HUD. My issue is the HUD just scrambles up when I change my resolution. Here are some pictures:

Here is the normal HUD (Different Resolution):

Here it is when I change the resolution:

Please help!
Thank you.

ScreenWidth() and ScreenHeight()

Use ScrH()

ex: draw.RoundedBox( 0, 20, ScrH()-6-250-60-450, 250, Color( 35, 35, 35, 255 ) )

I did and it still happens.


local function Base()

	draw.RoundedBox(6, ScrW() - 1130 - 10, ScrH () - 250 - 10, 600, 200, Color(128, 128, 128, 255))
	draw.RoundedBox(6, ScrW() - 1125 - 10, ScrH () - 245 - 10, 590, 190, Color(233, 130, 26, 255))
	
	-- RPName
	draw.RoundedBox(6, ScrW() - 1047 - 10, ScrH() - 245 -10, 405, 42, Color(0, 0, 0, 255))
	draw.RoundedBox(6, ScrW() - 1045 - 10, ScrH() - 243 -10, 400, 37, Color(192, 192, 192, 255))
	
	-- Health
		
		draw.RoundedBox(6, ScrW() - 1115 - 10, ScrH() - 180 - 10, 270, 35, Color(250, 145, 42, 255))
		draw.RoundedBox(6, ScrW() - 1112 - 10, ScrH() - 176 - 10, 263, 28, Color(145, 137, 128, 255))
	
		local Health = LocalPlayer():Health() or 0
		local WriteHealth = LocalPlayer():Health() or 0
		
		if DrawHealth > 100 then DrawHealth = 100 end
		if DrawHealth < 0 then DrawHealth = 0 end
			
		if DrawHealth != 0 then
			draw.RoundedBox(6, ScrW() - 1112 - 10, ScrH() - 176 - 10, (263) * DrawHealth / 100, 28, Color(250, 10, 10, 255))
		end
	   draw.DrawText( "Health: "..WriteHealth, "ChatFont", ScrW() -1100 - 10, ScrH () - 176 - 10, Color(255,255,255,255))
 
end

what is your code? if you’re defining ScrW and ScrH as variables make sure to do it inside the HUDPaint hook or else the values will always be the old ones.



local function Base()

	draw.RoundedBox(6, ScrW() - 1130 - 10, ScrH () - 250 - 10, 600, 200, Color(128, 128, 128, 255))
	draw.RoundedBox(6, ScrW() - 1125 - 10, ScrH () - 245 - 10, 590, 190, Color(233, 130, 26, 255))
	
	-- RPName
	draw.RoundedBox(6, ScrW() - 1047 - 10, ScrH() - 245 -10, 405, 42, Color(0, 0, 0, 255))
	draw.RoundedBox(6, ScrW() - 1045 - 10, ScrH() - 243 -10, 400, 37, Color(192, 192, 192, 255))
	
	-- Health
		
		draw.RoundedBox(6, ScrW() - 1115 - 10, ScrH() - 180 - 10, 270, 35, Color(250, 145, 42, 255))
		draw.RoundedBox(6, ScrW() - 1112 - 10, ScrH() - 176 - 10, 263, 28, Color(145, 137, 128, 255))
	
		local Health = LocalPlayer():Health() or 0
		local WriteHealth = LocalPlayer():Health() or 0
		
		if DrawHealth > 100 then DrawHealth = 100 end
		if DrawHealth < 0 then DrawHealth = 0 end
			
		if DrawHealth != 0 then
			draw.RoundedBox(6, ScrW() - 1112 - 10, ScrH() - 176 - 10, (263) * DrawHealth / 100, 28, Color(250, 10, 10, 255))
		end
	   draw.DrawText( "Health: "..WriteHealth, "ChatFont", ScrW() -1100 - 10, ScrH () - 176 - 10, Color(255,255,255,255))
 
end


I know it’s bad but i’m fairly new to coding :slight_smile:

You could replace “ScrW() - 1130 - 10” and change it to " ScrW() - 1140"

Ill give it a shot, if anyone has any solutions help please :slight_smile:

You only need to use ScrW() and ScrH() for unknown positions.
So if you want a box in the top left there is no reason to use ScrW() and ScrH() as you already know the position.
If you however want it in the bottom or on the right side then you need to use them because the values will change if you have another screen size.

Think of it as a grid.
Top: 0, Bottom: Screen Height.
Left: 0, Right: Screen Width.

The bottom and right would then be unknown positions. So use ScrW() and ScrH() for those.

I did that, it stopped the HUD from moving, but I can’t solve this. Check it out, these are 2 different resolutions with the same random box I drew.
Resolution #1:

Resolution #2:

I’m not sure what to do, please help.

The width of that box would be the screen width. So the value is unknown.
Use ScrW() for the width and it should be fine.

but what if I would like my HUD to be at the bottom of the my screen? Am I screwed there?

Simply subtract your HUD object’s height from ScrH() and use that as Y coordinate.



local boxHeight = 40
draw.RoundedBox(4, 0, ScrH()-boxHeight, ScrW(), boxHeight, Color(255,0,0))


thanks

I’d recommend not to change resolutions during game.

Are you serious?

what a shitty excuse for a solution

I used your exact code, and these were the results:

and here it is with a different resolution:

as you can see the HUD has a larger height in the first picture. Is it supposed to be that way, if not, is there a way to fix it?

Thanks

Make the size as a fraction of ScrH().

For example:

1280x600 - resolution
40 - height
600 - screen height ( ScrH() )

1920x1080 - new resolution
1080 - screen height

new height - 40 / 600 * 1080 = 72

use ScrH() * 0.06 as the box height

can you please show me an example of what the code would look like? Just so I can maybe understand it more