Tasharen Entertainment Forum

Support => NGUI 3 Support => Topic started by: bitomule on October 07, 2012, 02:20:42 PM

Title: iPhone 5 Height and different aspect ratio
Post by: bitomule on October 07, 2012, 02:20:42 PM
Hi,

I'm developing a simple unity game and designing interface based on old iphone's screen ratio. NGUI Anchors and scale works as expected but puts buttons out of screen on iPhone5. Seems like it keeps old iPhone aspect ratio. How can I fix that so my gui can take advantage of the extra height but no more width?

Thanks :)
Title: Re: iPhone 5 Height and different aspect ratio
Post by: ArenMook on October 07, 2012, 07:34:23 PM
UIRoot and anchors are always based on screen's width and height, so assuming Unity is reporting it correctly, everything should work just fine.
Title: Re: iPhone 5 Height and different aspect ratio
Post by: bitomule on October 08, 2012, 01:46:27 AM
Anchors works well, the problem is that I'm using center anchor to place some elements, those elements are near left and right borders. On iPhone 5 those elements are placed on the center, but not scaled enough to fit screen width. Maybe I'm doing something wrong. Should I combine anchor center and anchor left/right?
Title: Re: iPhone 5 Height and different aspect ratio
Post by: Nicki on October 08, 2012, 03:37:25 AM
iphone 5 is 1136x640 (or flipped).

If you have not updated your unity, the old unity will only recognize it as a regular iphone 4s and give your letterboxing around your stuff.

When you have update your unity you can figure out the formfactor by looking at

  1. iPhone.generation == iPhoneGeneration.iPhone5

