Positioning HUD Elements and VGUI relative to the frame of the player

How can you position HUD elements and other UI relative to the players screen? In other words, making it resiziable for all clients? I’ve been trying to accomplish this recently and can’t seem to get it down.

Here is a hud that I made recently and as you can tell, I’ve messed up bad with positioning

Link to HUD (Sorry it wasn’t allowing me to post HUD correctly)

Use ScrW() and ScrH() to position rather than pixels relative to your resolution.

I tried, this. Including dividing the pixels, subtracting the pixels(pixels as in ScrW and ScrH) but they still end up not resizing in the same spot relative to different resolutions?

Can you post your new code after trying it?

– fuck autocorrect –

Pardon? I don’t understand what you’re saying?

You said that you made an attempt at using ScrW() and ScrH()

I’m asking if you can post the code AFTER you tried using ScrW() and ScrH()

Sorry if I’m making it seem complicated



draw.RoundedBox( 0, ScrW() / 2, ScrH() / 2, 380, 180, hudcolors.background_white ) --White background


It works, I’m not getting errors, but it’s still not resizing properly for all clients and all resolutions.

You’re not changing the fourth and fifth arguments to be universal. The positioning will be universal only with this code.

What’s your game resolution you’re developing this code on?

Doesn’t matter what resoultion he’s running. It should be the same on all, if not most resolutions above 1280x720. (Never used a lower res. So I don’t know completely)

Not if he’s doing shit like 380, 180 for width and height.

Anyways here you go. Grab whatever screen resolution you’re developing on and plug them numbers in here:
[lua]
function getUniversalWidth( number )
return ( number / 1440 ) * ScrW()
end
function getUniversalHeight( number )
return ( number / 900) * ScrH()
end
[/lua]

So then in your code you would do
draw.RoundedBox( 0, ScrW() / 2, ScrH() / 2, getUniversalWidth( 380 ), getUniversalHeight( 180 ), hudcolors.background_white )

I’m developing it on a 1920x1080 screen resolution. Thank you for the response Derek, I’ll try when I get home from work and edit this post with the results.

You didn’t even read my comment correctly did you? I said -> all, if not most resolutions resolutions above 1280x720 <- Obviously it won’t work if a developer has such shit/low resolution.
Don’t need a fixed resolution just see the hud properly. I run my game at 1768x996 and I can see my hud the exact same way as everyone else.

It’s not that I have a shit resolution, it’s that when people download and use the content that I created I don’t want to half ass it, I want to make sure everyone can use what I make.

Something that you can do to then make it easier for yourself is switch the numbers in Derek’s code snippet to be 1920 for the width, and 1080 for the height. This way your always working in a virtual space of 1920x1080, but it will map to whatever size the users window is and maintain the proper sizing ratios. Since you’re developing in 1920x1080 you have a better feel for how things should be in that space and can make better guesses when positioning and sizing things at first.



function getUniversalWidth( number )
    return ( number / 1920) * ScrW()
end
function getUniversalHeight( number )
    return ( number / 1080) * ScrH()
end


Be wary though, if you start using that sort of system you ALWAYS need to use it from then on, otherwise things can get really messy (Don’t use ScrW/ScrH anymore if you use getUniversalWidth/Height, just treat 1920 as max width, and 1080 as max height). While using ScrW/ScrH might not actually cause you any problems, it’s easy to accidentally use it the wrong way and then not notice something screwed up on a different resolution until later on, it’s just a safety precaution really. Make sure you also use the universal width/height for the positioning as well as sizing too!



draw.RoundedBox( 0, getUniversalWidth(1920 / 2), getUniversalHeight(1080 / 2), getUniversalWidth(512), getUniversalHeight(512), hudcolors.background_white )


No matter what though, you’re going to start hating whatever method of sizing and aligning UI you end up using. There is no agreed upon “right” way of sizing UI for multiple resolutions, and it all depends on the type of game and what you’re using it for. Some games work better if you keep HUD elements a fixed size, no matter the resolution of the window, some games prefer to have it always be a fixed ratio/percentage of the window, some games do a sort of hybrid of both. For instance, EVE Online has fixed UI sizing, but you can increase the scale of it from 80-120% (roughly those numbers) since the fixed size might be too small or large for your monitor.

This is awesome, thank you for the little lesson! Appreciate it man.

I don’t understand why people insist on creating these custom functions with their own resolution as the base, when

ScreenScale exists and does the exact same thing, only with 640 as the base.

Could anyone explain?

ScreenScale is fine to use, but it is only based upon the width of the resolution and not the height, so you would need a second function to deal with heights (or the y axis.) So you could use ScreenScale but it would then be required to also have a ScreenScaleY function for dealing with things in the Y axis.

In the end, the functions that Derek posted are the same as ScreenScale except for the base number, and there is one for each axis.
Also another thing is that working with numbers closer to what your developing for is arguably easier.

But if you’re adjusting for both width and height, it’s a recipe for making the HUD look stretched on different aspect ratios. If you use just ScreenScale, and some basic arithmetics with ScrW and ScrH, the HUD will end up looking normal.

I can’t argue with your second argument though, and it’s probably true.

It will look stretched on huge resolutions yes, which is fixable with clamping the values.

No, I mean stretched with a different aspect ratio.