Search Unity

Sizing and scaling my GUI for different resolutions

Discussion in 'Immediate Mode GUI (IMGUI)' started by Marscaleb, Jul 12, 2014.

  1. Marscaleb

    Marscaleb

    Joined:
    Jan 7, 2014
    Posts:
    1,037
    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. DanielQuick

    DanielQuick

    Joined:
    Dec 31, 2010
    Posts:
    3,137
    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:
    Code (csharp):
    1. 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. TonyLi

    TonyLi

    Joined:
    Apr 10, 2012
    Posts:
    12,697
    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:

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

    Marscaleb

    Joined:
    Jan 7, 2014
    Posts:
    1,037
    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.
     
    Last edited: Jul 18, 2014
  5. TonyLi

    TonyLi

    Joined:
    Apr 10, 2012
    Posts:
    12,697
    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. Marscaleb

    Marscaleb

    Joined:
    Jan 7, 2014
    Posts:
    1,037
    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. TonyLi

    TonyLi

    Joined:
    Apr 10, 2012
    Posts:
    12,697
    Didn't say it was a good idea. ;) I just mentioned it because I've even seen some AAA games do it, but I'm not personally a fan either.