Incorrect splash screen orientation (landscape)

Stephane-Imbert · February 2, 2015, 2:14pm

Hi,

We are porting an iOS/Android game to WIindows 8 Store and are running into issues with the splash screen.

The game is designed to run in landscape mode only (we manually set the supported orientations in Visual Studio since there doesn’t seem to be an option in Unity itself for this platform).

When we run on windows phone, the splash screen shows up first as we expect (note that the sides below assume a portrait image since that is what both Unity and Visual Studio require… 480x800 etc.)

Within a few seconds, the splash screen rotates 90o and is shown truncated (notice how the white dashed areas are gone and we have black bars on either side) This is happening regardless of the orientation of the device at the time.

We are providing all the images in the required sizes in the project settings.

The issue seems to originate from the boilerplate code generated by Unity (I am assuming) in MainPage.xaml.cs specifically the following function:
private void PositionImage()
{
var inverseScaleX = 1.0f / DXSwapChainPanel.CompositionScaleX;
var inverseScaleY = 1.0f / DXSwapChainPanel.CompositionScaleY;

ExtendedSplashImage.SetValue(Canvas.LeftProperty, splashImageRect.X * inverseScaleX);
ExtendedSplashImage.SetValue(Canvas.TopProperty, splashImageRect.Y * inverseScaleY);
ExtendedSplashImage.Height = splashImageRect.Height * inverseScaleY;
ExtendedSplashImage.Width = splashImageRect.Width * inverseScaleX;
}

When running on a PC, the splash screen is centered and taking a 9th of the screen (different issue which already is listed in the forums) but the orientation is fine so we are unsure if and how we are supposed to modify the xaml to work in all cases.

Since the image is both cropped AND rotated we don’t really have a good way to provide a graphic that will work in all cases and we have some legal test to display here anyway (so switching to a simple graphic is not really an option).

Is this a known issue? Am I missing something with the way the splash screen is intended to work?
In case this isn’t an actual issue, what is the proper way to get a landscape only splash screen to work properly for all Windows 8 Store versions and enforce landscape?

We are using Unity 4.6.2f1 and Visual Studio Community 2013.

Thanks!

Stephane

Aurimas-Cernius · February 2, 2015, 5:27pm

First of all remove first two lines from PositionImage(), they are wrong (also remove those multiplications on those two variables, they are wrong). This is a know bug.
You are free to modify that code the way you want, Unity does not overwrite that file when building.

Tautvydas-Zilys · February 2, 2015, 6:07pm

Hi,

since Windows Phone menu is always portrait, when user clicks on the application, OS displays its splashscreen before it can read its manifest. That means that it will always be displayed in portrait. When your application loads, it detects that portrait is not a valid orientation, so it turns itself landscape.

May I suggest that you put in a landscape splashscreen, such that OS would display it as you wish? Then, you could modify the XAML to actually rotate the image -90° to compensate for the automatic rotation that occurs once your manifest is read.

tiz777 · February 22, 2015, 11:09pm

Hi,
I’m having the same problem and I followed your suggestion. Rotation is now correct, but I can’t figure out how to correctly placed it.

With this code, the splash screen is shown smaller (placed in the center of the screen):

#if UNITY_WP_8_1
            ExtendedSplashImage.RenderTransform = new RotateTransform() { CenterX = 0.5, CenterY = 0.5, Angle = 270 };
#else
            ExtendedSplashImage.SetValue(Canvas.LeftProperty, splashImageRect.X);
            ExtendedSplashImage.SetValue(Canvas.TopProperty, splashImageRect.Y);
            ExtendedSplashImage.Height = splashImageRect.Height;
            ExtendedSplashImage.Width = splashImageRect.Width;

#endif

by modifying a bit with the original “buggy” version, the image is shown the correct size, but it’s placed about in the middle of the screen on the Y axis (cutting about half image):

#if UNITY_WP_8_1
            var inverseScaleX = 1.0f / DXSwapChainPanel.CompositionScaleX;
            var inverseScaleY = 1.0f / DXSwapChainPanel.CompositionScaleY;

            ExtendedSplashImage.RenderTransform = new RotateTransform() { CenterX = 0.5, CenterY = 0.5, Angle = 270 };

            ExtendedSplashGrid.Height = splashImageRect.Height * inverseScaleY;
            ExtendedSplashGrid.Width = splashImageRect.Width * inverseScaleX;
