Author Topic: WP8.0: UI Shrink with Virtual Button Bar  (Read 2260 times)

SEM_FP

  • Newbie
  • *
  • Thank You
  • -Given: 0
  • -Receive: 0
  • Posts: 3
    • View Profile
WP8.0: UI Shrink with Virtual Button Bar
« on: March 10, 2015, 02:14:03 PM »
Hi!

We're encountering an issue on Windows Phone 8.0 devices that include Virtual Button Bars (in our case, the Lumia 635).

It seems the UI elements get shrinked on the horizontal axis. We are using NGUI 3.0.2, but have upgraded our project to latest (3.8.0) and this is still happening.

Comparing two devices with/without the OS button bar, Unity returns the correct Screen.width values. The main camera and gameplay visuals are fine and only NGUI elements appear to be affected by this issue.

Our UIRoot is set to Fixed (Constrained) with Fit Height toggled. From what we understand, there should be no distortion with these settings, only potential cropping.

Attached is a comparison screenshot. As you can see, our buttons which should be perfect circles (above) appear as squished on the horizontal (below).

We are very close to shipping and any help is appreciated.

EDIT: Please note that we are using Unity 4.6.1f1

More digging: It seems like the device's aspect ratio (1.779) may not taken into account at runtime, which is causing the distortion on the display. This behaviour does not occur in editor with the same aspect ratio. Changing the aspect value while the game is running on device does correct the issue, but obviously conflicts with the rest of the UI.
« Last Edit: March 10, 2015, 06:16:08 PM by SEM_FP »

ArenMook

  • Administrator
  • Hero Member
  • *****
  • Thank You
  • -Given: 337
  • -Receive: 1171
  • Posts: 22,128
  • Toronto, Canada
    • View Profile
Re: WP8.0: UI Shrink with Virtual Button Bar
« Reply #1 on: March 10, 2015, 09:00:32 PM »
NGUI always uses uniform scaling, and will never cause squishing like that. For that kind of an effect, X scale needs to be smaller than the Y scale, and UIRoot's scale is always uniform -- all 3 values match. I can't suggest much.

SEM_FP

  • Newbie
  • *
  • Thank You
  • -Given: 0
  • -Receive: 0
  • Posts: 3
    • View Profile
Re: WP8.0: UI Shrink with Virtual Button Bar
« Reply #2 on: March 11, 2015, 09:40:03 AM »
Yes, I suspected it was a scaling issue as well, but went through the entire hierarchy and all scaling is uniform at runtime on device. The reason why I came here is because only NGUI elements seems to be affected by this issue. Have you ever seen this on any of your WP8 tests? What else could I be looking at to narrow this down? I'm opening up a ticket with Unity as well to broaden my chances.

Any help is appreciated.


As it turns out, everything in the game seems to be affected. I'm opening up a ticket with Unity to get this solved.
« Last Edit: March 11, 2015, 10:15:38 AM by SEM_FP »

SEM_FP

  • Newbie
  • *
  • Thank You
  • -Given: 0
  • -Receive: 0
  • Posts: 3
    • View Profile
Re: WP8.0: UI Shrink with Virtual Button Bar
« Reply #3 on: March 12, 2015, 01:01:52 PM »
Just a heads up for anyone who is having this issue.

The problem was fixed in Patch 3 of the Unity 4.6. The fix is in MainPage.xaml.cs, replaces the generated code:

      private void DrawingSurfaceBackground_Loaded(object sender, RoutedEventArgs e)
      {
         if (!_unityStartedLoading)
         {
            _unityStartedLoading = true;

            UnityApp.SetLoadedCallback(() => { Dispatcher.BeginInvoke(Unity_Loaded); });
            
            int physicalWidth, physicalHeight;
            object physicalResolution;

            var content = Application.Current.Host.Content;
            var nativeWidth = (int)Math.Floor(content.ActualWidth * content.ScaleFactor / 100.0 + 0.5);
            var nativeHeight = (int)Math.Floor(content.ActualHeight * content.ScaleFactor / 100.0 + 0.5);

            if (DeviceExtendedProperties.TryGetValue("PhysicalScreenResolution", out physicalResolution))
            {
               var resolution = (System.Windows.Size) physicalResolution;

               physicalWidth = (int)resolution.Width;
               physicalHeight = (int)resolution.Height;
            }
            else
            {
               physicalWidth = nativeWidth;
               physicalHeight = nativeHeight;
            }

            UnityApp.SetNativeResolution(nativeWidth, nativeHeight);
            UnityApp.SetRenderResolution(physicalWidth, physicalHeight);
            UnityPlayer.UnityApp.SetOrientation((int)Orientation);

            DrawingSurfaceBackground.SetBackgroundContentProvider(UnityApp.GetBackgroundContentProvider());
            DrawingSurfaceBackground.SetBackgroundManipulationHandler(UnityApp.GetManipulationHandler());
         }
      }


with

      private void DrawingSurfaceBackground_Loaded(object sender, RoutedEventArgs e)
      {
         if (!_unityStartedLoading)
         {
            _unityStartedLoading = true;

            UnityApp.SetLoadedCallback(() => { Dispatcher.BeginInvoke(Unity_Loaded); });

            var content = Application.Current.Host.Content;
            var nativeWidth = (int)Math.Floor(content.ActualWidth * content.ScaleFactor / 100.0 + 0.5);
            var nativeHeight = (int)Math.Floor(content.ActualHeight * content.ScaleFactor / 100.0 + 0.5);
            
            var physicalWidth = nativeWidth;
            var physicalHeight = nativeHeight;
            object physicalResolution;

            if (DeviceExtendedProperties.TryGetValue("PhysicalScreenResolution", out physicalResolution))
            {
               var resolution = (System.Windows.Size)physicalResolution;
               var nativeScale = content.ActualHeight / content.ActualWidth;
               var physicalScale = resolution.Height / resolution.Width;

               // don't use physical resolution for devices that don't have hardware buttons (e.g. Lumia 630)
               if (Math.Abs(nativeScale - physicalScale) < 0.01)
               {
                  physicalWidth = (int)resolution.Width;
                  physicalHeight = (int)resolution.Height;
               }
            }

            UnityApp.SetNativeResolution(nativeWidth, nativeHeight);
            UnityApp.SetRenderResolution(physicalWidth, physicalHeight);
            UnityPlayer.UnityApp.SetOrientation((int)Orientation);

            DrawingSurfaceBackground.SetBackgroundContentProvider(UnityApp.GetBackgroundContentProvider());
            DrawingSurfaceBackground.SetBackgroundManipulationHandler(UnityApp.GetManipulationHandler());
         }
      }