Incorrect splash screen orientation (landscape)

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

 

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):

Code (CSharp):

1. #if UNITY_WP_8_1
2.             ExtendedSplashImage.RenderTransform = new RotateTransform() { CenterX = 0.5, CenterY = 0.5, Angle = 270 };
3. #else
4.             ExtendedSplashImage.SetValue(Canvas.LeftProperty, splashImageRect.X);
5.             ExtendedSplashImage.SetValue(Canvas.TopProperty, splashImageRect.Y);
6.             ExtendedSplashImage.Height = splashImageRect.Height;
7.             ExtendedSplashImage.Width = splashImageRect.Width;
8.  
9. #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):

Code (CSharp):

1. #if UNITY_WP_8_1
2.             var inverseScaleX = 1.0f / DXSwapChainPanel.CompositionScaleX;
3.             var inverseScaleY = 1.0f / DXSwapChainPanel.CompositionScaleY;
4.  
5.             ExtendedSplashImage.RenderTransform = new RotateTransform() { CenterX = 0.5, CenterY = 0.5, Angle = 270 };
6.  
7.             ExtendedSplashGrid.Height = splashImageRect.Height * inverseScaleY;
8.             ExtendedSplashGrid.Width = splashImageRect.Width * inverseScaleX;
9. #else
10.             ExtendedSplashImage.SetValue(Canvas.LeftProperty, splashImageRect.X);
11.             ExtendedSplashImage.SetValue(Canvas.TopProperty, splashImageRect.Y);
12.             ExtendedSplashImage.Height = splashImageRect.Height;
13.             ExtendedSplashImage.Width = splashImageRect.Width;
14.  
15. #endif

Any further suggestion is very welcomed.

Thanks!
Tiziano

 

Of course!

Screens taken from a Lumia 625.

First version:


Second version:

 

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

 

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):

Code (CSharp):

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

uhm.. Couldn't be related to the center positioning of the rotation?

 

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: http://forum.unity3d.com/threads/splashscreen-orientation-bug.278095/

 

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.

 

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.

 

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

Code (CSharp):

