Author Topic: What are the best practices for GUIs across different resolutions?  (Read 5358 times)

Disastercake

  • Jr. Member
  • **
  • Thank You
  • -Given: 0
  • -Receive: 1
  • Posts: 87
  • www.disastercake.com
    • View Profile
    • Disastercake
I'm having difficulty finding anchor settings and GUI placements that work well across multiple screen ratios and resolutions.  It feels like there is only a small window of resolutions that will work well for a given placement of the GUI.

Examples in small resolutions: GUI elements will either go off screen or begin to overlap each other

Examples in high resolutions: GUI elements become too small and too spaced apart.

I think the easiest solution would be to set up the GUI positions and sizes to just work like a big rasterized image; they could expand in size or decrease in size, but would always remain in their exact place relative to the screen view.  The downside I can see to this is GUI elements beginning to get blurry if they are not high enough resolution, but that could be easily remedied by increasing the texture sizes.  I could have swore I had done this in the past (over 1 year ago) with NGUI, but can't seem to find a solution to that now.

Is there a way to do this?  Or are there better practices than this to get desirable GUI placements across multiple resolutions?
Creator of Soul Saga.
http://www.disastercake.com

ArenMook

  • Administrator
  • Hero Member
  • *****
  • Thank You
  • -Given: 337
  • -Receive: 1171
  • Posts: 22,128
  • Toronto, Canada
    • View Profile
Re: What are the best practices for GUIs across different resolutions?
« Reply #1 on: March 29, 2014, 05:38:56 AM »
Fixed Size UIRoot.

Disastercake

  • Jr. Member
  • **
  • Thank You
  • -Given: 0
  • -Receive: 1
  • Posts: 87
  • www.disastercake.com
    • View Profile
    • Disastercake
Re: What are the best practices for GUIs across different resolutions?
« Reply #2 on: March 30, 2014, 12:54:17 PM »
Thanks, Arenmook!  Does this also mean you think this is the best practice for setting up GUI on the PC for multiple resolutions?  If not, do you have any suggestions?
Creator of Soul Saga.
http://www.disastercake.com

ArenMook

  • Administrator
  • Hero Member
  • *****
  • Thank You
  • -Given: 337
  • -Receive: 1171
  • Posts: 22,128
  • Toronto, Canada
    • View Profile
Re: What are the best practices for GUIs across different resolutions?
« Reply #3 on: March 30, 2014, 03:16:29 PM »
There are a few approaches regarding difference in resolutions. Fixed Size UIRoot is  by far the easiest. It will keep your UI looking exactly the same size proportionally to the height of the screen. Anchors are useful if you have a modular UI where certain things need to be in specific locations and you expect the aspect ratio to vary (as it realistically likely will). So placing a minimap in the top right corner would require anchoring it to top-right.

If crispness is desired, you will also need to have multiple atlases -- SD, HD, UHD, etc -- but that's getting advanced.