Making a HUD compatible with all Res?

How would I make elements of a HUD compatible with all elements of it?

Example: When having a health bar at 1920 x 1080p in the correct place but then at 1280 x 720 the health bar is way off the screen where it cannot be seen.

Scale it based on screen scale and ratio?

I’ve tried that but I’m pretty sure I’m doing it wrong. Care to provide an example?

Use functions ScrW() and ScrH(), for example ScrW() / 2 and ScrH() / 2 will always be the center of your screen on every resolutions.

Courtesy of Acecool

HUD Creation:

And Scaling:

Edit: Few seconds late :slight_smile:

In addition to this, if you’re going to use something like a derma control, you may want to use :Center or halve the width and height of the control and then subtract the results so that the center of the control is at the center of the screen.

How it would look without doing so
[lua]local button = vgui.Create(“DButton”)
button:SetPos(ScrW() / 2, ScrH() / 2)[/lua]

Notice how the button is more on the right side of the screen. This is because the top left corner of the button is at the center of the screen (which is the way it’s supposed to work), and not the center of the button.

If you want to put the button dead on the center you’d do this
[lua]local button = vgui.Create(“DButton”)

– or

button:SetPos((ScrW() / 2) - (button:GetWide() / 2), (ScrH() / 2) - (button:GetTall() / 2))[/lua]

:Center seems to be a function that shortcuts process, but it centers to the parent, which is something you may not want to do. Just keep this stuff in mind when needing to center something, because there’s at least two different types of centering.

You want to use relative sizes and positions in place of absolute.

Absolute sizes can be fine, just make sure they scale to screen density.

Just for reference, in general you should be using decimal multipliers instead of dividing when it comes to clientside calculations. It’s really only noticeable when you’re doing a lot of complex calculations (calculating arcs, calculating splines, etc) but it’s still a good habit to get into.

ScrW() * .5 //Instead of ScrW() / 2
ScrW() * .33 //Instead of ScrW() / 3

(For numbers, it’s approx. 5-6% faster for LuaJIT)

AFAIK this has been ‘debunked’ in a thread about painting derma buttons/combo boxes, apparently multiplication is only faster for LuaJIT.

Isn’t that what he said?

Thanks a bunch guys. Fixed my issues.