Windows 8 - High-res SplashScreens

I'm playing around with some Windows 8 development making a Windows 8 version of my Windows Phone 7 game Code Breaker (with a multi-player twist :)).

The first thing a user will see when launching your app is the splash screen. This is a static image displayed whilst your app initialises. After your application tile, this is the next opportunity to present your brand and set a stylistic tone for your app.

Something that doesn't seem to be covered in any of the documentation is high res images. From poking around the WindowsApps folder on my machine and playing around in the emulator I've deduced the following points.

High-res Splash Screens

The default splash screen included in the project templates is 620x300. For higher resolution displays you can also provide additional scale images at 140% and 180%. This seems to be achieved by convention rather than anything you can explicitly specify in configuration. Simply name the higher res versions with the same name and append the filename with .scale-100.png, .scale-140.png or .scale-180.png.

Without these scaled up versions, the default behaviour seems to be to letterbox your image with more background colour. This isn't too bad but on very large resolutions your logo will seem very small.

Scale	Image size (pixels)	Filename
1x	620 x 300	MySplash.png & MySplash.scale-100.png*
1.4x	868 x 420	MySplash.scale-140.png
1.8x	1116 x 540	MySplash.scale-180.png

*The original un-appended file must be present which is the filename you must have set in your package.appmanifest, even though this image isn't used.

Here are some template files to start from, just extract into your project images folder: SplashScreens.zip

High Contrast

You can also provide dark and light high contrast versions for if the user has their computer in high contrast mode (Under PC Settings > Ease of Access). To do this simply append "constrast-black" or "contrast-white" to your splash image filenames. You can provide both scale and contrast by separating with an underscore so you would end up with something like "SplashScreen.contrast-black_scale-180.png".

Check out the official splash screen guidelines here.