Author Topic: Resizing GUI for different PC resolution  (Read 2796 times)

scheissmann

  • Guest
Resizing GUI for different PC resolution
« on: May 07, 2013, 11:41:59 AM »
I know this topic has been discussed a million times :) However all the discussions I have found are related to programs run on mobile devices. With PC, you have to cater to very low resolution (800x600) as well as very high resolution (1900x1080), the later is more than twice the size of former. In addition, my GUI is not simply buttons and controls, it's basically a "canvas" which calculates the location of mouse cursor while inputs are fired, and based on the location of cursor do different things, so I have to take into consideration the difference between cursor position and widget's locationPosition.

I have following options:

1. make the GUI (canvas) size smaller than 800x600 so at the lowest resolution it doesn't go outside the screen. I don't really like this approach because high resolution users will suffer a tiny canvas.

2. Calculate a scale number based on the current screen resolution, and then resize all widgets using this scaler, and scale the result of all math calculation in the code as well. This is a big effort and I'm not sure if it's the best way to do it.

I see some other options such as changing the size of the rect on the camera, which essentially zooms in or out on the widgets, is this a good method? but I guess my biggest concern is how to recalculate the translation between cursor position (which is in respect to screensize) and widget's localPosition (which is in respect to the UI camera)? Currently I just subtract the cursor position by half of the screen length/width to match the localPositino of widgets.

Thanks!

ArenMook

  • Administrator
  • Hero Member
  • *****
  • Thank You
  • -Given: 337
  • -Receive: 1171
  • Posts: 22,128
  • Toronto, Canada
    • View Profile
Re: Resizing GUI for different PC resolution
« Reply #1 on: May 07, 2013, 04:31:13 PM »
Did you watch the "catering to different screen sizes" video?

scheissmann

  • Guest
Re: Resizing GUI for different PC resolution
« Reply #2 on: May 07, 2013, 04:37:35 PM »
hi Aren,

Thank you for your response!!

Yes I did watch that, I think it's mentioning to use Automatic checkbox to let NGUI resize the boxes, as well as anchors to determine where on the screen a widget is located. I tried it out, the gui itself looks fine, however the difference between mouse cursor position and widget's localPosition is different. I subtract cursor position x y by screen.length/2 and screen.width/2 and then use that number to compare with widget localPosition. This works fine when I don't let NGUI auto-size the widgets, but when I do as the video says, then the cursor position calculation is off. Do you know how this option affects cursor position?

Thanks!

scheissmann

  • Guest
Re: Resizing GUI for different PC resolution
« Reply #3 on: May 08, 2013, 12:20:49 AM »
Actually I got it now... when you manually size the UIRoot, the screen resolution is "shrunk" into the manual set size so all I need to do is calculate the mouse's percentage (0-100) width and height corresponding to the resolution, and then use that percentage to calculate the relative width/height in respect of UIRoot

Kevron

  • Guest
Re: Resizing GUI for different PC resolution
« Reply #4 on: June 16, 2013, 10:34:13 AM »
Hi Scheissmann,

I guess I have hit the same challenge that you have solved.
In the UIROOT script my scaling style is "Fixed Size" and my Manual height is 800.
When I drag and drop GUI elements, I see there is an growing offset between the mouse cursor and the "dragged" GUI element.
I reckon this is why you did the calculation?

Could you just go through your latest post and explain it in big obvious and easy steps? I am not used to do any scripting, so don't spare any details if you have changed some of the NGUI scripts.

Best,
Tor Martin