If your xcode build does not make a Default-h2[somenumbers]@x2.png, it will force letter boxing as well. (If you want to force it, just delete this file if it makes it.

NGUI only has access to the Screen.height and Screen.width that unity provides and that depends on the version of unity.

I hope this helps.
Title: Re: iPhone 5 Height and different aspect ratio
Post by: bitomule on October 08, 2012, 04:01:11 AM
Thanks Nicki,

but I've update Unity (I have iPhone5 screen ratios on Unity play window).

I've added 2 images to show the problem. First one is iPhone3g/3gs/4/4s aspect, looks perfect. Second one is with iPhone5 aspect ratio, buttons are out of screen space.

(https://dl.dropbox.com/u/138696/iPhone4Test.png)   (https://dl.dropbox.com/u/138696/iPhone5Test.png)
Title: Re: iPhone 5 Height and different aspect ratio
Post by: ArenMook on October 08, 2012, 04:16:39 AM
That looks perfectly normal to me. iPhone 5 is narrower, so the view can't fit both buttons. Design your UI on the iPhone 5, and it will just have some extra space on earlier iPhones, which is better than it being cropped like that.
Title: Re: iPhone 5 Height and different aspect ratio
Post by: bitomule on October 08, 2012, 04:31:45 AM
The question is. Is there any way with NGUI that I can scale down those buttons to fit iPhone5 screen width? Or maybe fake NGUI screen width and height so it scales content like on iPhone 4, not iPhone5.
Title: Re: iPhone 5 Height and different aspect ratio
Post by: Nicki on October 08, 2012, 06:42:09 AM
Set manual height of your UIRoot from 480 to 568 for iphone 5 (assuming you have a highres atlas with 0.5 pixel density).
Title: Re: iPhone 5 Height and different aspect ratio
Post by: mdeletrain on October 10, 2012, 06:49:18 AM
IMHO, this is related to the fact that NGUI only takes an height as a size reference.
In this particular case the size reference should be the width.
I already depicted the problem on another post (http://www.tasharen.com/forum/index.php?topic=1899.0), and I think this needs UIRoot not to have two but four scaling options : automatic height, automatic width, manual height, manual width.
Title: Re: iPhone 5 Height and different aspect ratio
Post by: Nicki on October 10, 2012, 06:58:23 AM
If you had both height and width to set, it would make pixels non-square. This is generally bad.
Title: Re: iPhone 5 Height and different aspect ratio
Post by: mdeletrain on October 10, 2012, 08:36:23 AM
Just as 'automatic' and 'manual height' are mutually exclusive, 'automatic height' 'manual height' 'automatic width' and 'manual width' would be too : there should actually be a combo box with those for scaling modes.
Title: Re: iPhone 5 Height and different aspect ratio
Post by: ArenMook on October 10, 2012, 09:37:04 AM
As Nicki said, non square pixels = very bad. And it breaks clipping.
Title: Re: iPhone 5 Height and different aspect ratio
Post by: mdeletrain on October 10, 2012, 12:36:16 PM
Yes but why are you talking about non square pixels ?
If you scale everything based on screen's width OR height (being it automatically or manually set), the only thing that changes is the reference dimension.
I really don't talk about being able to set both the width and the height reference at the same time.

You'll find screen capture of what I have in mind as attachments.
Title: Re: iPhone 5 Height and different aspect ratio
Post by: Nicki on October 10, 2012, 05:37:42 PM
Ok, this makes sense to me.

I'm not sure it's the best solution, but it's a nice option to have for developers.
Title: Re: iPhone 5 Height and different aspect ratio
Post by: ArenMook on October 11, 2012, 04:41:22 AM
Remind me to look into it after the 12th
Title: Re: iPhone 5 Height and different aspect ratio
Post by: mdeletrain on October 11, 2012, 04:42:03 AM
Sure ! :p
Title: Re: iPhone 5 Height and different aspect ratio
Post by: mdeletrain on October 15, 2012, 09:51:18 AM
Reminder !!  :D
Title: Re: iPhone 5 Height and different aspect ratio
Post by: ArenMook on October 15, 2012, 01:51:32 PM
*looks around for a snooze button* <_<
Title: Re: iPhone 5 Height and different aspect ratio
Post by: gamesonytablet on October 19, 2012, 11:33:34 AM
Hi, any progress on this? I vote +1 for this to be released on the next version ;)
Title: Re: iPhone 5 Height and different aspect ratio
Post by: Nicki on October 19, 2012, 12:56:38 PM
You can calculate this yourself and set an appropriate manual height which will scale with width to fit the design from iphone 4.

Title: Re: iPhone 5 Height and different aspect ratio
Post by: gamesonytablet on October 20, 2012, 08:04:42 PM
Sure, manually adjusting height is feasible, and maybe the right solution in most cases.

Though, a friend of mine Udasan has created a short C# code snippet to automatically adjust to either height or width.
(original code is published on his website, and he agreed to share the snippet here below. No liability for usage, and etc. ;))

If you attach this NGUIUtilScalableUIRoot script to UIRoot, it will adjust to either height or width as the attached screen shots.

In any way, it would be great to see this "automatic adjustment" functionality included in further versions of NGUI, as already discussed to make sense. Will this happen?

  1. using UnityEngine;
  2. using System.Collections;
  3.  
  4. [ExecuteInEditMode]
  5. public class NGUIUtilScalableUIRoot : MonoBehaviour
  6. {
  7.  public int manualWidth = 320;
  8.  public int manualHeight = 240;
  9.  
  10.  UIRoot uiRoot_;
  11.  
  12.  void Awake()
  13.  {
  14.   uiRoot_ = GetComponent<UIRoot>();
  15.  }
  16.  
  17.  void Update ()
  18.  {
  19.   if(!uiRoot_ || manualWidth <= 0 || manualHeight <= 0){ return; }
  20.    
  21.   int h = manualHeight;
  22.   float r = (float)(Screen.height * manualWidth) / (Screen.width * manualHeight); // (Screen.height / manualHeight) / (Screen.width / manualWidth)
  23.   if(r  > 1){ h = (int)(h * r); } // to pretend target height is more high, because screen width is too smaller to show all UI
  24.    
  25.   if(uiRoot_.automatic){ uiRoot_.automatic = false; }
  26.   if(uiRoot_.manualHeight != h){ uiRoot_.manualHeight = h; }
  27.  }
  28. }
Title: Re: iPhone 5 Height and different aspect ratio
Post by: ArenMook on October 20, 2012, 09:18:40 PM
You will see it in the next update, when I push it out.
Title: Re: iPhone 5 Height and different aspect ratio
Post by: gamesonytablet on November 16, 2012, 11:51:27 AM
Hi,

I saw an update in 2.2.5 version of the automatic mode, but was not sure if this was the solution to this topic:

- FIX: UIRoot will now only consider min/max clamping in automatic mode.

Please correct me if I'm wrong, but I thought the discussion in this thread was about adding a Width parameter as well.
Was this update due to a different reason? ... Just not sure :-[
Title: Re: iPhone 5 Height and different aspect ratio
Post by: ArenMook on November 16, 2012, 05:41:24 PM
It was indeed, and I added it at first, but it was... messy, for the lack of a better word. It involved adjustments to activeHeight and pixelSizeAdjustments properties, and made things quite confusing, so I chose to remove it and look for a more elegant approach. For now, I suggest sticking to that helper script.
Title: Re: iPhone 5 Height and different aspect ratio
Post by: favoyang on January 15, 2013, 10:10:55 AM
I have similar issue that the game is original designed on 3:2 screen, then need support 16:9 aspect ratio for iPhone5, 4:3 ratio for iPad. My approach is that 1) keep 3:2 as default design ratio which is the mid aspect ratio of [1.33, 1.5, 1.75], 2) use UIAnchor to adjust UI to stick to edge. However, sometime the 16:9 ratio is too taller / narrower that some UI get cropped.

So I use below script to adjust UIRoot.manualHeight to make it UIRoot follow manualWidth instead of manualHeight. For example, if pick 3:2 as default ratio, UIRoot.manualHeight = 960. Then you need set manualWidth to 640. During runtime, the script will change UIRoot.manualHeight to 1136 on iPhone5, so the width will be 640 as expected.

  1. using UnityEngine;
  2. using System.Collections;
  3.  
  4. // The script make UIRoot scale based on manualWidth instead of UIRoot.manualHeight.
  5. // if current aspect ratio > maxAcceptAspectRatio.
  6. [RequireComponent(typeof(UIRoot))]
  7. public class UIRootHelper : MonoBehaviour {
  8.  
  9.     UIRoot uiRoot;
  10.     public int manualWidth;
  11.     public float maxAcceptAspectRatio = 1.67f;
  12.  
  13.     void Awake() {
  14.         uiRoot = GetComponent<UIRoot>();
  15.     }
  16.  
  17.     void OnEnable() {
  18.         UpdateHeight();
  19.     }
  20.  
  21.     void UpdateHeight() {
  22.         float aspect = (float)Screen.height / Screen.width;
  23.         if (aspect > maxAcceptAspectRatio) {
  24.             // Change manualHeight to simulate scale based on manualWidth.
  25.             int manualHeight = (int)(manualWidth * aspect);
  26.             if (uiRoot.manualHeight != manualHeight)
  27.                 uiRoot.manualHeight = manualHeight;
  28.         }
  29.     }
  30. }
  31.