Author Topic: Fixing Aspect Ratio and Mouse Position  (Read 7686 times)

maaya

  • Newbie
  • *
  • Thank You
  • -Given: 0
  • -Receive: 0
  • Posts: 22
    • View Profile
Fixing Aspect Ratio and Mouse Position
« on: September 04, 2014, 06:13:23 PM »
Hi,

I am relatively new to Unity and NGUI and am struggling with setting up the UI for multi-resolution/multi-aspect ratio devices.

The UI is now built for 16:9, using assets sized appropriately for 2560x1442.
To use it on 4:3 devices, I understand there are 3 options:
  • Using NGUI's Anchor and Stretch system, adjust the entire GUI.
  • Use different scenes for different aspect ratios along with different assets and dynamically show the scenes at run-time based on the device
  • Make the 16:9 show on 4:3 devices with black bars on top.

Since both are quite time-consuming to redo the whole thing at this point, considering #3, I came across AspectUtility in the forums that adjusts the Camera's Viewport rect which visually works just fine.

However, dragging objects around makes the mouse cursor move separately from the object being dragged.

Would appreciate any help and direction with this issue.
Thanks
« Last Edit: September 05, 2014, 01:15:29 AM by maaya »

ArenMook

  • Administrator
  • Hero Member
  • *****
  • Thank You
  • -Given: 337
  • -Receive: 1171
  • Posts: 22,128
  • Toronto, Canada
    • View Profile
Re: Fixing Aspect Ratio and Mouse Position
« Reply #1 on: September 05, 2014, 09:38:19 AM »
If you want to go with #3, set the UIRoot to use a Constrained scaling style, choose the desired resolution and check both Constrain Width and Height's Fit options.

Also keep in mind that this approach means your UI won't be crisp on devices that aren't 2560x1442. #1 will make things crisp, but you should use built-in anchoring (on the widgets themselves) rather than the legacy UIAnchor / UIStretch components.

maaya

  • Newbie
  • *
  • Thank You
  • -Given: 0
  • -Receive: 0
  • Posts: 22
    • View Profile
Re: Fixing Aspect Ratio and Mouse Position
« Reply #2 on: September 05, 2014, 10:59:45 AM »
If you want to go with #3, set the UIRoot to use a Constrained scaling style, choose the desired resolution and check both Constrain Width and Height's Fit options.

Thanks Aren. I have the UIRoot already set to FixedSize with Manual Height 1442, which does not help with the mouse position being different from the GameObject's.

I dont see the Constrain Width and Height fit options you mentioned. Pointers, please.

ArenMook

  • Administrator
  • Hero Member
  • *****
  • Thank You
  • -Given: 337
  • -Receive: 1171
  • Posts: 22,128
  • Toronto, Canada
    • View Profile
Re: Fixing Aspect Ratio and Mouse Position
« Reply #3 on: September 05, 2014, 01:22:59 PM »
You need to update your NGUI. In the future please always update first before posting.

maaya

  • Newbie
  • *
  • Thank You
  • -Given: 0
  • -Receive: 0
  • Posts: 22
    • View Profile
Re: Fixing Aspect Ratio and Mouse Position
« Reply #4 on: September 05, 2014, 03:34:29 PM »
I apologize for not using the updated version.

Having upgraded to NGUI v3.7.1, updating some code dependencies and setting the UIRoot to Constrained as suggested, the initial Mouse cursor position differing from the object position is fixed but the Anchor system is broken/different (?).

I see a "UIAnchor is deprecated.." message. And previously UIAnchor'd elements to the top and bottom are  floating to the top and bottom (of the view?)

For prefabs that are instantiated at run-time, I am not sure what I should Anchor them to now, for the "Unified" option on the widget.

I am a bit confused and would appreciate if you can point to a tutorial or documentation to understand whats happening.

Thanks a ton.
« Last Edit: September 05, 2014, 03:56:15 PM by maaya »

ArenMook

  • Administrator
  • Hero Member
  • *****
  • Thank You
  • -Given: 337
  • -Receive: 1171
  • Posts: 22,128
  • Toronto, Canada
    • View Profile
Re: Fixing Aspect Ratio and Mouse Position
« Reply #5 on: September 06, 2014, 01:58:38 AM »
Check the documentation page for UIRect for an explanation on how built-in layout system works. Everything you could do with UIAnchor/UIStretch can be done with the layout system.