Tuesday, January 21, 2014

How to have a full screen WHITE splash screen in Unity no matter the resolution

Note: replacing the Unity splash screen with your own is a Pro-only feature as of this writing.

The problem

If you develop mobile games with Unity Pro, you most likely want to replace the default Unity logo that gets displayed while the initial scene is being loaded with something more specific to your game or company. If your splash screen's background is black, no problem: the screen is cleared to black before the splash screen is rendered, therefore if your image does not fit the resolution of the phone or device displaying it, nobody will notice it. If you use a different color however, for example white, this is a different story, since Unity does not expose a parameter to change the splash screen's background color, as of version 4.3.3.

The options

Let's look at what the 3 options in Unity do. For that matter, I'll use a 768*1024 image created for the iPad, and try to make it work on a tablet with a 800*1280 screen resolution.

Option 1: "Center (only scale down)"

Since the image is smaller than the screen, it does not get scaled ("only scale down"). It is centered in the part of the screen that remains once the system bar at the bottom containing the back, home, and tasks buttons has been subtracted. When the game has finished loading and starts, it takes the whole screen minus the system bar, that is: not only the area covered by the splash screen but also the black bands around it, which looks odd.

Option 2: "Scale to fit (letter-boxed)"

This time, the image is scaled so that one of its dimensions (here: the width) fits the screen exactly ("scale to fit"), while the other dimension (the height) stays smaller or equal to the resolution. This means the splash screen is rendered as big as possible without being cut, and of course without using separate values to scale it horizontally and vertically. This is a bit better than before, since the vertical black bands to the left and right of the image have disappeared.

Option 3: "Scale to fill (cropped)"

Like with option 2, the image is scaled and its aspect ratio is preserved; this time however, the scaling ensures the splash screen completely covers the screen (minus the system bar), which in my example means its height perfectly matches the screen, but parts of the image are cropped on the left and right. This actually does not look bad here, because I got lucky; with other resolutions though, I cannot guarantee part of the pots, or the logo in the bottom right corner, or even the game name, will not get cropped, which would look terrible (you can see it's already very close, with the shadow of the rightmost pot, or the last letter of the game title).

The solution

Now that we've seen our options, let's go back to what we want, or actually what we don't want: we certainly don't want black bands around the image if it's smaller than the screen resolution (option 1), and we don't want parts of the image to get cropped (option 3). Option 2 seems to be the best one, except for the splash screen not being tall enough to avoid letter-boxing. Well, let's make it much taller then! Since I'm not aware of any mobile device with an aspect ratio greater than 2:1, I chose this value and extended my splash screen to make it twice as high as it is large (768*1536):

Now, using option 2 would not work anymore: since the image is so tall, "scale to fit" would mean its height fits the screen, and letter-boxing happens on the left and right. Option 3, however, now ensures the image width matches the screen's resolution, and some of the white I added at the top and bottom of the splash screen gets cropped. Can part of the initial image also get cropped? I don't think so, since it was 768*1024, and no device should have a landscape ratio under 4/3 (it would pretty much need to have a screen shaped like a square).

This is what the result looks like: