Author Topic: Platform-independent UI that keeps aspect ratio?  (Read 4416 times)

JTaylor0982

  • Newbie
  • *
  • Thank You
  • -Given: 1
  • -Receive: 0
  • Posts: 5
    • View Profile
Platform-independent UI that keeps aspect ratio?
« on: November 17, 2014, 08:41:22 PM »
Hello.

I'm kind of a newbie to Unity and to NGUI. I've been using Unity for close to a year now, off and on. However, I'm not new to C# programming.

That said... I can't for the *life* of me figure out how to keep a consistent aspect ratio among different Android devices for a game we're designing with NGUI.

For whatever reason, everything looks fine in the editor. But when I build it and run it on my devices (mainly a Samsung Galaxy S3 on Kitkat 4.4.2 with the Hellkat ROM, but other devices exhibit same problem), part of (but not all!) of my UI is stretched and totally incorrect. I've been through the forums, looked for answers, but my trouble seems fairly unique. I do not have MTR enabled, and I am not emulating OpenGL. I'm using Unity 4.5.5.f1 and NGUI 3.6.8.

As a more detailed example, to be specific, I have an ammo slider bar at the bottom of the screen, and a fire button. They're fine in the editor but HUGE on the cell phone, the button takes up the bottom 1/4 of the screen and you can only see the tip of the ammo bar. They function properly but do not scale correctly. Further, I have a game over screen that comes up when the losing condition is met. The background and labels are too large just as the button and slider are... most of it cannot be seen. Yet, it looks right in the editor. As a final example, the camera that points at the main playing area (picture an infinite runner) seems to catch a different amount of the playing area among different devices. That is, my Samsung catches like 80% of the area, another designer on the team has a different device that gets about 70-75%, etc... why is this (if you can tell me), and is this related to my other problems?

I have tried playing with it and picking at it myself, in the code. But it's been fruitless. Please help. I am willing to do whatever it takes to get this fixed, and will work back and forth over the forums until my fingers wear off from typing if I have to. Lol. Any and all consideration is appreciated! Thank you!

ArenMook

  • Administrator
  • Hero Member
  • *****
  • Thank You
  • -Given: 337
  • -Receive: 1171
  • Posts: 22,128
  • Toronto, Canada
    • View Profile
Re: Platform-independent UI that keeps aspect ratio?
« Reply #1 on: November 18, 2014, 05:21:16 AM »
What is your UIRoot set to? Change it to be Constrained instead of Flexible.

JTaylor0982

  • Newbie
  • *
  • Thank You
  • -Given: 1
  • -Receive: 0
  • Posts: 5
    • View Profile
Re: Platform-independent UI that keeps aspect ratio?
« Reply #2 on: November 18, 2014, 11:38:29 AM »
Thank you for the lightning-fast response! :D

I will attempt to find this setting and change it shortly. In fact I don't ever recall seeing it... I will update you with what happens when I test it. :)

JTaylor0982

  • Newbie
  • *
  • Thank You
  • -Given: 1
  • -Receive: 0
  • Posts: 5
    • View Profile
Re: Platform-independent UI that keeps aspect ratio?
« Reply #3 on: November 18, 2014, 03:25:25 PM »
What is your UIRoot set to? Change it to be Constrained instead of Flexible.

Okie dokies. So, I literally just went to try and change this setting... but all I have for options are PixelPerfect, FixedSize, and FixedSizeOnMobiles. Neither Constrained nor Flexible appear as options for me in the drop down box. I have attached a screen shot to show you what I mean...

So, unless these options appear in a different version, and / or I am mistaken about the version of NGUI I am using, then I'm stuck again for now. I will continue to browse good old Google in the meantime, until I hear back from you. :) Thanks in advance!

charliehelman

  • Newbie
  • *
  • Thank You
  • -Given: 3
  • -Receive: 2
  • Posts: 16
    • View Profile
Re: Platform-independent UI that keeps aspect ratio?
« Reply #4 on: November 18, 2014, 05:07:11 PM »
FixedSize is the equivalent of Constrained in the older versions of nGUI. Try that.

JTaylor0982

  • Newbie
  • *
  • Thank You
  • -Given: 1
  • -Receive: 0
  • Posts: 5
    • View Profile
Re: Platform-independent UI that keeps aspect ratio?
« Reply #5 on: November 18, 2014, 05:30:28 PM »
FixedSize is the equivalent of Constrained in the older versions of nGUI. Try that.

I've been playing around with it off and on too since then. I changed it to FixedSize and, while not perfect, it's a major improvement. I'm in the process of adjusting and tweaking other sizes and settings, etc... I'll let you guys know how it works out.

For everyone's reference, what version of NGUI started carrying the Constrained and Flexible scaling style options? I obviously don't have it.

charliehelman

  • Newbie
  • *
  • Thank You
  • -Given: 3
  • -Receive: 2
  • Posts: 16
    • View Profile
Re: Platform-independent UI that keeps aspect ratio?
« Reply #6 on: November 18, 2014, 07:34:40 PM »
I couldn't find anything in the patch notes specifically mentioning it, but I would guess 3.7.0. It's really just better naming. There's now also some pretty useful descriptions for each options right in the inspector, plus extra options like DPI scaling, "fit to width/height constraints", etc.

I recommend upgrading, if you can.

JTaylor0982

  • Newbie
  • *
  • Thank You
  • -Given: 1
  • -Receive: 0
  • Posts: 5
    • View Profile
Re: Platform-independent UI that keeps aspect ratio?
« Reply #7 on: November 18, 2014, 08:25:06 PM »
I couldn't find anything in the patch notes specifically mentioning it, but I would guess 3.7.0. It's really just better naming. There's now also some pretty useful descriptions for each options right in the inspector, plus extra options like DPI scaling, "fit to width/height constraints", etc.

I recommend upgrading, if you can.

Thanks for the help. :)

I think I at least found a temporary solution. It seems setting it to FixedSize or FixedSizeOnMobiles sets it to the way I need it to be, so I can manage the elements manually. I've had to do some repetitive fine tuning to the anchors and the size of the elements themselves. But it works, at least for now.

Now... as far as my other problem... I have to set the main camera's size to 5.5 or so in order to get it to "zoom out" enough on my device to see the entire playing area. Is there any other way around this? Furthermore, after making the fix, for some reason the rest of my UI is completely invisible in the editor, yet ironically is perfectly positioned, visible and functional on my test device. Weird... as a FYI, I currently am also incorporating a joystick feature to control the main character on-screen, and the product is called CNJoystick. It actually uses its own separate UI camera. Would this interfere with NGUI at all as long as I kept the CNJoystick camera out of the UIRoot? Or could this be affecting my UI in the editor? Are there any known issues between NGUI and this product? These are slightly less pressing than my major issue but still annoying, so I'm trying to figure it out. Thanks again for all the help so far, Aren and Charlie. :D

ArenMook

  • Administrator
  • Hero Member
  • *****
  • Thank You
  • -Given: 337
  • -Receive: 1171
  • Posts: 22,128
  • Toronto, Canada
    • View Profile
Re: Platform-independent UI that keeps aspect ratio?
« Reply #8 on: November 19, 2014, 03:39:47 PM »
Make sure you are using the latest NGUI, especially if you are on the latest Unity patch / beta as it's bugged and only the latest version of NGUI has a work-around in place.

NGUI UIs are always created with camera's ortho size remaining at 1. Select UIRoot and hit ALT+SHIFT+P to ensure that you don't have any rogue scaling going on.