Tasharen Entertainment Forum

Support => NGUI 3 Support => Topic started by: roady on December 16, 2014, 01:38:15 PM

Title: Landscape & Portrait with animated panels.
Post by: roady on December 16, 2014, 01:38:15 PM

I'm trying to build an GUI that will work with both Landscape & Portrait mode, so when the user rotates the screen the layout will still work.

This would be simple to use anchors to fill the screen, but I'm using multiple UIPanel with their own backgrounds that are animated in/out.

I can have all UIPanels -> Background anchored and set to OnStart, this will set the Background for the specific panel to the device size. But the issue occurs when user switches to Landscape mode. Then the Background is at the wrong size.

If I change the background update to OnUpdate it will fill the screen. But when animate the UIPanel in/out it will mess up the view.

Hierarchy:
UI Root (2D)
 - Camera
   - ... some stuff ...
   - Views (UIPanel)
      - MyScreen (UIPanel)
          - text and images
          - Background (UITexture)  <! -- this one
      - MyOtherScreen (UIPanel)
          - text and images
          - Background (UITexture)  <! -- this one
   

How should I solve this problem?
Tried setting Background manually with Camera.pixelWidth or UIPanel.localCorners without success.

Title: Re: Landscape & Portrait with animated panels.
Post by: ArenMook on December 17, 2014, 03:08:55 PM

Since you are animating the panels, I suggest not using anchors on the background textures. Write your own script that will set their width and height to Screen.width and Screen.height.

Title: Re: Landscape & Portrait with animated panels.
Post by: roady on December 18, 2014, 06:43:41 AM

Would be nice to have it possible to move, rotate, animate the panels. So that they aren't locked in camera view.

I put a script on camera to know about orientation change. Then the background images has a script that resizes.
In the back of my head a little warning bell sounds of about anchoring items inside the panel as well. That will be an issue for future me.

On the camera.

1. public class CameraRotation : MonoBehaviour {
2.  
3.         private Camera cam;
4.         private UIRoot mRoot;
5.         private bool isPortrait;
6.         public delegate void OnRotationChange(bool isPortrait, int pixelWidth, int pixelHeight);
7.         public OnRotationChange OnUpdate;
8.  
9.         void Start () {
10.                 cam = GetComponent<Camera> ();
11.                 mRoot = NGUITools.FindInParents<UIRoot>(gameObject);
12.                 isPortrait = (cam.pixelWidth > cam.pixelHeight); // make false value at first so first update runs event
13.         }
14.  
15.        
16.  
17.         void Update () {
18.                 bool n_isPortrait = (cam.pixelWidth < cam.pixelHeight);
19.                 if (n_isPortrait != isPortrait) {
20.                         isPortrait = n_isPortrait;
21.  
22.                         // update
23.                         float ratio = (float)mRoot.activeHeight / Screen.height;
24.                         int width = (int)Mathf.Ceil(Screen.width * ratio);
25.                         int height = (int)Mathf.Ceil(Screen.height * ratio);
26.  
27.                         if(OnUpdate!=null)
28.                                 OnUpdate(isPortrait,width,height);
29.                 }
30.         }
31. }

Now I can set this on my backgrounds.

1. public class BackgroundResizer : MonoBehaviour {
2.  
3.         private CameraRotation cameraRotation;
4.         private UIWidget sprite;
5.  
6.  
7.         void Awake () {
8.                 sprite = GetComponent<UIWidget> ();
9.  
10.                 cameraRotation = GameObject.FindObjectOfType (typeof(CameraRotation)) as CameraRotation;
11.                 cameraRotation.OnUpdate += OnUpdate;
12.         }
13.        
14.  
15.         private void OnUpdate (bool isPortrait, int width, int height) {
16.                 sprite.width = width;
17.                 sprite.height = height;
18.         }
19. }
20.