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:
No comments:
Post a Comment
Note: Only a member of this blog may post a comment.