1.     public sealed partial class MainPage : Page
2.     {
3. ...
4.         //CoreWindow is used to get screen related size (thanks Aurimas :))
5.         private CoreWindow coreWindow;
6.  
7.         public MainPage(SplashScreen splashScreen)
8.         {
9.             this.InitializeComponent();
10.  
11.             //get the current core window
12.             coreWindow = CoreWindow.GetForCurrentThread();
13. ...
14.  
15.         private void PositionImage()
16.         {
17.  
18. #if UNITY_WP_8_1
19. //Windows Phone
20.             ExtendedSplashImage.RenderTransform = new RotateTransform() { CenterX = 0.5, CenterY = 0.5, Angle = 270 };
21.  
22.             //That "/3" seems to do the correct placement!
23.             ExtendedSplashImage.Margin = new Thickness(0, -coreWindow.Bounds.Height / 3, 0, coreWindow.Bounds.Height/3);
24.          
25.             ExtendedSplashGrid.Height = coreWindow.Bounds.Width;
26.             ExtendedSplashGrid.Width = coreWindow.Bounds.Height;
27. #else
28. //Windows Metro
29.             ExtendedSplashImage.SetValue(Canvas.LeftProperty, splashImageRect.X);
30.             ExtendedSplashImage.SetValue(Canvas.TopProperty, splashImageRect.Y);
31.             ExtendedSplashImage.Height = splashImageRect.Height;
32.             ExtendedSplashImage.Width = splashImageRect.Width;
33.  
34. #endif
35.  
36.         }

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!

 

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:

Code (CSharp):

1.             //Windows Phone
2.  
3.             //Used to correctly place the splashscreen
4.             double screenFac = -coreWindow.Bounds.Width / coreWindow.Bounds.Height + 2;
5.  
6.             ExtendedSplashImage.RenderTransform = new RotateTransform() { CenterX = 0.5, CenterY = 0.5, Angle = 270 };
7.            
8.             ExtendedSplashImage.Margin = new Thickness(0, -coreWindow.Bounds.Height * screenFac, 0, coreWindow.Bounds.Height * screenFac);
9.            
10.             ExtendedSplashGrid.Height = coreWindow.Bounds.Width;
11.             ExtendedSplashGrid.Width = coreWindow.Bounds.Height;
12.  

 

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

Code (CSharp):

1. #if UNITY_WP_8_1
2.  
3.             ExtendedSplashImage.RenderTransformOrigin = new Point(0.5, 0.5);
4.             ExtendedSplashImage.RenderTransform = new RotateTransform() { CenterX = 0.5, CenterY = 0.5, Angle = 270 };
5.             ExtendedSplashGrid.VerticalAlignment = VerticalAlignment.Center;
6.             ExtendedSplashGrid.HorizontalAlignment = HorizontalAlignment.Center;
7.             ExtendedSplashGrid.Width =  Window.Current.Bounds.Width*1.75;//splashImageRect.Width/2;
8.             ExtendedSplashGrid.Height = Window.Current.Bounds.Height*1.75;//splashImageRect.Height/2;
9.            
10.  
11. #else
12.             // ExtendedSplashImage.SetValue(Canvas.LeftProperty, splashImageRect.X);
13.             //ExtendedSplashImage.SetValue(Canvas.TopProperty, splashImageRect.Y);
14.             ExtendedSplashImage.Height = splashImageRect.Height;
15.             ExtendedSplashImage.Width = splashImageRect.Width;
16.             ExtendedSplashGrid.Background = new SolidColorBrush(Color.FromArgb(0xFF, 0xe6, 0x4e, 0x4e));
17. #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

 

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);

 

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.

 

Do you also notice a stutter using 1.6666?

To get the correct aspect ratio, this should work:

Code (CSharp):

1.             double screenRatio;
2.             screenRatio = Window.Current.Bounds.Width / Window.Current.Bounds.Height;
3.  
4.             ExtendedSplashGrid.Width = Window.Current.Bounds.Width * screenRatio;
5.             ExtendedSplashGrid.Height = Window.Current.Bounds.Height * screenRatio;
6.  

Thanks!

 

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

Code (CSharp):

1.             ExtendedSplashImage.RenderTransformOrigin = new Point(0.5, 0.5);
2.             ExtendedSplashImage.RenderTransform = new RotateTransform() { CenterX = 0.5, CenterY = 0.5, Angle = 270 };
3.             ExtendedSplashImage.Height = Window.Current.Bounds.Width;
4.             ExtendedSplashImage.Width = Window.Current.Bounds.Height;
5.             ExtendedSplashGrid.VerticalAlignment = VerticalAlignment.Center;
6.             ExtendedSplashGrid.HorizontalAlignment = HorizontalAlignment.Center;
7.             ExtendedSplashGrid.Height = Window.Current.Bounds.Width;
8.             ExtendedSplashGrid.Width = Window.Current.Bounds.Height;
9.  

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!

 

I've just ran into this very same issue. I implemented the last solution, which kind of works, it has an annoying flash / glitch when the script kicks in, which looks terrible. My image is on a pure white background and the glitch looks to me like the image is rotating briefly so that it's long and centered on a landscape screen, thus creating the black borders on the horizontal edges briefly. It probably wouldn't look so bad if I changed the splash to be on a black image, or potentially changed the background colour to white, but I figured the Splash Screen Background Colour setting in the manifest should do that.

Anyone had any better results?

Cheers

 

I was seeing some flickering issues with the code in post #20 above, adding a section to the XAML seems to have fixed it (only checked in one emulator, don't have a device to check):

Code (CSharp):

1.             <Image x:Name="ExtendedSplashImage" Source="Assets/SplashScreen.png" RenderTransformOrigin="0.5,0.5">
2.                 <Image.RenderTransform>
3.                     <CompositeTransform Rotation="270"/>
4.                 </Image.RenderTransform>
5.             </Image>
6.  

Basically I'm just doing these 2 lines in the XAML, which I think fixes the flicker because the image loads at the correct rotation, vs setting it later in the OnResize event:

Code (CSharp):

1. ExtendedSplashImage.RenderTransformOrigin = new Point(0.5, 0.5)
2.  
3. ExtendedSplashImage.RenderTransform = new RotateTransform() { CenterX = 0.5, CenterY = 0.5, Angle = 270 };

You can remove those two lines from your code, or leave them (redundant). Seems like you could do all of this in XAML, but I'm a noob at XAML so I didn't try. I think setting the alignments to "Stretch" for the grid and image, would probably do it, but I didn't feel like spending more time on it for now.

I'm also adding Ads:AdControl to my XAML though, so if I end up having to figure this out, or make other changes, will be sure to post my findings here.

Also, I've moved my MainPage.xaml (and MainPage.xaml.cs) from the "Shared" project to each project (Windows 8.1 and Windows Phone 8.1 in the project explorer)... since I've made enough changes to the 2 versions, and not really sure if you can use conditionals in the XAML anyway.

 

Just wanted to report the solution by shopguy is working for me, thanks for posting this!

 

Thanks guys for a good solution.

It suprises me that Unity has not fixed this yet as there is obviously a solution to it.

 

Tried this solution... but somehow whenever I start my game, I will see my game first screen momentarily, and then the unity splash screen will appear.. and then back to my game screen... I am on Unity 5.3.5.

This is weird... why am I seeing my game first screen for split second and then be shown the unity splash screen and then back to my game?

 

Can you explain exactly what is being fixed? As this important to me..

 

Oh wow...Thank you, finally after waiting almost a year+!.. and multiple(many) threads later, this best news I heard from the Windows team for a while, lets just hope its functions as predicted..