Sizing and scaling my GUI for different resolutions

Unity Engine
1

I’ve designed my game’s HUD (GUI) to look the way I want it, but everything I have set is according to a specific resolution. If you play it at too small of a resolution part of the HUD gets cut off, and too large and it is no longer centered.

How do I re-size and scale my HUD so that everything is the correct size?

I’m drawing everything with GUI.DrawTexture commands.

2

Have all of the sizes and positions depend on Screen.width and Screen.height.

For example, to make something cover the entire left half of the screen:

GUI.DrawTexture(new Rect(0, 0, Screen.width/2, Screen.height), aTexture, ScaleMode.ScaleToFit, true, 10.0F);

Only pay attention to the Rect, everything else was stripped from the example in the docs.

3

When you scale everything based on Screen.width and Screen.height, you may find that elements get too small or too big at extreme resolutions. As an enhancement to DanielQuick’s suggestion, consider imposing minimum and maximum sizes, too. For example, to cover the entire left half of the screen but guarantee that it’s at least 128 pixels:

GUI.DrawTexture(new Rect(0, 0, Mathf.Max(128f, Screen.width/2), Screen.height), aTexture, ScaleMode.ScaleToFit, true, 10.0F);
4

Hmm, all of the textures I have been using though… I’ve been working in pixel sizes, not percentages. And I have a lot of textures.

I think I’m going to create a custom function where I can feed the screen coordinates according to the default resolution, and then have it scale those values according to the actual screen resolution.

But as I plan this out, I realize that the drawtexture function operates in int values, so if I scale an image by an odd percentage it won’t stay scaled properly.

Especially for things like the health bar. I have a row of health pegs that are full or empty. If they scaled to, say, 2.33 of the default value, then after rounding every third peg is going to be bigger than the others.

I don’t know how to approach this problem…

[UPDATE]
Oh wait, I know.
I’m going to calculate all my HUD sizes from the lowest possible/reasonable resolution, and scale the HUD only to whole pixel amounts according to the size of the smallest element.

It would take me an hour to explain what I mean by that, so… sorry.

5

Just tossing in another idea: What if you don’t scale at all, and instead just set the positions of your HUD elements based on the edges of the screen?

For example, one texture could always be 128x128, but always aligned to the lower right corner of the screen.

6

Because I hate that.
You play at a high resolution and all of a sudden your life bar is too tiny to read. You play at a low resolution and now it’s blocking your view.
Not to mention it requires more work that you think to account for overscan in case you are playing on a console.

7

Didn’t say it was a good idea. :wink: I just mentioned it because I’ve even seen some AAA games do it, but I’m not personally a fan either.