#else
            ExtendedSplashImage.SetValue(Canvas.LeftProperty, splashImageRect.X);
            ExtendedSplashImage.SetValue(Canvas.TopProperty, splashImageRect.Y);
            ExtendedSplashImage.Height = splashImageRect.Height;
            ExtendedSplashImage.Width = splashImageRect.Width;

#endif

Any further suggestion is very welcomed.

Thanks!
Tiziano

Tautvydas-Zilys · February 23, 2015, 8:06am

Do you have a screenshot of how it looks?

Aurimas-Cernius · February 23, 2015, 9:00am

Nuke these two lines, they are bogus. Scale shoud be 1.
I’m not sure, but you might need to take CoreWindow size here for adjustment.

tiz777 · February 23, 2015, 9:04am

Of course!

Screens taken from a Lumia 625.

First version:

Second version:

tiz777 · February 23, 2015, 9:11am

Yes I know, you told this in the previous post, but using it the resulting size is in fact correct, just not the positioning…

tiz777 · February 23, 2015, 9:30am

Using CoreWindow I get the same result as the second version, size is correct but not positioning, here the code (note that Width and Height are inverted. Using them accordingly, the image is cut with black stripes on left and right side):

            ExtendedSplashImage.RenderTransform = new RotateTransform() { CenterX = 0.5, CenterY = 0.5, Angle = 270 };
            ExtendedSplashGrid.Height = coreWindow.Bounds.Width;
            ExtendedSplashGrid.Width = coreWindow.Bounds.Height;

uhm… Couldn’t be related to the center positioning of the rotation?

MrEsquire · February 23, 2015, 10:47am

I made a thread about these issues long time ago, again I have same issue with every Win release (unity 4.6.3)
I understand your response, but really is there a nicer and noob friendly way of fixing this?
Can’t Unity add a small feature in future releases?
My Portrait splashscreen is fine, game is in landscape, then it just flips wrong, double splash screen created in a way, see thread: SplashScreen Orientation Bug - Unity Engine - Unity Discussions

MrEsquire · February 23, 2015, 2:14pm

Listen guys, I dunno why this is so hard currently?

Even on Windows Phone, I get the splashscreen as per Unity, portrait all nice.
Why the need for the second splash screen where it tries to do a resize, is there a way to block this?

All the workaround from the devs are being very vague, we simple need some examples if no direct coding into Unity editor will take place.

Aurimas-Cernius · February 23, 2015, 3:15pm

You don’t need it. You can safely delete all that extended splash screen stuff. Just that if your game does not start fast enough, it will not look nice.
You can check Microsofts example for extended splash screen.

MrEsquire · February 23, 2015, 3:19pm

Ok thank you, got it now. I understand the meaning of the extended screen now, I guess now back to our problem of getting it to be the same as the Unity Normal Splash screen as per editor. I tried to follow the above code but get same issue as the user who wrote it. If there was a mimic option - have extended splash screen as the same as Unity that would be great piece of code.

tiz777 · February 23, 2015, 7:42pm

