Universal NGUI for iPad&iPhone

[divertap]

Hi!

I recently adquired NGUI and was wondering something about universal gui's. I have seen the videotutorial abou the way to change between HD and SD atlases when you are designing the GUI. It's amazing. But, what happends when you are designing an universal app for iphone and ipad. The aspect ratio it's not the same, so, there are some sprites that cannot be the same size. For example, a landing screen where you have a menu. The background of this menu (not tiled, just one sprite) is different size for iphone and ipad, so which is the best way to do it?

Tx,
M.

[ArenMook]

The best way to go about it is to use UIAnchor to glue groups of widgets to sides and corners of the screen, so they move when the aspect ratio changes. You can also use UIStretch to fill the area of the screen, or to just stretch something horizontally or vertically.

[dlewis]

You can also use UIStretch to fill the area of the screen, or to just stretch something horizontally or vertically.

You just answered a question I have been thinking about how I can go about doing. Thanks

[divertap]

But the UIStretch does not maintain the aspect ratio neither the retina capabilities. Let's use an example: A game for ipad&iphone both retina and sd versions. A welcome screen with a menu and a background. When building the UI, what image should I use for the background:

1. If I use the ipad retina version (2048x1536) the uiscretch works fine for ipad no retina but in iphone the background does not maintain the aspect ratio.
2. If I use the ipad no retina version (1024x768) the uiscretch works fine for ipad retina (loosing resolution) but the same problem with the iphones
3. If I use the iphone retina version (960x640) the uiscretch works fine for the iphone no retina but in the ipad's does not maintain the aspect ratio. In addition, we loose resolution in the ipad's.
4. Sample problem than 2) but with iphone no retina.

Any ideas? Should I design the UI with iPad Retina Atlas? iPhone Retina Atlas? Both?

Tx,
M.

[Nicki]

You use 3 different atlases.

SD - for ipods, low res iphones
HD - for iphone retina, ipad
UD (ultra def) - for ipad retina.

in the atlas prefab, you set the pixel size to respectively 1, .5f, .25f.

You use a 4th reference atlas which initially references the SD atlas and set everything up in the 480*320 size (or 320*480 if you're landscape).

Now there's two ways of going at actually building your UI. The best way is like Aron mentioned above - set anchors and attach widgets to the anchors so things just change place depending on aspect, or Make everything be attach to top or bottom and set it from that anchor - this means that something that fills the entire screen on the iphone will have borders on the ipad - if you have  a game element or just a background in the background, then this can work as well.

In my UI, I've made a script that changed the reference atlas to any of the other atlases based on the device resolution, but if it's an iPad I don't want it to loose the pixel perfectness, so on the UIRoot object I have a script attached that changes the UI root settings.

Everything is setup like it's 480px high (portrait) but on the ipad, this makes my UI fill the full height and stretch. Since my pixel size on the HD atlas is 0.5, I only need the root to think that the height is half of what it is, so I set the manual height to 512 and then it's pixel perfect.

1. myUIRoot = gameObject.GetComponent<UIRoot>();
2. if (DeviceInfo.formFactor == DeviceInfo.FormFactor.iPad)
3. {
4.   //sets size to 512x384 for full screen (existing high res assets stay pixel perfect ( a little smaller on screen)).  
5.   int newHeight = Mathf.RoundToInt(myUIRoot.manualHeight * 16 / 15); //will work for retina ipad too
6.   myUIRoot.manualHeight = newHeight;                   
7. }

[divertap]

Thanks Nicki. Then, you design your UI with the UIRoot property "Automatic" unchecked? Can you paste the full scripts for changing the atlas reference?

Tx!
M.

[Nicki]

Yeah, I put it to 480 and leave automatic off.

My resolution changer is a little bit dumb at the moment, since I have to reference all the atlases (lots of memory potentially) so replacing that part with Resources.Load would be better.

1. using UnityEngine;
2. using System.Collections;
3. using System.Collections.Generic;
4.  
5. public class ResolutionSetup : MonoBehaviour
6. {
7.         public UIAtlas[] usedAtlasses;
8.         public UIAtlas[] lowResAtlasses;
9.         public UIAtlas[] highResAtlasses;
10.        
11.         void Awake()
12.         {              
13.                 if (lowResAtlasses.Length != highResAtlasses.Length)
14.                 {
15.                         Debug.LogError("Low res and high res atlasses do not fit!");
16.                 }
17.                 else
18.                 {                      
19.                         if (DeviceInfo.isHighres)
20.                         {
21.                                 //handle high res atlas
22.                                 for (int i = 0; i<usedAtlasses.Length; i++)                            
23.                                 {                                      
24.                                         usedAtlasses[i].replacement = highResAtlasses[i];
25.                                 }
26.                         }
27.                         else
28.                         {
29.                                 //handle low res atlas
30.                                 for (int i = 0; i<usedAtlasses.Length; i++)                            
31.                                 {                              
32.                                         usedAtlasses[i].replacement = lowResAtlasses[i];
33.                                 }
34.                         }
35.                 }              
36.         }
37.  
38.         void OnDisable()
39.         {
40.                 if (DeviceInfo.isHighres) //so the replacement doesn't stick after I stop the Editor playmode.
41.                 {
42.                         for (int i = 0; i<highResAtlasses.Length; i++)
43.                         {
44.                                 usedAtlasses[i].replacement = lowResAtlasses[i];
45.                         }
46.                 }
47.                 else
48.                 {
49.                         Debug.Log("Is low res, no atlas change");
50.                 }
51.         }
52. }
53.  
54.  

[divertap]

Perfect! The DeviceInfo is another script? Could you paste it?

Tx!!!

[Nicki]

Yeah, device info is its own script.

You just look on either Screen.height and Screen.width to set the formfactor. I just use it as a convenience script.

In the editor I just do this

1. isHighres = Screen.height>480.0f;
2. formFactor = Screen.height>960.0f ? FormFactor.iPad : FormFactor.iPhone;
3.  

that works on the devices too, but there I look at iPhoneSettings.generation and check for those. Either way is good.

[ArenMook]

Thanks, Nicki, you already have more knowledge on this than I do

[Nicki]

[ArenMook]

Rofl wtf

[Tim]

No matter what I do to set my project up as universal I always seem to get some graphic bugs.  I even tried setting it up exactly how Nicki describes and It mostly works, except some of the images have a few pixels that are off.  This is one image in my atlas

SD:


HD:


I have tried several other ways of making it universal and I always seem to get little bugs like this, where a few things seem to be off by half a pixel, or pixel.  I tried flipping Half Pixel Offset on/off and it fixes some graphics, but breaks others. 

Any ideas on what may be causing this?

Thanks

[ArenMook]

Off the top of my head, I can't say what's wrong. I assume you've made sure that all the objects leading up to your widgets use whole integer numbers for positions, none of them have floating-point values like 1.234? If you can't figure it out, you can send me a small reproduceable example of it going wrong, and I will look into it. Perhaps I missed something!

[Nicki]

Make absolutely sure that your game window is the actual size you want it to be (see the size in the stats tab ). This tends to happen if it's resized a little smaller than your target resolution.