Improving Download Time (2-3x) for Full Screen Background Images

Getting your backgrounds quickly is very important for games, especially at startup time when you're downloading a lot of stuff anyway (like menu buttons, simple effects, such as explosions and other things that didn't make it into the "core" xap to reduce initial load time).

Since you are full screen, it is a good idea to detect the resolution (that would be the ActualWidth and ActualHeight properties of your root control) and programatically return a suitable sized background.

For example, a 1920x1080 JPG image is about 200K while the same image 800x600 is about 50K.

The source code is simple, but I post it in case someone needs it and doesn't have to write it from scratch:

[code:c#]

/// <summary>
/// The background resolutions available
/// </summary>
private static int[] _resAvailable = new int[] { 800, 1024, 1280, 1600, 1920 };

/// <summary>
/// Returns the most appropriate resolution from the list of available resolutions for the background images
/// Best resolution is defined as the closest resolution that is bigger than the resolution input as an argument
/// </summary>
/// <param name="currentXResolution"></param>
/// <returns></returns>
private static int GetBestStockResolution(int currentXResolution) {
    int count = _resAvailable.Length;

    for (int i = 0; i < count; i++) {
        if (_resAvailable[i] >= currentXResolution) {
            return _resAvailable[i];
        }
    }

    // no suitable resolution found, return largest
    return _resAvailable[count - 1];
}

/// <summary>
/// Determines the correct url for an image based on teh current resolution and short image name
/// </summary>
/// <param name="imageShortName">the short name of the image (e.g. "shockLord"</param>
/// <returns>url to the image, including resolution (http://.../image1920.jpg) </returns>
public static string GetBackgroundImageUrl(string imageShortName) {
    return String.Format("http://www.mysite.com/images/{0}{1}.jpg", imageShortName, GetBestStockResolution((int)Globals.XResolution));
}
[/code] 

In the above code Globals.XResolution is set to the current full screen resolution when the player clicks play to go full screen.

To use the code, you need to have the same image with various resolutions, e.g. mysite.com/images/background1920.jpg, mysite.com/images/background1024.jpg and so on.

Last but not least, you can use a low-quality background image when the game goes full screen for the first time, and then replace it with the high-quality image once available. I made a special control just for that: SmoothImage in the Controls Pack on Nokola.com. The SmoothImage control will preserve its previous image, whenever you change it's Source and will display the new image once it's available. You can see the SmoothImage sample by launching http://nokola.com/shock and switching between the classes - note how the backroung changes "smoothly" and you don't see a period of transparent/missing image background while the new background gets downloaded.