So, finally! Here my “trial & error” working solution:

    public sealed partial class MainPage : Page
    {
...
        //CoreWindow is used to get screen related size (thanks Aurimas :))
        private CoreWindow coreWindow;

        public MainPage(SplashScreen splashScreen)
        {
            this.InitializeComponent();

            //get the current core window
            coreWindow = CoreWindow.GetForCurrentThread();
...

        private void PositionImage()
        {

#if UNITY_WP_8_1
//Windows Phone
            ExtendedSplashImage.RenderTransform = new RotateTransform() { CenterX = 0.5, CenterY = 0.5, Angle = 270 };

            //That "/3" seems to do the correct placement!
            ExtendedSplashImage.Margin = new Thickness(0, -coreWindow.Bounds.Height / 3, 0, coreWindow.Bounds.Height/3);
          
            ExtendedSplashGrid.Height = coreWindow.Bounds.Width;
            ExtendedSplashGrid.Width = coreWindow.Bounds.Height;
#else
//Windows Metro
            ExtendedSplashImage.SetValue(Canvas.LeftProperty, splashImageRect.X);
            ExtendedSplashImage.SetValue(Canvas.TopProperty, splashImageRect.Y);
            ExtendedSplashImage.Height = splashImageRect.Height;
            ExtendedSplashImage.Width = splashImageRect.Width;

#endif

        }

I’m running this on a Lumia 625, please let me know if it does also correctly work on other devices.

Many thanks in advance!

tiz777 · February 23, 2015, 8:15pm

and the trial & error goes on!
That way I got the “/3” factor using coreWindow.Bounds data, now it should in theory fit to all screen formats.

…like before, tested only on Lumia 625:

            //Windows Phone

            //Used to correctly place the splashscreen
            double screenFac = -coreWindow.Bounds.Width / coreWindow.Bounds.Height + 2;

            ExtendedSplashImage.RenderTransform = new RotateTransform() { CenterX = 0.5, CenterY = 0.5, Angle = 270 };
           
            ExtendedSplashImage.Margin = new Thickness(0, -coreWindow.Bounds.Height * screenFac, 0, coreWindow.Bounds.Height * screenFac);
           
            ExtendedSplashGrid.Height = coreWindow.Bounds.Width;
            ExtendedSplashGrid.Width = coreWindow.Bounds.Height;

MrEsquire · February 24, 2015, 12:23pm

OK everyone I would like to share my final solution after hours of trying to hack this.

#if UNITY_WP_8_1

            ExtendedSplashImage.RenderTransformOrigin = new Point(0.5, 0.5);
            ExtendedSplashImage.RenderTransform = new RotateTransform() { CenterX = 0.5, CenterY = 0.5, Angle = 270 };
            ExtendedSplashGrid.VerticalAlignment = VerticalAlignment.Center;
            ExtendedSplashGrid.HorizontalAlignment = HorizontalAlignment.Center;
            ExtendedSplashGrid.Width =  Window.Current.Bounds.Width*1.75;//splashImageRect.Width/2;
            ExtendedSplashGrid.Height = Window.Current.Bounds.Height*1.75;//splashImageRect.Height/2;
           

#else
            // ExtendedSplashImage.SetValue(Canvas.LeftProperty, splashImageRect.X);
            //ExtendedSplashImage.SetValue(Canvas.TopProperty, splashImageRect.Y);
            ExtendedSplashImage.Height = splashImageRect.Height;
            ExtendedSplashImage.Width = splashImageRect.Width;
            ExtendedSplashGrid.Background = new SolidColorBrush(Color.FromArgb(0xFF, 0xe6, 0x4e, 0x4e));
#endif

I tested on one phone now will test on Emulators to see if sizing is working correctly.
Please provide feedback and like if this solved your issue.
As you can see there is a Windows solution also included (For this you need to do a hack, change background color to that of your image)

Thanks

tiz777 · February 24, 2015, 9:12pm

Interesting solution! But to make it correctly work on the Lumia 625, I have to multiply by 1.6666 (=screen Width/screen Height in landscape mode) instead of 1.75.
Can’t figure out to what this factor depends…

Furthermore, just a little thing: you can remove this line because it’s already told in RotateTransform call:
ExtendedSplashImage.RenderTransformOrigin=new Point(0.5, 0.5);

MrEsquire · February 24, 2015, 9:58pm

Yes I be honest 1.75 is not perfect and a small stutter is always created, but it fits all the phone sizes, full splash screen. Thing is I cant spend anymore time on this as not a professional programmer. I still hope Unity address some confusions when it comes to this. I had to add that extra line as it was not simply working for me without it, kept rotating it out the screen, I try it out anyway.

tiz777 · February 24, 2015, 10:07pm

Do you also notice a stutter using 1.6666?

To get the correct aspect ratio, this should work:

            double screenRatio;
            screenRatio = Window.Current.Bounds.Width / Window.Current.Bounds.Height;

            ExtendedSplashGrid.Width = Window.Current.Bounds.Width * screenRatio;
            ExtendedSplashGrid.Height = Window.Current.Bounds.Height * screenRatio;

Thanks!

tiz777 · February 25, 2015, 2:10pm

And after some further tries, this seems to be a working solution (mostly originally written by MrEsquire):

            ExtendedSplashImage.RenderTransformOrigin = new Point(0.5, 0.5);
            ExtendedSplashImage.RenderTransform = new RotateTransform() { CenterX = 0.5, CenterY = 0.5, Angle = 270 };
            ExtendedSplashImage.Height = Window.Current.Bounds.Width;
            ExtendedSplashImage.Width = Window.Current.Bounds.Height;
            ExtendedSplashGrid.VerticalAlignment = VerticalAlignment.Center;
            ExtendedSplashGrid.HorizontalAlignment = HorizontalAlignment.Center;
            ExtendedSplashGrid.Height = Window.Current.Bounds.Width;
            ExtendedSplashGrid.Width = Window.Current.Bounds.Height;

I tested this code using different splash screen image size. With previous solutions, removing the fitting splash screen for the 625 (480x800 px) resulted a black screen…
I think that the issue is mostly related to width and height that have to be switched in assignments to grid and image.

Hope this will help!

Thanks!