Tasharen Entertainment Forum

Support => NGUI 3 Support => Topic started by: agentsmith666 on November 17, 2012, 03:36:57 AM

Title: Does NGUI have something built in to help with running on different resolutions?
Post by: agentsmith666 on November 17, 2012, 03:36:57 AM
I'm new to NGUI and have questions on displaying GUIs across a variety of different resolutions.  Our game will be released on iOS and Android (which has a lot of devices with different resolutions).  I'm aware we can create different size GUIs for different resolutions but I was wondering if NGUI had something built in to make this easier.  Currently we're using Unity's built in GUI and when set on it's own layer using it's own camera it seems to scale pretty well across multiple test devices (is this because it's aspect ratio based?) NGUI appears to be pixel based so it looks different on all our test devices.

Perhaps there's an easier way to tackle this problem.  Any help would be appreciated!

Cheers!
Title: Re: Does NGUI have something built in to help with running on different resolutions?
Post by: ahgElliot on November 17, 2012, 12:44:32 PM
Hey there,
I am relatively new to NGUI but I do know that the UIRoot (http://www.tasharen.com/ngui/docs/class_u_i_root.html) object has options for the resolution of your GUI on it.  I also believe it scales to fit the screen size. You may want to start by looking there.

Cheers,
Elliot
Title: Re: Does NGUI have something built in to help with running on different resolutions?
Post by: lime-green.at on November 17, 2012, 12:58:18 PM
Im working alot with gui stuff in unity using ngui, the UIRoot script is good, but not as good as it should be. If you want your project to run in all type of display ratios (thats the problem, not resolutions) you should use something like that:
  1. using UnityEngine;
  2. using System.Collections;
  3.  
  4. [ExecuteInEditMode]
  5. public class RatioFix : MonoBehaviour
  6. {
  7.  
  8.     Resolution[] resolutions;
  9.  
  10.     void Start()
  11.     {
  12.         StartCoroutine("Do");
  13.     }
  14.  
  15.     IEnumerator Do()
  16.     {
  17.         yield return new WaitForEndOfFrame();
  18.  
  19.         resolutions = Screen.resolutions;
  20.  
  21.         float targetaspect = 16.0f / 9.0f;
  22.         float windowaspect = (float) resolutions[resolutions.Length - 1].width / (float)resolutions[resolutions.Length - 1].height;
  23.         float scaleheight = windowaspect / targetaspect;
  24.  
  25.         Camera[] camArray = FindObjectsOfType(typeof(Camera)) as Camera[];
  26.         //GameObject[] camArray = GameObject.FindGameObjectsWithTag("Respawn");
  27.         //Camera[] camArray = GameObject.FindGameObjectsWithTag("Respawn") as Camera[];
  28.         //GameObject[] gos = GameObject.FindGameObjectsWithTag("Enemy");
  29.         foreach (Camera camera in camArray)
  30.         {
  31.             if (camera.gameObject.layer != 10)
  32.             {
  33.  
  34.                 if (scaleheight < 1.0f)
  35.                 {
  36.                     Rect rect = camera.rect;
  37.                     rect.width = 1.0f;
  38.                     rect.height = scaleheight;
  39.                     rect.x = 0;
  40.                     rect.y = (1.0f - scaleheight) / 2.0f;
  41.                     camera.rect = rect;
  42.                 }
  43.  
  44.                 else
  45.                 {
  46.                     float scalewidth = 1.0f / scaleheight;
  47.                     Rect rect = camera.rect;
  48.                     rect.width = scalewidth;
  49.                     rect.height = 1.0f;
  50.                     rect.x = (1.0f - scalewidth) / 2.0f;
  51.                     rect.y = 0;
  52.                     camera.rect = rect;
  53.                 }
  54.             }
  55.         }
  56.     }
  57. }
  58.  
  59.  

Just put that script on an empty gameobject. It will fix the ratio for you.
Example: We did the layout in 16:9, if your test device uses the 16.9 Ratio, the UI will perfectly fill the screen without any borders, if you use a test device with 16.10 or any other display ratio, you will still get the full display width but with a black (you can fix that too) bar on the top and bottom.

Hope i could help,
regards
Title: Re: Does NGUI have something built in to help with running on different resolutions?
Post by: agentsmith666 on November 17, 2012, 03:18:08 PM
Hey guys thanks for replying I'll look into UIRoot and RatioFix script!  I did some more research and remembered the guys that produced Snuggle/Smuggle Truck had this issue when releasing on Android and talked about how they solved their aspect ratio problem:

@22:25
http://video.unity3d.com/video/3708116/unite-11-postmortem-smuggle

I also learned the buttons and other GUIs may need to be adjusted depending if it's on a tablet or phone.  With iOS, Unity has an iPad property which can differentiate it from the phone/touch, however on the Android there are some scripts floating around out there that are supposed to work but I think what I'll do is specify the type in it's title:  My Awesome Game (Phone Version)  & My Awesome Game (Tablet Version).

There exists a tool that will do all this for you sold by the Snuggle/Smuggle truck people but it's a little pricey and I'm not sure how easy it is to use.  The aspect ratios we're aiming for are: 3:2, 4:3, 5:3, 16:9, 16:10.  Which means we have to create 5 versions of the GUIs; that's not a problem and we can just have 5 GUI cameras that are all deactivated except for the aspect ratio we're currently building on.  Since there will be a phone and tablet version we'll need to have some code that will scale the buttons.


Title: Re: Does NGUI have something built in to help with running on different resolutions?
Post by: ArenMook on November 17, 2012, 09:07:31 PM
There is really no need to create 5 different GUI layouts. Just create one, but make sure to make it modular -- parts attached to corners and sides of the screen as necessary. If you know you have a status bar on the bottom of your screen, for example... instead of making it a child of your center-aligned panel, make a new panel and put a UIAnchor on it gluing it to the bottom... then parent your status bar to it instead.

This way no matter what screen ratio you get, your UI will look correct.

The easiest way to develop is to leave UIRoot's 'automatic' flag as 'off' if you don't care about losing crispness at higher resolutions. There are many topics on various approaches here on the forum.